经常需要使用客户端脚本调用net的WebService，比较常用的是在ScriptManager脚本管理器的环境下使用回调调用WebService的方法，可是这些必须在aspx的页面中进行，难免有些限制。
jQuery库是我们比较常用的JavaScript库，入门简单，功能强大，对Ajax的支持比较友好。使用jQuery调用net的WebService也是经常遇到的。现将常见调用类型总结如下：
1、环境
jQuery 1.3.2
.net framework 2.0
Asp.net ajax 1.0
2、后台WebService的代码
- using System;
- using System.Collections;
- using System.Linq;
- using System.Web;
- using System.Web.Services;
- using System.Web.Services.Protocols;
- using System.Xml.Linq;
- using System.Text;
- using System.Collections.Generic;
- using System.Data;
- /// <summary>
- ///WebService 的摘要说明
- /// </summary>
- [WebService(Namespace = "http://tempuri.org/")]
- [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
- //若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
- [System.Web.Script.Services.ScriptService]
- public class WebService : System.Web.Services.WebService
- {
- public WebService()
- {
- //如果使用设计的组件，请取消注释以下行
- //InitializeComponent();
- }
- [WebMethod]
- public string HelloWorld()
- {
- return "Hello World";
- }
- [WebMethod]
- public string HelloWorld(string userName)
- {
- StringBuilder sb = new StringBuilder();
- for (int i = 0; i < 100; i++)
- {
- sb.AppendLine("<del>Hello World "+i+"<br /></del>");
- }
- return sb.ToString();
- }
- [WebMethod]
- public StudentInfo GetClass()
- {
- StudentInfo s = new StudentInfo();
- s.StuName = "Accp 4.0";
- s.Id = 1;
- return s;
- }
- [WebMethod]
- public List<StudentInfo> GetList()
- {
- return (new StudentInfo()).GetList();
- }
- [WebMethod]
- public DataSet GetDataSet()
- {
- return (new StudentInfo()).GetDataSet();
- }
- }
WebService中使用的实体类
- using System;
- using System.Data;
- using System.Configuration;
- using System.Linq;
- using System.Web;
- using System.Web.Security;
- using System.Web.UI;
- using System.Web.UI.HtmlControls;
- using System.Web.UI.WebControls;
- using System.Web.UI.WebControls.WebParts;
- using System.Xml.Linq;
- using System.Collections.Generic;
- /// <summary>
- ///StudentInfo 的摘要说明
- /// </summary>
- public class StudentInfo
- {
- public StudentInfo()
- {
- }
- private string m_stuName;
- public string StuName
- {
- get { return m_stuName; }
- set { m_stuName = value; }
- }
- private int m_id;
- public int Id
- {
- get { return m_id; }
- set { m_id = value; }
- }
- public DataSet GetDataSet()
- {
- DataSet ds = new DataSet();
- DataTable dt = new DataTable();
- dt.Columns.Add("Name");
- dt.Columns.Add("Id");
- for (int i = 0; i < 55; i++)
- {
- DataRow row = dt.NewRow();
- row["Name"] = "Hello World" + i;
- row["Id"] = i;
- dt.Rows.Add(row);
- }
- ds.Tables.Add(dt);
- return ds;
- }
- public List<StudentInfo> GetList()
- {
- List<StudentInfo> list = new List<StudentInfo>();
- for (int i = 0; i < 55; i++)
- {
- StudentInfo s = new StudentInfo();
- s.StuName = "Hello World" + i;
- s.Id = i;
- list.Add(s);
- }
- return list;
- }
- }
3、前台显示页面调用
这里前台页面使用htm页面来进行测试。
1、无参数调用
$(document).ready(function() {
$('#Button1').click(function() { $.ajax({ type: "POST", //访问WebService使用Post方式请求 contentType: "application/json", //WebService 会返回Json类型 url: "../WebService.asmx/HelloWorld", //调用WebService的地址和方法名称组合---WsURL/方法名 data: "{}", //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到 dataType: 'json', success: function(result) { //回调函数，result，返回值alert(result.d);
} });});
});
2、带参数的调用
$(document).ready(function() {
$('#Button1').click(function() { $.ajax({ type: "POST", //访问WebService使用Post方式请求 contentType: "application/json", //WebService 会返回Json类型 url: "../WebService.asmx/HelloWorld", //调用WebService的地址和方法名称组合---WsURL/方法名 data: "{userName:'alpha'}", dataType: 'json', success: function(result) { //回调函数，result，返回值alert(result.d);
} });});
});
3、返回复合类型
$(document).ready(function() {
$('#Button1').click(function() { $.ajax({ type: "POST", //访问WebService使用Post方式请求 contentType: "application/json", //WebService 会返回Json类型 url: "../WebService.asmx/GetClass", //调用WebService的地址和方法名称组合---WsURL/方法名 data: "{}", dataType: 'json', success: function(result) { //回调函数，result，返回值alert(result.d["StuName"]);
} });});
});
4、返回泛型集合
$(document).ready(function() {
$('#Button1').click(function() { $.ajax({ type: "POST", //访问WebService使用Post方式请求 contentType: "application/json", //WebService 会返回Json类型 url: "../WebService.asmx/GetList", //调用WebService的地址和方法名称组合---WsURL/方法名 data: "{}", dataType: 'json', success: function(result) { //回调函数，result，返回值$(result.d).each(function(){
$("#result").append(this["Id"]+" "+this["StuName"]+"<br />"); });}
});});
});
5、返回DataSet(xml格式)
$(document).ready(function() {
$('#Button1').click(function() { $.ajax({ type: "POST", //访问WebService使用Post方式请求 url: "../WebService.asmx/GetDataSet", //调用WebService的地址和方法名称组合---WsURL/方法名 data: "{}", dataType: "xml", success: function(result) { //回调函数，result，返回值$(result).find("Table1").each(function() {
$('#result').append($(this).find("Id").text() + " " + $(this).find("Name").text()+"<br />"); });}
});});
});
显示动画效果
$(document).ready(function(){
$('#loading').ajaxStart(function() {
$(this).show(); }).ajaxStop(function() { $(this).hide(); });});
HTML代码部分
<input id="Button1" type="button" value="Invoke" />
<div id="result"> <img id="loading" style="display: none;" alt="loading" src="../images/loading.gif" /> </div>