WebService实现Ajax

zoukankan html css js c++ java

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 = "   "
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

查看全文

相关阅读:
java线程学习之volatile关键字
 java线程学习之yield方法
 java线程学习之join方法
 小程序hideTarBar隐藏TabBar后，获取windowHeight不准确问题
 canvas等base64格式上传到服务端直传到oss
服务器关于node的注意事项
 node.js连接本地数据库
 小程序（mpvue框架）的总结
 git代码的注意
 js里的实用小技巧

原文地址：https://www.cnblogs.com/jeet/p/521418.html