jQuery使用Ajax方法调用WebService.doc

jQuery使用Ajax方法调用WebService在这里将jQuery使用Ajax 调用WebService 的几个常用的方法做了一个整理，提供给正在找这方面内容的博友，希望能给学习jQuery的朋友一点帮助。ws.aspx 代码 .hover cursor: pointer; /*小手*/ background: #ffc; /*背景*/ .button width: 150px; float: left; text-align: center; margin: 10px; padding: 10px; border: 1px solid #888; #dictionary text-align: center; font-size: 18px; clear: both; border-top: 3px solid #888; #loading border: 1px #000 solid; background-color: #eee; padding: 20px; margin: 100px 0 0 200px; position: absolute; display: none; #switcher /无参数调用 $(document).ready(function() $(#btn1).click(function() $.ajax( type: POST, /访问WebService使用Post方式请求 contentType: application/json, /WebService 会返回Json类型 url: WebService1.asmx/HelloWorld, /调用WebService的地址和方法名称组合 - WsURL/方法名 data: , /这里是要传递的参数，格式为 data: paraName:paraValue,下面将会看到 dataType: json, success: function(result) /回调函数，result，返回值 $(#dictionary).append(result.d); ); ); ); /有参数调用 $(document).ready(function() $(#btn2).click(function() $.ajax( type: POST, contentType: application/json, url: WebService1.asmx/GetWish, data: value1:心想事成,value2:万事如意,value3:牛牛牛,value4:2009, dataType: json, success: function(result) $(#dictionary).append(result.d); ); ); ); /返回集合（引用自网络，很说明问题） $(document).ready(function() $(#btn3).click(function() $.ajax( type: POST, contentType: application/json, url: WebService1.asmx/GetArray, data: i:10, dataType: json, success: function(result) $(result.d).each(function() /alert(this); $(#dictionary).append(this.toString() + ); /alert(result.d.join( | ); ); ); ); ); /返回复合类型 $(document).ready(function() $(#btn4).click(function() $.ajax( type: POST, contentType: application/json, url: WebService1.asmx/GetClass, data: , dataType: json, success: function(result) $(result.d).each(function() /alert(this); $(#dictionary).append(thisID + + thisValue); /alert(result.d.join( | ); ); ); ); ); /返回DataSet(XML) $(document).ready(function() $(#btn5).click(function() $.ajax( type: POST, url: WebService1.asmx/GetDataSet, data: , dataType: xml, /返回的类型为XML ，和前面的Json，不一样了 success: function(result) /演示一下捕获 try $(result).find(Table1).each(function() $(#dictionary).append($(this).find(ID).text() + + $(this).find(Value).text(); ); catch (e) alert(e); return; , error: function(result, status) /如果没有上面的捕获出错会执行这里的回调函数 if (status = error) alert(status); ); ); ); /Ajax 为用户提供反馈，利用ajaxStart和ajaxStop 方法，演示ajax跟踪相关事件的回调，他们两个方法可以添加给jQuery对象在Ajax前后回调 /但对与Ajax的监控，本身是全局性的 $(document).ready(function() $(#loading).ajaxStart(function() $(this).show(); ).ajaxStop(function() $(this).hide(); ); ); / 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开 $(document).ready(function() $(div.button).hover(function() $(this).addClass(hover); , function() $(this).removeClass(hover); ); ); jQuery 的WebServices 调用 HelloWorld 传入参数 返回集合 返回复合类型 返回DataSet(XML) 服务器处理中，请稍后。 WebService1.asmx.csusing System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;using System.Data;namespace jQuery.Learning / / WebService1 的摘要说明 / WebService(Namespace = /) WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1) System.ComponentModel.ToolboxItem(false) / 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 System.Web.Script.Services.ScriptService public class WebService1 : System.Web.Services.WebService / / 无参数 / / WebMethod public string HelloWorld() return Hello World ; / / 带参数 / / / / / / WebMethod public string GetWish(string value1, string value2, string value3, int value4) return string.Format(祝您在3年里 0、1、2, value1, value2, value3, value4); / / 返回集合 / / / WebMethod public List GetArray(int i) List list = new List(); while (i = 0) list.Add(i-); return list; / / 返回一个复合类型 / / WebMethod public Class1 GetClass() return new Class1 ID = 1, Value = 牛年大吉 ; / / 返回XML / / WebMethod public DataSet GetDataSet() DataSet ds = new DataSet(); DataTable dt = new DataTable(); dt.Columns.Add(ID, Type.GetType(System.String); dt.Columns.Add(Value, Type.GetType(System.String); DataRow dr = dt.NewRow(); drID = 1; drValue = 新年快乐; dt.Rows.Add(dr); dr = dt.NewRow(); drID = 2; drValue = 万事如意; dt.Rows.Add(dr); ds.Tables.Add(dt); return ds; /自定义的类，只有两个属性 public class Class1 public string ID get; set; public string Value get; set; 切入正题吧。WebService跟Ajax（我指Jquery框架），大家都不陌生。今天来看一个例子。在同域下Ajax调用WebService方法。（记得是同域，也就是要调用的WebService页面与Ajax请求页面在同一个网站下）。关于异步域调用，我会慢慢补上。具体操作如下：一、用VS2008 新建Web站点。这就不用解释了吧。二、站点下放入Jquery框架，我这里用的是 jquery-1.4.2.min.js。没有的从网上下三、在网站中添加“web服务”四、将Jquery框架添加到站点下，并且加一个CallWebService.js文件，来处理调用当做完后，网站框架结构为（具体站点，具体分析）：基本大功告成了。因为一下就是些Code的复制了。1.Default.aspx页面。这是调用webservice服务的页面。 Ajax调用WebService 姓名： 学号： 姓名： 性别： 年龄： 2.MyWebService.asmx页面。为WebService服务。using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;namespace WebServiceTest / / MyWebService 的摘要说明 / WebService(Namespace = /) WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1) System.ComponentModel.ToolboxItem(false) / 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 System.Web.Script.Services.ScriptService public class MyWebService : System.Web.Services.WebService / / 返会语句话 / WebMethod public string HelloWebService() return Hello WebService; / / 返回一句问候，根据名称 / WebMethod public string HelloSomeBody(string name) return Hello + name; / / 设置学生实体，并返回这个实体 / WebMethod public Student SetStudentInfo(string name, string sex, int age,int sid) Student stuInfo = new Student(); stuInfo.Sid = sid; stuInfo.Name = name; stuInfo.Sex = sex; stuInfo.Age = age; return stuInfo; / / 返回泛型数据 / / WebMethod public List GetMulStudentInfos() List StuList = new List(); for (int i = 0; i 10; i+) Student s = new Student(); s.Sid = i + 1; s.Name = Tom+s.Sid; s.Sex = 男; s.Age = i + 1; StuList.Add(s); return StuList; 注意：我们分别看一下这几个方法的签名，这很重要，因为方法签名决定了你调用必须遵守的规则，本文中我们用的是post方法，所以只给出post的方法签名。1.HelloWebService说明：请求的页面的地址: /MyWebService.asmx/HelloWebService;主机地址为:94;端口号：如果不是80端口，必须给出。调用该服务的完整路径为：94:85/MyWebService.asmx/HelloWebService。(具体情况，具体分析)2.HelloSomeBody说明：请求的页面的地址: /MyWebService.asmx/HelloSomeBody;主机地址为:94;端口号：如果不是80端口，必须给出。“name=string”说明，请求该服务时，需要提供参数。调用该服务的完整路径为：94:85/MyWebService.asmx/HelloSomeBody。(具体情况，具体分析)3.SetStudentInfo说明：请求的页面的地址: /MyWebService.asmx/SetStudentInfo;主机地址为:94;端口号：如果不是80端口，必须给出。注意参数说明。调用该服务的完整路径为：94:85/MyWebService.asmx/SetStudentInfo。(具体情况，具体分析)4.GetMulStudentInfos说明：请求的页面的地址: /MyWebService.asmx/HelloSomeBody;主机地址为:94;端口号：如果不是80端口，必须给出。调用该服务的完整路径为：94:85/MyWebService.asmx/GetMulStudentInfos。(具体情况，具体分析)3.下面是核心部分，也就是调用服务的Ajax脚本代码。CallWebService.js$(document).ready(pageLoad);/ 载入时进行执行的方法function pageLoad() BindCallHello(); BindCallBody(); BindGetSingleStudent(); BindGetMulStudents();/ 调用HelloWebServicefunction BindCallHello() $(#btnCallHello).click(function() $.ajax( type: post, /访问WebService使用Post方式请求 url: 94:85/MyWebService.asmx/HelloWebService, /调用Url(WebService的地址和方法名称组合-WsURL/方法名) data: , /这里是要传递的参数，为Json格式paraName:paraValue contentType: Application/Json, / 发送信息至服务器时内容编码类型 beforeSend: function(XMLHttpRequest) XMLHttpRequest.setRequestHeader(Accept, Application/Json); / 接受的数据类型。(貌似不起作用，因为WebService的请求/返回 类型是相同的，由于请求的是Json，所以，返回的默认是Json) , success: function(data) var jsonValue = data; alert(jsonValue.d);/ 输出Json , complete: function(XMLHttpRequest, textStatus) var returnText = XMLHttpRequest.responseText; $(#backData).html(returnText);/ 输出服务器端返回数据 ); );/ 调用调用HelloSomeBodyfunction BindCallBody() $(#btnCallBody).click(function() var name = $(#txtName).val(); $.ajax( type: post, /访问WebService使用Post方式请求 url: 94:85/MyWebService.asmx/HelloSomeBody, /调用Url(WebService的地址和方法名称组合-WsURL/方法名) data: name: + name + , /这里是要传递的参数，为Json格式paraName:paraValue contentType: Application/Json, / 发送信息至服务器时内容编码类型 beforeSend: function(XMLHttpRequest) XMLHttpRequest.setRequestHeader(Accept, Application/Json); / 接受的数据类型。(貌似不起作用，因为WebService的请求/返回 类型是相同的，由于请求的是Json，所以，返回的默认是Json) , success: function(data) var jsonValue = data; alert(jsonValue.d); / 输出Json , complete: function(XMLHttpRequest, textStatus) var returnText = XMLHttpRequest.responseText; $(#backData).html(returnText); / 输出服务器端返回数据 ); );function BindGetSingleStudent() $(#btnSinStuInfo).click(function() var stuSid = $(#txtStuSid).val(); var stuName = $(#txtStuName).val(); var stuSex = $(#txtStuSex).val(); var stuAge = $(#txtStuAge).val(); $.ajax( type: post, /访问WebService使用Post方式请求 url: 94:85/MyWebService.asmx/SetStudentInfo, /调用Url(WebService的地址和方法名称组合-WsURL/方法名) data: name: + stuName +,sex:+stuSex+,age:+stuAge+,sid:+stuSid+ , /这里是要传递的参数，为Json格式paraName:paraValue contentType: Application/Json, / 发送信息至服务器时内容编码类型 beforeSend: function(XMLHttpRequest) XMLHttpRequest.setRequestHeader(Accept, Application/Json); / 接受的数据类型。(貌似不起作用，因为WebService的请求/返回 类型是相同的，由于请求的是Json