JQuery学习笔记（二）Ajax操作

JQuery提供了Ajax的实现，使用这些方法能够快速的为页面添加Ajax特性，使页面具有更强的交互性，同时也避免了一次次的PostBack，提高页面的可用性。 下面是jQuery提供的几个用于ajax操作的方法。

Ajax 方法

1 jQuery.ajax(options)

这个方法是jQuery对Ajax最基础的实现。jQuery提供的其它Ajax方法都是在内部调用jQuery.ajax()来实现自身功能的。

该方法接受一个key/value pair作为参数。可以设置的属性多达20个，可谓相当之复杂。不过最常用的也只是一下几个：

属性	介绍
type	Request类型，POST or GET
url	Request url
data	要传递到服务器端的数据。如果该属性的值不是一个字符串，则默认会被转换为字符串，添加到Url后传递到服务器端。要改变此默认设置，可以修改processData属性为false。
cache	是否缓存请求的页面。
contentType	发送到服务器端数据的内容类型。
dataType	所期望的服务器端返回的结果类型。
success/complete/error	请求成功/结束/出现错误时将调用的回调函数。

下面是一个使用jQuery.ajax()方法的代码片段：

        //$.ajax()
        function AjaxTest() {
            var name = $("#<%=tbName.ClientID%>").val();
            var age = $("#<%=tbAge.ClientID%>").val();
            var data = "name=" + name + "&age=" + age;
            var result = $.ajax({
                type: "GET",
                url: "ajax.aspx",
                data: {name:name,age:age},
                datatype: "html",
                processdata:false,
                success: function(value) {
                    alert(value);
                }
            });
        }

2 jQuery.load(url,data,callback)

默认以GET的方式获取页面，并将结果注入到DOM中。如果参数data传入的值是key/value pair，该方法会以POST的方式发送请求来获取页面。这个方法还有一个特点就是可以在url后添加selector，只注入匹配的DOM元素。如：

$("#ajaxResult").load("ajax.aspx #dataToDisplay", data);

如果请求的url中包含空格，一定要将空格用%20替换后传入。因为在load方法的实现中空格是请求页面url和selector的分隔符。请求页面url中包含空格会导致load方法解析url和selector出错。

3 jQuery.get(url,data,callback,type)和jQuery.post(url,data,callback,type)

从上述2个方法以及各自参数的名字即可得知其用途。其中的回调函数会在ajax请求成功是执行。如果需要处理其他事件，如Error处理，可以使用jQuery.ajax(option)。

4 jQuery.getJSON(url,data,callback)

采用GET请求获取JSON数据。

5 jQuery.getScript(url,callback)

以GET请求的方式获取脚本，并执行。

JQuery ajax 事件

jQuery 为ajax提供了事件模型，在ajax操作执行的不同时间点会触发相应的事件。依照触发顺序，事件列表如下：

ajaxStart(callback)

ajaxSend(callback)

ajaxSuccess(callback)/ajaxError(callback)

ajaxComplete(callback)

ajaxStop(callback)

附带JQuery Ajax Test工程源文件。

点击这里下载示例代码。