易网时代-编程资源站
易网时代-编程资源站 [WebService（Namespace = "http://tempuri.org/"）][WebServiceBinding（ConformsTo = WsiProfiles.BasicProfile1_1）]//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 [System.Web.Script.Services.ScriptService]public class WebService1 : System.Web.Services.WebService {[WebMethod]public int Add（int a, int b）{return a + b;}这段代码就是一个普通的WebService代码，唯独需要注意的是：在类的定义上加了一个ScriptService修饰特性。<asp:ScriptManager ID="ScriptManager1" runat="server"><Services><asp:ServiceReference Path="/WebService1.asmx" InlineScript="true" /></Services></asp:ScriptManager>说明：InlineScript="true"的设置并不是必须的，只是为了让我们看到ScriptManager到底生成了什么代码。
从截图可以看到，除了引入了二个必要的AJAX客户端类库外，还在客户端为WebService1生成了代理脚本。
有了这些代码后，我们可以用下面的JavaScript代码调用服务端：
function Call_Add（）{WebService1.Add（1,2, ShowResult）;}function ShowResult（result）{document.getElementById（"output"）.value = result;}前面这个示例太简单了，再来个参数复杂的示例吧，还是从先服务端开始，先定义一个参数类型：public class Customer{public string Name { get; set; }public int Age { get; set; }public string Address { get; set; }public string Tel { get; set; }public string Email { get; set; }}WebSerice的代码：[WebMethod]public string AddCustomer（Customer customer）{if（ customer == null ）return "customer is null.";// 简单地返回一个XML字符串。// 告诉客户端：服务端收到了什么样的数据。return XmlHelper.XmlSerialize（customer, Encoding.UTF8）;}仍然借用前面的ScriptManager设置，来看JavaScript的调用代码：function Call_AddCustomer（）{var customer = {Name: document.getElementById（"txtName"）.value, Age: document.getElementById（"txtAge"）.value, Address: document.getElementById（"txtAddress"）.value, Tel: document.getElementById（"txtTel"）.value, Email: document.getElementById（"txtEmail"）.value};WebService1.AddCustomer（customer, ShowResult）;}基本上还是与服务端的编码方式差不多，先创建一个customer对象，再传给调用方法。var customer = {Name: document.getElementById（"txtName"）.value, Age: document.getElementById（"txtAge"）.value, Address: document.getElementById（"txtAddress"）.value, Tel: document.getElementById（"txtTel"）.value, Email: document.getElementById（"txtEmail"）.value};我在介绍第四代技术时，您会发现它们消失了！$.ajax（{type:"POST", url: "/WebService1.asmx/Add", contentType:"application/json",data:"{a: 1, b: 2}",dataType:"json",success:function（result）{$（"#output"）.val（result.d）;}}）;这段代码也能调用服务端的Add方法。var customer = {Name: $（"#txtName"）.val（）, Age: $（"#txtAge"）.val（）, Address: $（"#txtAddress"）.val（）, Tel: $（"#txtTel"）.val（）, Email: $（"#txtEmail"）.val（）};var jsonStirng = $.toJSON（ {customer: customer} ）;$.ajax（{type:"POST", url: "/WebService1.asmx/AddCustomer", contentType:"application/json",data: jsonStirng,dataType:"json",success:function（result）{$（"#output"）.val（result.d）;}}）;主要的代码还是一样的，集中在获取调用参数，但是要转成JSON格式。[Action]public int Add（int a, int b）{return a + b;}[Action]public string AddCustomer（Customer customer）{// 简单地返回一个XML字符串。// 告诉客户端：服务端收到了什么样的数据。return XmlHelper.XmlSerialize（customer, Encoding.UTF8）;}注意：这种AJAX技术没有与客户端的任何耦合，只要知道一个URL就可以调用了。 来看客户端的代码吧：$.ajax（{type:"POST", url: "/AjaxDemo/Add.cspx", data: {a: 1, b: 2},success:function（result）{$（"#output"）.val（result）;}}）;// 第二个调用var customer = {Name: $（"#txtName"）.val（）, Age: $（"#txtAge"）.val（）, Address: $（"#txtAddress"）.val（）, Tel: $（"#txtTel"）.val（）, Email: $（"#txtEmail"）.val（）};$.ajax（{type:"POST", url: "/AjaxDemo/AddCustomer.cspx", data: customer,success:function（result）{$（"#output"）.val（result）;}}）;注意：type:"POST"并不是必须的，您也可以把它们改成GET方式提交。<form id="form1" action="/AjaxDemo/AddCustomer.cspx" method="post"><p><b>新增客户资料</b></p><span>Name: </span><input type="text" name="Name" value="abc" /><br /><span>Age: </span><input type="text" name="Age" value="20" /><br /><span>Address: </span><input type="text" name="Address" value="武汉" /><br /><span>Tel:</span> <input type="text" name="Tel" value="12345678" /><br /><span>Email: </span><input type="text" name="Email" value="test@163.com" /><br /><br /><input type="submit" name="btnAddCustomer" value="保存客户资料" /></form>前面用了三种方法在提交这个表单，下面我们再来看一下更简单的提交方式：
<script type="text/javascript">$（function（）{// 只需要下面这个调用就可以将表单改成异步提交方式！$（"#form1"）.ajaxForm（{success:function（result）{$（"#output"）.val（result）;}}）;}）;</script>为了更清楚展示这种方法，我甚至把script标签也贴出来了。
相关的前端代码如下：
<form id="form1" action="/AjaxTestAutoAction/submit.cspx" method="post"><p><span>Input:</span><input type="text" name="input" style="width: 300px" value="Fish Li" /></p><p><span>Output:</span><input type="text" id="output" style="width: 300px" readonly="readonly" /></p><input type="submit" name="Base64" value="转换成Base64编码" /> <input type="submit" name="Md5" value="计算md5" /> <input type="submit" name="Sha1" value="计算sha1" /></form><script type="text/javascript">$（function（）{$（"#form1"）.ajaxForm（function（result） {$（"#output"）.val（result）;}）;}）;</script>服务端代码：public class AjaxTestAutoAction{[Action]public string Base64（string input）{return Convert.ToBase64String（Encoding.Default.GetBytes（input））;}[Action]public string Md5（string input）{byte[] bb = Encoding.Default.GetBytes（input）;byte[] md5 = （new MD5CryptoServiceProvider（））.ComputeHash（bb）;return BitConverter.ToString（md5）.Replace（"-", string.Empty）;}[Action]public string Sha1（string input）{byte[] bb = Encoding.Default.GetBytes（input）;byte[] sha1 = （new SHA1CryptoServiceProvider（））.ComputeHash（bb）;return BitConverter.ToString（sha1）.Replace（"-", string.Empty）;}}代码仍然很清晰：
页面表单代码如下：
JavaScript代码：
<script type="text/javascript">$（function（）{$（"#form1"）.ajaxForm（{success:function（result）{$（"#output"）.val（result）;}}）;}）;
页面表单代码如下：
JavaScript代码：
<script type="text/javascript">$（function（）{$（"#form1"）.ajaxForm（{beforeSubmit: ValidateForm,success:function（result）{$（"#output"）.val（result）;}}）;function ValidateForm（formData, jqForm, options） { if（ jqForm.context.ProductName.value.length == 0 ）{alert（"商品名称不能为空。"）;$（jqForm.context.ProductName）.focus（）;return false;}return true;}}）;</script>服务端代码：[Action]public string AddProduct（Product product）{// 简单地返回一个XML字符串。// 告诉客户端：服务端收到了什么样的数据。return XmlHelper.XmlSerialize（product, Encoding.UTF8）;}各种AJAX开发方法的对比与总结