之前其实已经接触过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>
到此，基本的原理都已经讲述完毕。有什么不懂可以自己推敲推敲代码就会明白其中的原理了。