WebService实现Ajax

    国庆假期闲来无聊，也跟风研究了一下Ajax，翻了翻《Ajax 基础教程》，对Ajax做了一个系统的了解。书中涉及服务器端技术都是用Servelet来实现，看着不爽，虽然说在.NET与PHP也可以实现，但并没有例子。我想在.NET中使用，又不想去重写HttpHandler，也不想用Ajax.net，能不能直接通过javascript访问WebService来实现呢。理论是可行的，但比较烦的就是在客户端需要记住webservice的方法与参数的名称。
    下面是利用Webservice和Ajax实现《Ajax 基础教程》书中进度条一例的代码：
1、WebService，根据客户端的访问返回进度：
  1using 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        组件设计器生成的代码
 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 = "&nbsp;&nbsp;&nbsp;"
 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">&nbsp;&nbsp;&nbsp;</span>
149                                <span id="block2">&nbsp;&nbsp;&nbsp;</span>
150                                <span id="block3">&nbsp;&nbsp;&nbsp;</span>
151                                <span id="block4">&nbsp;&nbsp;&nbsp;</span>
152                                <span id="block5">&nbsp;&nbsp;&nbsp;</span>
153                                <span id="block6">&nbsp;&nbsp;&nbsp;</span>
154                                <span id="block7">&nbsp;&nbsp;&nbsp;</span>
155                                <span id="block8">&nbsp;&nbsp;&nbsp;</span>
156                                <span id="block9">&nbsp;&nbsp;&nbsp;</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
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jeet/p/521418.html