一、简介
在介绍jquery ajax之前，先来回顾一下javascript的ajax。javascript的ajax通过XMLHttpRequest对象来实现与服务器的异步交互从而达到局部刷新页面的效果。其交互流程如下：
- 用户操作DOM，触发相应的事件。
- 在相应的事件处理程序中，创建一个XMLHtppRequest对象的实例，通过该对象的open方法来建立调用，并设置请求方式以及发送请求的地址。同时为onreadstatechange属性设置对应的回调函数。
- 使用send方法向服务器发送请求。
- 服务器对请求作出响应。
- XMLHttpRequest捕获服务器的响应，调用为onreadstatechange属性设置的回调函数处理响应。
jquery 对js进行了封装，jquery中的ajax实现方法最大的优势就是就是消除了各个浏览器之间的差异，提高了程序的兼容性；其次简化了开发人员的操作，减少了程序的代码量。
jquery对javascript的ajax进行了3次封装：第一次封装实现了$.ajax()方法；第二层封装实现了load()方法、$.post()、$.get()方法；第三层封装实现了$.getScript()和$.getJson()方法。
二、几种常用方法的实例讲解
1、$.Ajax()
这个方法是jquery ajax 底层的实现，返回其创建的XMLHttpRequest对象。其只有一个Object类型的参数，该参数的属性都是已Key/value的形式设置的。其属性说明如下：
| 参数名 | 类型 | 描述 |
| url | String | (默认: 当前页地址) 发送请求的地址。 |
| type | String | (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| timeout | Number | 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
| async | Boolean | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。function (XMLHttpRequest) {
|
| cache | Boolean | (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。 |
| complete | Function | 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。function (XMLHttpRequest, textStatus) {
|
| contentType | String | (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
| data | Object, String |
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 |
| dataType | String |
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 |
| error | Function | (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。function (XMLHttpRequest, textStatus, errorThrown) {
|
| global | Boolean | (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
| ifModified | Boolean | (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 |
| processData | Boolean | (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 |
| success | Function | 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态function (data, textStatus) {
|
示例代码：
$(function (){ $.ajax({ url: "Ajax.ashx", type: "post", data: { ParamType: "Init", Action: "GetProjectTree", M: Math.random() }, dataType:"json", success: function (data, textStatus) { $("#ProjectTree").combotree("loadData", data); } }); })
2、$.Get(url,[data],[callback],[type])
该方法是jquery 的全局方法，该方法使用get方式来进行异步请求，一共有四个参数。如下：
- url:发送请求的地址；
- data:是可选参数，执行异步请求附加的参数列表。以“key/value”的形式作为QueryString附加到请求的URL中；
- callback:可选参数，执行成功的回调函数，处理服务器响应的数据。该回调函数有两个参数，第一个为请求返回的数据第二个为请求的状态；
- type:可选参数，设置返回内容的格式，可选值为xml、html、script、json、jsonp、text等；
实例代码：
$.get(
"Ajax.ashx",
{
ParamType: "Init",
Action: "GetProjectTree",
M: Math.random()
},
function (data,textStatus) {
//......
},
"json"
);
3、$.post(url,[data],[callback],[type])
与$.get()方法一样，它也是jquery 的一个全局方法，与$.get()有着相同的参数。两者之前的区别在于请求方式不同，$.post()以post方式进行异步请求，是将参数作为消息的实体发送到服务器端，这样较之$.get()方法更为安全同事传递的数据量也不受限制。
实例代码如下：
$.post(
"Ajax.ashx",
{
ParamType: "Init",
Action: "GetProjectTree",
M: Math.random()
},
function (data,textStatus) {
//......
},
"json"
);
4、$("selector").load(url,[data],[callback])
load() 是jquery的ajax中的最简单也最常用的方法，能远程载入HTML并直接插入DOM中。
有三个参数：
url 发送请求的地址
data 随同请求附加的参数
callback 请求完成执行的回调函数，无论请求执行成功还是失败都会执行
实例：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsSystemFunction.aspx.cs" Inherits="UI.JsSystemFunction" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> jquery load()方法 </title> <script src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { $("#refresh").click(function () { $("#CommentList").load("Test.html"); }) }) </script> <style type="text/css"> #CommentList div { background-color:#FFFAFA; margin-top:8px; } </style> </head> <body> <h2>回复列表</h2> <input type="button" id="refresh" value="刷新列表" /> <div id="CommentList"></div> </body> </html>
远程载入的html文件：
<div> <h3>李四：</h3> <p>抢沙发。。。。。。抢完再看</p> </div> <div> <h3>Abner：</h3> <p>楼上的真矬！</p> </div>
效果图：
5、$.getJSON(url,[data],[callback])
该方法是jquery的一个全局方法，该方法通过get方式请求载入json数据
参数说明：
url 发送请求的地址
data 可选 附带的参数
callback 请求成功时执行的回调函数
实例：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsSystemFunction.aspx.cs" Inherits="UI.JsSystemFunction" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> jquery getJSON()方法 </title> <script src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { $("#Sub").click(function () { //debugger; $.getJSON("test.txt", { d: Math.random() }, function (data) { // debugger; $.each(data, function (index, p) { var html = "<tr><td>" + p.name + "</td><td>" + p.age + "</td><td>" + p.sex + "</td></tr>"; $("#peoples>tbody").append(html); }) }) }) }) </script> </head> <body> <input type="button" id="Sub" value="获取"/> <table id="peoples" style="200px;border-collapse:collapse;" border="1" > <thead> <tr> <td>name</td> <td>age</td> <td>sex</td> </tr> </thead> <tbody> </tbody> </table> </body> </html>
在这里的数据源是一个静态文件
[{"name":"张三","age":25,"sex":"男"},{"name":"李四","age":24,"sex":"女"}]
效果
6、$.getScript(url,[callback])
该方法为jquery 的全局方法，以get请求方式异步的加载js文件，从而可以缓解页面加载压力。
参数说明：
url 发送请求的地址
callback 可选参数 请求成功之后执行的回调函数
实例：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsSystemFunction.aspx.cs" Inherits="UI.JsSystemFunction" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> jquery getJSON()方法 </title> <script src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { $("#Sub").click(function () { $.getScript("Test.js", function (data) { Msg(); }); }) }) </script> </head> <body> <input type="button" id="Sub" value="异步加载Javascript文件"/> </body> </html>
请求的js文件：
function Msg() { alert("异步加载js文件"); }
效果：
7、jquery ajax 全局事件
jquery ajax 拥有一些全局事件能够对ajax的请求响应过程进行全程监控，jquery 提供了一些函数来给这些全局事件注册回调函数。
jquery 提供的全局事件函数有如下几个：
| 函数名称 | 说明 |
| ajaxComplete(callback) | ajax 请求完成时触发该事件 |
| ajaxError(callback) | ajax 请求发生错误的时候触发该事件 |
| ajaxSend(callback) | ajax 请求发送前触发该事件 |
| ajaxStart(callback) | ajax请求开始时触发该事件 |
| ajaxStop(callback) | ajax 请求结束时触发该事件 |
| ajaxSuccess(callback) | ajax请求成功时触发该事件 |
Ajax全局事件发送默认将捕获所有匹配的Ajax事件。在$.ajax()与$.ajaxSetup()方法中可以通过属性global来设置是否触发全局事件。
三、总结
不积跬步，无以至千里！