使用Ajax访问WebService示例
WebService代码（WebService.asmx）：
Code1
<%@ WebService Language="C#" CodeBehind="~/App_Code/WebService.cs" Class="WebService" %>2
3
using System;4
using System.Web;5
using System.Collections;6
using System.Web.Services;7
using System.Web.Services.Protocols;8
9
10
/**//// <summary>11
/// WebService 的摘要说明12
/// </summary>13
[WebService(Namespace = "http://tempuri.org/")]14
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]15
public class WebService : System.Web.Services.WebService 
{16
17
[WebMethod]18
public int Sum(int a, int b)19
{20
return a + b;21
}22
23
}
测试页面代码(Test.html)：
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml" >3
<head>4
<title>无标题页</title>5
<script type="text/javascript">6
var xmlhttp;7
function createXMLHttp()8
{9
if(window.XMLHttpRequest)10
{11
xmlhttp=new XMLHttpRequest();//Firefox、Opera12
}13
else if(window.ActiveXObject) //IE两种申明方式14
{15
try16
{17
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");18
}19
catch(e)20
{21
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");22
}23
}24
if(!xmlhttp)25
{26
window.alert("Your broswer not support XMLHttpRequest!");27
}28
return xmlhttp;29
}30
31
function SumIt()32
{33
createXMLHttp();34
var url="http://localhost/WebService.asmx/Sum";35
var queryString=createQueryString();36
xmlhttp.open("POST",url,true);37
xmlhttp.onreadystatechange=handleStateChange;38
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");39
xmlhttp.send(queryString);40
}41
42
function createQueryString()43
{44
var a=document.getElementById("a").value;45
var b=document.getElementById("b").value;46
var quertyString="a="+a+"&b="+b;47
return quertyString;48
}49
50
51
function handleStateChange()52
{53
if(xmlhttp.readyState==4)54
{55
if(xmlhttp.status==200)56
{57
displayResult();58
}59
}60
}61
62
function displayResult()63
{64
var result=document.getElementById("result");65
result.innerText="计算结果： "+xmlhttp.responseXML.getElementsByTagName("int")[0].firstChild.data;66
}67
68
69
</script>70
</head>71
<body>72
<p>73
<input type="text" id="a"/>74
</p>75
<p>76
<input type="text" id="b"/>77
</p>78
<p>79
<input type="button" name="Submit" onclick="SumIt();" value="计算"/>80
</p>81
<label id="result"></label>82
83
</body>84
</html>85
程序很简单：SumIt方法向服务器发请求；createQueryString将输入的内容组成查询字符串供POST使用；XMLHttp的状态改变的句柄设置到handleStateChange方法中；displayResult显示计算结果。其实AJAX的关键就是如何使用好各种浏览器都支持的XMLHttpRequest对象。
浙公网安备 33010602011771号