Ajax调用WebService--JavaScript/Ajax--编程设计网

=波波日志 > JavaScript/Ajax > Ajax调用WebService=

[转]Ajax调用WebService

国庆假期闲来无聊，也跟风研究了一下Ajax，翻了翻《Ajax 基础教程》，对Ajax做了一个系统的了解。书中涉及服务器端技术都是用Servelet来实现，看着不爽，虽然说在.NET与PHP也可以实现，但并没有例子。我想在.NET中使用，又不想去重写HttpHandler，也不想用Ajax.net，能不能直接通过javascript访问WebService来实现呢。理论是可行的，但比较烦的就是在客户端需要记住webservice的方法与参数的名称。
下面是利用Webservice和Ajax实现《Ajax 基础教程》书中进度条一例的代码：
1、WebService，根据客户端的访问返回进度：

using System;
2

using System.Collections;
3

using System.ComponentModel;
4

using System.Data;
5

using System.Diagnostics;
6

using System.Web;
7

using System.Web.Services;
8

namespace AjaxSample
10

{
11

/// <summary>
12

/// ProgressBarService 的摘要说明。
13

/// </summary>
14

[WebService(Namespace="http://jeetqiu.com/ProgressBar/")]
15

public class ProgressBarService : System.Web.Services.WebService
16

{
17

public ProgressBarService()
18

{
19

//CODEGEN: 该调用是 ASP.NET Web 服务设计器所必需的
20

InitializeComponent();
21

}
22

组件设计器生成的代码
49

// WEB 服务示例
51

// HelloWorld() 示例服务返回字符串 Hello World
52

// 若要生成，请取消注释下列行，然后保存并生成项目
53

// 若要测试此 Web 服务，请按 F5 键
54

// [WebMethod]
56

// public string HelloWorld()
57

// {
58

// return "Hello World";
59

// }
60

[WebMethod]
61

public string GetProgress(string task, int key)
62

{
63

string percent = "";
64

if(task == "create")
65

{
66

percent = "1";
67

}
68

else
69

{
70

switch(key)
71

{
72

case 1:
73

percent = "10";
74

break;
75

case 2:
76

percent = "23";
77

break;
78

case 3:
79

percent = "35";
80

break;
81

case 4:
82

percent = "51";
83

break;
84

case 5:
85

percent = "64";
86

break;
87

case 6:
88

percent = "73";
89

break;
90

case 7:
91

percent = "89";
92

break;
93

case 8:
94

percent = "100";
95

break;
96

}
97

}
98

return percent;
99

}
100

}
101

}
102

2、客户端HTML页，访问WebService并更新进度条信息：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2

<html>
3

<head>
4

<title>Ajax Progress Bar</title>
5

var xmlHttp;
7

var key = 1;
8

var bar_color = 'gray';
9

var span_id = "block";
10

var clear = "   "
11

var SERVICE_URL = "http://localhost/AjaxSample/ProgressBarService.asmx";
13

var SOAP_ACTION_BASE = "http://jeetqiu.com/ProgressBar/";
14

function createXMLHttpRequest() {
16

if (window.ActiveXObject) {
17

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
18

}
19

else if (window.XMLHttpRequest) {
20

xmlHttp = new XMLHttpRequest();
21

}
22

}
23

function go() {
25

createXMLHttpRequest();
26

checkDiv();
27

/**
28

var url = "progressbar.aspx?task=create";
29

var button = document.getElementById("go");
30

button.disabled = true;
31

xmlHttp.open("GET", url, true);
32

xmlHttp.onreadystatechange = goCallback;
33

xmlHttp.send(null);*/
34

var sRequest = getRequest("create",0);
36

var soapActionHeader = SOAP_ACTION_BASE + "GetProgress"
37

var button = document.getElementById("go");
38

button.disable = true;
39

xmlHttp.open("POST", SERVICE_URL, true);
40

xmlHttp.onreadystatechange = goCallback;
41

xmlHttp.setRequestHeader("Content-Type", "text/xml");
42

xmlHttp.setRequestHeader("SOAPAction", soapActionHeader);
43

xmlHttp.send(sRequest);
44

}
45

function goCallback() {
47

if (xmlHttp.readyState == 4) {
48

if (xmlHttp.status == 200) {
49

setTimeout("pollServer()", 2000);
50

}
51

}
52

}
53

function getRequest(sTask, iKey)
55

