.Net ajax调用 WebService 简单例子

现在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>