Ajax调用WebService
ajax构造soap信封调用webservice示例代码
1、WebService,根据客户端的访问返回进度:
using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Diagnostics; using System.Web; using System.Web.Services; namespace AjaxSample { /**//// <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
转自博客园 http://www.cnblogs.com/jeet/archive/2006/10/05/521418.aspx
加支付宝好友偷能量挖...