jQuery中的Ajax

　　jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()、$.post()方法，第3层是$.getScript()和$.getJSON()方法。

 

　　load()方法

　　load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。它的结构为：

load(url [,data] [,callback])

　　♦ url:请求HTML页面的URL地址

　　♦ data:发送至服务器的key/value数据

　　♦ callback:请求完成时的回调函数，无论请求成功或失败

$(function(){
    $("selector").click(function(){
        $("#panel").load("test.html");
    })
})

　　当点击页面元素时，test.html页面的HTML内容就会被加载并插入主页面<div id="panel"></div>的元素中。

　　如果要筛选载入的HTML文档，可以通过url 参数传递，语法结构：“url selector”。例如只需要加载test.html页面中的class为"para"的内容

$("#panel").load("test.html .para");

　　load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则会自动转换为POST方式。

　　对于必须在加载完成后才能继续的操作，load()方法提供了回调函数(callback),该函数由3个参数，分别代表请返回的内容、请求状态和XMLHttpRequest对象。

$("#panel").load("test.html"，function(responseText,textStatus,XMLHttpRequest){
    //responseText;        请求返回的内容
    //textStatus;          请求状态：success、error、notmodified、timeout4种
    //XMLHttpRequest;      XMLHttpRequest对象
});

　　在load()方法中，无论Ajax请求是否成功，只要当请求完成后，回调函数就被触发。

 

　　$.get()方法

　　$.get()方法使用GET方式来进行异步请求，传递数据给服务器中的页面。它的结构为：

$.get(url [,data] [,callback] [,type])

　　♦ url:请求的HTML页的URL地址

　　♦ data（可选）:发送至服务器的key/value数据会作为QueryString附加到请求URL中

　　♦ callback（可选）:载入成功时回调函数（只有当Response的返回状态是success才调用该方法）自动将请求结果和状态传递给该方法

　　♦ type（可选）:服务器端返回内容的格式，包括xml、html、script、text和_default

　　data参数传递的格式，如：

$.get("test.html",{name:$("#name").val(),age:$("#age").val()},callback)

　　如果服务器端接收到传递的data数据并成功返回，那么就可以通过回调函数将返回的数据显示到页面上。$.get()方法的回调函数只有两个参数。

function(data,textStatus){
    //data:返回的内容，可以是XML文档、JSON文件、HTML片段等等。
    //textStatus：请求状态：success、error、notmodified、timeout4种
}

 

　　$.post()方法

　　它与$.get()方法的结构和使用方式都相同，不过仍有一下区别：

　　♦ GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然，在Ajax请求中，这种区别对用户是不可见的。

　　♦ GET方式对传输的数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论上不受限制）

　　♦ GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。

　　♦ GET方式和POST方式传递的数据在服务器端的获取也不相同。

 

　　$.getScript()方法

　　$.getScript()可以在需要哪个JavaScript文件时直接加载，并且不需要对JavaScript文件进行处理，JavaScript文件会自动执行。

$(function(){
    $("#panel").click(function(){
        $.getScript("test.js");
    })
})

　　与其他Ajax方法一样，$.getScript()方法也有回调函数，他会在JavaScript文件成功载入后运行。

 

　　$.getAjax()方法

　　$.getAjax()方法是jQuery最底层的Ajax实现。结构为：

$.ajax(options)

　　该方法只有1个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有参数都是可选的。

　　$.ajax()方法常用参数：

　　♦ url:(默认当前页地址)发送请求的地址

　　♦ type:请求方式（POST或GET）默认为GET。其他HTTP请求方法例如PUT和DELETE也可用，但仅部分浏览器支持。

　　♦ timeout:设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置

　　♦ data:发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。GET请求中将附加在URL后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，jQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2

　　♦ dataType:预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息返回responseXML或responseText，并作为毁掉函数参数传递。可用类型包括：xml、html、script、json、jsonp、text。

　　♦ beforeSend:发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次的Ajax请求。XMLHttpRequest对象是唯一的参数

function(XMLHttpRequest){
    this;//调用本次Ajax请求时传递的options参数
}

　　♦ complete:请求完成后调用的回调函数（请求成功或失败时均调用）。参数是XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest，textStatus){
    this;//调用本次Ajax请求时传递的options参数
}

　　♦ success:请求成功后调用的回调函数，有两个参数。①由服务器返回，并根据dataType参数进行处理后的数据。②描述状态的字符串。

function(data，textStatus){
    //data可能是xmlDoc、jsonObj、html、text等等
    this;//调用本次Ajax请求时传递的options参数
}

　　♦ error:请求失败时被调用的函数。该函数有3个参数。①XMLHttpRequest对象。②错误信息。③捕获的错误对象（可选）。

function(XMLHttpRequest，textStatus,errorThrown){
    //通常情况下textStatus和errorThown只有其中一个包含信息。
    this;//调用本次Ajax请求时传递的options参数
}

　　♦ global:默认为true。表示是否触发全局Ajax事件。

 

　　serialize()方法

　　当提交表单元素的时候，通常使用以下ajax代码：

$(function(){
    $("#submit").click(function(){
        $.get("test.html",{name,$("#name").val();age,$("#age")},function(data,textStatus){
            　　$("#panel").html(data);
        });
    })
})

　　这种方式在只有少量字段的表单中，勉强还可以使用，但如果表单元素越来越复杂，使用这种方式在增大工作量的同时也使表单缺乏弹性，于是jQuery提供了一个简化方式——serialize()。

$(function(){
    $("#submit").click(function(){
        $.get("test.html",$("#form").serialize(),function(data,textStatus){
            　　$("#panel").html(data);
        });
    })
})

　　即使在表单中再增加字段，脚本仍然能够使用，并且不需要做其他多余工作。

 

　　$param()方法

　　它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。比如将一个普通的对象序列化。

var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k);  //输出a=1&b=2&c=3

 

　　jQuery中的Ajax全局事件

　　jQuery简化Ajax操作不仅体现在调用Ajax方法和处理响应方面，而且还体现在对调用Ajax方法的过程中的HTTP请求的控制。通过jQuery提供的一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。例如当Ajax请求开始时，会触发ajaxStart()方法的回调函数；当Ajax请求结束时，会触发ajaxStop()方法的回调函数。这些方法都是全聚德方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就出发它们。

　　Ajax全局事件中的方法包括：

　　♦ ajaxStart(callback)：Ajax请求开始时执行的函数

　　♦ ajaxStop(callback)：Ajax请求结束时执行的函数

　　♦ ajaxComplete(callback)：Ajax请求完成时执行的函数

　　♦ ajaxError(callback)：Ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递

　　♦ ajaxSend(callback)：Ajax请求发送前执行的函数

　　♦ ajaxSuccess(callback)：Ajax请求成功时执行的函数

注：如果想使某个Ajax请求不受全局方法的影响，那么可以在使用$.ajax(options)方法时，将参数中的global设置为false。