jQuery调用ASP.NET的WebService

   经常需要使用客户端脚本调用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的代码
   
[c-sharp] view plain copy
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<a href="http://lib.csdn.net/base/dotnet" class='replace_word' title=".NET知识库" target='_blank' style='color:#df3434; font-weight:bold;'>.net</a> 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中使用的实体类
   
[c-sharp] view plain copy
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>