现在ajax很流行，最简单的开发模式时后台程序只处理ajax请求，然后返回json数据，前段全部是静态的html，里面用js构建界面。以前都是用一般处理程序来处理ajax请求，然后将结果用json类库序列化成json返回给页面。这样做后端处理还是比较麻烦的，而且每个请求要么单独一个处理程序，要么得加额外参数来区别不同的ajax请求，很烦，最近发现了一个更简单的方法，直接用js调用.net WebService,这样后台代码比较整齐，开发也快，调试也容易，直接浏览器敲一下WebService地址，点击某个方法调用就行了。下面是简单例子的构建过程：
1. 在VS里面增加一个Web空项目。
2. 在项目里面增加一个Web服务，我起的名字是user,最后会多一个user.asmx文件。
3. 给WebService增加方法和支持ajax 脚本调用的标签，代码如下：
1 /// <summary>
2 /// WebService1 的摘要说明
3 /// </summary>
4 [WebService(Namespace = "http://tempuri.org/", Name="user.asmx")]
5 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
6 [System.ComponentModel.ToolboxItem(false)]
7 // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
8 [ScriptService]
9 public class WebService1 : System.Web.Services.WebService
10 {
11 [WebMethod]
12 [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
13 public People GetCurrentUser()
14 {
15 People p = new People();
16 p.Name = "李土鳖";
17 p.Age = 28;
18 p.Detail = "半吊子软件工程师";
19 return p;
20 }
21
22 [WebMethod]
23 [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
24 public int Add(int a, int b)
25 {
26 return a + b;
27 }
28 }
29
30 public class People
31 {
32 public string Name { set; get; }
33 public int Age { set; get; }
34 public string Detail { set; get; }
35 }
4. 用一个静态html文件测试,代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="script/lib/jquery-1.7.1.js" ></script>
<script type="text/javascript">
function callWebService(url, param,handler) {
$.ajax({
url: url,
data: param,
type: "get",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (p) {
handler(p.d);
}
});
};
</script>
</head>
<body>
<script type="text/javascript">
callWebService("user.asmx/GetCurrentUser", null, function (data) {
document.body.innerHTML += "user name:" + data.Name + "<br/>";
});
callWebService("user.asmx/Add", { a: 1, b: 2 }, function (data) {
document.body.innerHTML += "add result:" + data;
});
</script>
</body>
</html>