jQuery.ajax个人小结

jQuery.ajax是jQuery封装的ajax底层操作方法，同时jQuery也提供了jQuery.get、jQuery.post等几个常用的高层封装。下面是本人结合自己的理解和工作中的使用情况，对jQuery.ajax的几种常见使用方式进行小结，纪录于此仅当备忘所用。由于水平能力有限，文中不足或错误之处，还请广大猿们指出。

在使用jQuery.ajax方法之前，我们要先了解一下它的参数定义。jQuery.ajax有很多可选参数，这里仅简要介绍本人工作中常用的几个（更多参数介绍请见http://api.jquery.com/jQuery.ajax/）：

参数名	参数类型	默认值	描述
type	String	"GET"	请求方式（“GET”或"POST"，也可以用"PUT"/"DELETE"，但仅部分浏览器支持）
url	String	当前页面地址	请求的地址
contentType	String	“application/x-www-form-urlencoded; charset=UTF-8”	发送至服务端的内容编码方式
data	Object,String		发送至服务端的数据
dataType	String	智能推断(xml, json, script, or html)	要求服务端返回的数据格式（"xml"/"html"/"script"/"json"/"jsonp"/"text"）
success(data,textStatus,XHR)	Function		请求成功时的回调函数 data:由服务端返回并处理成dataType指定格式的数据； textStatus:描述状态的字符串; XHR:XMLHttpRequest对象
error(XHR,textStatus,errorThrown)	Function		请求失败时的回调函数 XHR:XMLHttpRequest对象; textStatus:错误信息； errorThrown:(可选)Http响应文字部分（如"Not Found","Internal Server Error"）
complete(XHR,textStatus)	Function		请求完成时的回调函数（请求成功或失败都调用） XHR:XMLHttpRequest对象； textStatus:请求状态（如"success","notmodified","error","timeout","abort","parsererror"）

这里需要注意的是contentType与dataType的区别——由于data是发送至服务端的数据，本人经常误将dataType认作是data的类型，其实contentType才是客户端发送到服务端数据的类型，dataType是请求服务端返回的数据类型。

下面来看看jQuery.ajax方法与几种服务端接口的搭配方式：

1、jQuery.ajax与一般处理程序（Handler.ashx）

服务端用一般处理程序时，一般都是我们自己手工通过Request.QueryString或Request.Form来解析客户端请求的数据，所以contentType用默认的“application/x-www-form-urlencoded; charset=UTF-8”就好，data我习惯用key/value对来表示表单数据。

            $.ajax({

                type: "GET",

                url: "handler.ashx",

                data: { name: 'heku', age: parseInt(Math.random() * 100) }, //发送至服务端的数据

                dataType: "json", //要求服务端返回json

                error: function (XHR, textStatus, errorThrown) { alert("XHR：" + XHR + "--textStatus:" + textStatus + "--errorThrown:" + errorThrown); },

                success: function (data, TS, XHR) { $("#div1").append(data + "<br/>"); },

                complete: function () { $("#div1").append("ajax访问一般处理程序完成<br/><br/>"); }

            });

一般处理程序中，要注意的就是Response.ContentType要和dataType要求返回的类型一致。

    public void ProcessRequest(HttpContext context)

    {

        string name = context.Request["name"];

        string age = context.Request["age"];

        string type = context.Request.RequestType;



        System.Threading.Thread.Sleep(500);

        

        context.Response.ContentType = "application/json";

        

        JavaScriptSerializer jss = new JavaScriptSerializer();

        string resultString = string.Format("【一般处理程序(返回json)】{0}--{1}--{2}--{3}", DateTime.Now.ToString(), name, age, type);



        context.Response.Write(jss.Serialize(resultString));

    }

2、jQuery.ajax与WebService

当服务端用WebService处理数据时，如果希望从服务端返回json类型的数据，除了dataType设置成json外，还要设置contentType为json，并且给服务端发送json类型的数据，这里为什么会这样，我也不清楚。

            $.ajax({

                type: "POST",

                url: "WebService.asmx/GetTime",

                contentType: "application/json", //发送数据的类型

                data: "{name:'heku',age:" + parseInt(Math.random() * 100) + "}", //要加引号，代表json对象

                dataType: "json", //要求返回和类型

                error: function (XHR) { alert("出错：" + XHR.responseText); },

                success: function (data, TS, XHR) { $("#div1").append(data.d + "<br/>"); },

                complete: function () { $("#div1").append("ajax访问WebService完成<br/><br/>"); }

            });

WebService可以添加ScriptMethod特性，来表明其处理的请求类型为"GET"还是"POST"。

    [WebMethod]

    public string GetTime(string name, int age)

    {

        System.Threading.Thread.Sleep(1000);

        return string.Format("【WebService方法】时间：{0}，姓名：{1},年龄：{2}", DateTime.Now.ToString(), name, age);

    }

3、jQuery.ajax与后台方法

这种方式本质同WebService，只是是一种比较懒的做法，不用去新增一个Handler.ashx或WebService.asmx。直接在asp.net页面的代码文件中，把某个方法标记为WebMethod。

Default.aspx(部分)

            $.ajax({

                type: "POST",

                url: "Default.aspx/GetTime",

                contentType: "application/json", //发送数据的类型

                data: "{name:'heku',age:" + parseInt(Math.random() * 100) + "}", //要加引号，代表json对象

                dataType: "json", //要求返回和类型

                error: function (XHR) { alert("出错：" + XHR.responseText); },

                success: function (data, TS, XHR) { $("#div1").append(data.d + "<br/>"); },

                complete: function () { $("#div1").append("ajax访问后台方法完成<br/><br/>"); }

            });

Default.aspx.cs（部分）

    [System.Web.Services.WebMethod]

    public static string GetTime(string name, int age)

    {

        System.Threading.Thread.Sleep(1000);

        return string.Format("【后台方法】时间：{0}，姓名：{1},年龄：{2}", DateTime.Now.ToString(), name, age);

    }