{
56

var sRequest = "<soap:Envelope xmlns:xsi=\""
57

+ "http://www.w3.org/2001/XMLSchema-instance\" "
58

+ "xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" "
59

+ "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">\n"
60

+ "<soap:Body>\n"
61

+ "<" + "GetProgress" + " xmlns=\"" + SOAP_ACTION_BASE + "\">\n"
62

+ "<task>" + sTask + "</task>\n"
63

+ "<key>" + iKey + "</key>\n"
64

+ "</" + "GetProgress" + ">\n"
65

+ "</soap:Body>\n"
66

+ "</soap:Envelope>\n";
67

return sRequest;
68

}
69

function pollServer() {
70

createXMLHttpRequest();
71

var sRequest = getRequest("poll",key);
72

var soapActionHeader = SOAP_ACTION_BASE + "GetProgress"
73

xmlHttp.open("POST", SERVICE_URL, true);
75

xmlHttp.onreadystatechange = pollCallback;
76

xmlHttp.setRequestHeader("Content-Type", "text/xml");
77

xmlHttp.setRequestHeader("SOAPAction", soapActionHeader);
78

xmlHttp.send(sRequest);
79

key ++;
80

}
81

function pollCallback() {
83

if (xmlHttp.readyState == 4) {
84

if (xmlHttp.status == 200) {
85

var percent_complete = xmlHttp.responseXML.getElementsByTagName("GetProgressResult")[0].firstChild.data;
86

var index = processResult(percent_complete);
88

for (var i = 1; i <= index; i++) {
89

var elem = document.getElementById("block" + i);
90

elem.innerHTML = clear;
91

elem.style.backgroundColor = bar_color;
93

var next_cell = i + 1;
94

if (next_cell > index && next_cell <= 9) {
95

document.getElementById("block" + next_cell).innerHTML = percent_complete + "%";
96

}
97

}
98

if (index < 9) {
99

setTimeout("pollServer()", 2000);
100

} else {
101

document.getElementById("complete").innerHTML = "Complete!";
102

document.getElementById("go").disabled = false;
103

}
104

}
105

}
106

}
107

108

function processResult(percent_complete) {
109

var ind;
110

if (percent_complete.length == 1) {
111

ind = 1;
112

} else if (percent_complete.length == 2) {
113

ind = percent_complete.substring(0, 1);
114

} else {
115

ind = 9;
116

}
117

return ind;
118

}
119

120

function checkDiv() {
121

var progress_bar = document.getElementById("progressBar");
122

if (progress_bar.style.visibility == "visible") {
123

clearBar();
124

document.getElementById("complete").innerHTML = "";
125

} else {
126

progress_bar.style.visibility = "visible"
127

}
128

}
129

130

function clearBar() {
131

for (var i = 1; i < 10; i++) {
132

var elem = document.getElementById("block" + i);
133

elem.innerHTML = clear;
134

elem.style.backgroundColor = "white";
135

}
136

}
137

</script>
138

</head>
139

<body>
140

<h1>Ajax Progress Bar Example</h1>
141

Launch long-running process: <input type="button" value="Launch" id="go" onclick="go();" NAME="go">
142

<p>
143

<table align="center" ID="Table1">
144

<tbody>
145

<tr>
146

<td>
147

<div id="progressBar" style="BORDER-RIGHT:black 2px solid;PADDING-RIGHT:2px;BORDER-TOP:black 2px solid;PADDING-LEFT:2px;VISIBILITY:hidden;PADDING-BOTTOM:2px;BORDER-LEFT:black 2px solid;PADDING-TOP:2px;BORDER-BOTTOM:black 2px solid">
148

<span id="block1">   </span>
149

<span id="block2">   </span>
150

<span id="block3">   </span>
151

<span id="block4">   </span>
152

<span id="block5">   </span>
153

<span id="block6">   </span>
154

<span id="block7">   </span>
155

<span id="block8">   </span>
156

<span id="block9">   </span>
157

</div>
158

</td>
159

</tr>
160

<tr>
161

<td align="center" id="complete"><FONT face="宋体"></FONT></td>
162

</tr>
163

</tbody>
164

</table>
165

</p>
166

</body>
167

</html>
168

转自博客园 http://www.cnblogs.com/jeet/archive/2006/10/05/521418.aspx

类别：JavaScript/Ajax　作者：转载　日期：2009-06-29　【评论：0】　

上一篇：Javascript的FSO功能　
下一篇：JS URL编码函数

暂时没有评论！

发表留言

百度赞助