利用 web 服务让ajax更简单 yz

之前其实已经接触过web服务，但是由于后来的项目等等原因致使没有足够的时间去深究它，今天花了一些时间去研究，小有所获，到此来讲解一番。

一、准备工作

打开vs2012 新建一个空WEB项目
右击项目->添加->新建项->WEB服务
其次在新建一个aspx页面

到此为止，所有的准备工作已经做好了。

二、编写Web服务代码

数显将默认的"HelloWorld"改成"Js_ReturnValue"并且在后面添加两个参数"int id, string name"

如下所示:

1 [WebMethod]
2 public string Js_ReturnValue(int id,string name)
3 {
4    /....
5 }

最后是编写Web服务的代码(如下):

 1 [WebService(Namespace = "http://tempuri.org/")]
 2     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 3     [System.ComponentModel.ToolboxItem(false)]
 4     // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 
 5     [System.Web.Script.Services.ScriptService]
 6     public class WebService1 : System.Web.Services.WebService
 7     {
 8         [WebMethod]
 9         public string Js_ReturnValue(int id,string name)
10         {
11             //模拟从数据库读取的数据
12             DataTable table = new DataTable("mytable");
13             //设置数据含有id列，类型为 string
14             table.Columns.Add(new DataColumn("id", System.Type.GetType("System.String")));
15             //设置数据含有name列，类型为 string
16             table.Columns.Add(new DataColumn("name", System.Type.GetType("System.String")));
17             //循环添加数据
18             for (int i = 0; i < 100; i++)
19             {
20                 DataRow row = table.NewRow();
21                 row["id"] = i.ToString();
22                 row["name"] = i.ToString() + "name";
23                 table.Rows.Add(row);
24             }
25             //声明存储转换成Json格式的字符串（StringBuilder相比String拥有更高的性能）
26             StringBuilder dtablestr = new StringBuilder();
27             dtablestr.Append("{");
28             foreach (DataColumn col in table.Columns)
29             {
30                 dtablestr.Append(col.ColumnName + ":[");
31                 foreach (DataRow row in table.Rows)
32                 {
33                     dtablestr.Append("'" + row[col.ColumnName] + "',");
34                 }
35                 dtablestr.Remove(dtablestr.Length - 1, 1);
36                 dtablestr.Append("],");
37             }
38             dtablestr.Remove(dtablestr.Length - 1, 1);
39             dtablestr.Append("}");
40             //将格式化后的数据传递给前台
41             return dtablestr.ToString();
42         }
43     }

这样Web服务的代码就编写完毕了（ASP.NET转换成JSON格式操作无法用于DataTable，所以手写一个）。

三、前台代码

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebTestValidate.WebForm1" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 8     <title></title>
 9 </head>
10 <body>
11     <form id="form1" runat="server">
12     <div>
13          <button id="test" >click me</button>
14 <script type="text/javascript">
15     //<![CDATE[
16     window.onload = function () {
17         document.getElementById('test').onclick = function (event) {
18             //该函数除了需要填写必要的参数外，还需要定义调用成功调用的函数与失败后调用的函数
19             // WebTestValidate.WebService1.Js_ReturnValue(id,name,success function,faild function)
20             WebTestValidate.WebService1.Js_ReturnValue(123, 'sdfsdf', function (value) {
21                 var val = eval('(' + value + ')');//将JSON字符串转换成javascript对象
22                 var tobj = document.getElementById('datas');
23                 var trobj, tdobj1, tdobj2;
24                 //循环将数据输出
25                 for (var i = 0 ; i < 100 ; i++) {
26                     trobj = tobj.insertRow(i);
27                     tdobj1 = trobj.insertCell(0);
28                     tdobj2 = trobj.insertCell(1);
29                     tdobj1.innerHTML = val.id[i].toString();
30                     tdobj2.innerHTML = val.name[i].toString();
31                 }
32             },
33             function (value) {
34                 alert(value);
35             });
36             event = event || window.event;
37             event.returnValue = false;
38             event.preventDefault();
39         }
40     }
41     //]]> 
42 </script>
43         <!-- 重要部分其中 EnablePageMethods 必须设置为 True, 并且需要添加 asp:ServiceReference 标签以指定调用哪个Web服务 -->
44         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
45             <Services>
46                 <asp:ServiceReference Path="~/WebService1.asmx" />
47             </Services>
48         </asp:ScriptManager>
49     </div>
50         <table id="datas">
51         </table>
52     </form>
53 </body>
54 </html>

到此，基本的原理都已经讲述完毕。有什么不懂可以自己推敲推敲代码就会明白其中的原理了。

利用 web 服务 让ajax更简单 yz

利用 web 服务让ajax更简单 yz