国庆假期闲来无聊，也跟风研究了一下Ajax，翻了翻《Ajax 基础教程》，对Ajax做了一个系统的了解。书中涉及服务器端技术都是用Servelet来实现，看着不爽，虽然说在.NET与PHP也可以实现，但并没有例子。我想在.NET中使用，又不想去重写HttpHandler，也不想用Ajax.net，能不能直接通过javascript访问WebService来实现呢。理论是可行的，但比较烦的就是在客户端需要记住webservice的方法与参数的名称。
下面是利用Webservice和Ajax实现《Ajax 基础教程》书中进度条一例的代码：
1、WebService，根据客户端的访问返回进度：
1
using System;
2using System.Collections;
3using System.ComponentModel;
4using System.Data;
5using System.Diagnostics;
6using System.Web;
7using System.Web.Services;
8
9namespace 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
23 组件设计器生成的代码#region 组件设计器生成的代码
24
25 //Web 服务设计器所必需的
26 private IContainer components = null;
27
28 /**//// <summary>
29 /// 设计器支持所需的方法 - 不要使用代码编辑器修改
30 /// 此方法的内容。
31 /// </summary>
32 private void InitializeComponent()
33 {
34 }
35
36 /**//// <summary>
37 /// 清理所有正在使用的资源。
38 /// </summary>
39 protected override void Dispose( bool disposing )
40 {
41 if(disposing && components != null)
42 {
43 components.Dispose();
44 }
45 base.Dispose(disposing);
46 }
47
48 #endregion
49
50 // WEB 服务示例
51 // HelloWorld() 示例服务返回字符串 Hello World
52 // 若要生成，请取消注释下列行，然后保存并生成项目
53 // 若要测试此 Web 服务，请按 F5 键
54
55// [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并更新进度条信息：
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<html>
3 <head>
4 <title>Ajax Progress Bar</title>
5 <script type="text/javascript">
6 var xmlHttp;
7 var key = 1;
8 var bar_color = 'gray';
9 var span_id = "block";
10 var clear = " "
11
12 var SERVICE_URL = "http://localhost/AjaxSample/ProgressBarService.asmx";
13 var SOAP_ACTION_BASE = "http://jeetqiu.com/ProgressBar/";
14
15 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
24 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
35 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
46 function goCallback() {
47 if (xmlHttp.readyState == 4) {
48 if (xmlHttp.status == 200) {
49 setTimeout("pollServer()", 2000);
50 }
51 }
52 }
53
54 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
74 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
82 function pollCallback() {
83 if (xmlHttp.readyState == 4) {
84 if (xmlHttp.status == 200) {
85 var percent_complete = xmlHttp.responseXML.getElementsByTagName("GetProgressResult")[0].firstChild.data;
86
87 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
92 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