jQuery Ajax--Ajax操作函数

1、jQuery.ajax()：执行异步HTTP(Ajax)请求

2、.ajaxComplete()方法：在AJAX请求完成时执行函数，即使请求并未成功。

语法：
.jQueryajaxComplete(function(event,xhr,options))
event：包含event对象
xhr：包含XMLHttpRequest对象
options：包含AJAX请求中使用的选项

XMLHttpRequest对象和设置作为参数传递给回调函数。

3、.ajaxError()方法：AJAX请求发生错误时执行函数

.ajaxError(function(event,xhr,options,exc))
//exc：包含JavaScript exception
$("div").ajaxError(function(){
    alert("an error occurred!");
});

XMLHttpRequest对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递：

function(event,XMLHttpRequest,ajaxOptions,thrownError){
    //thrownError只有当异常发生时才会被传递this;
}

4、.ajaxSend() 方法：AJAX请求开始执行时函数

.ajaxSend([function(event,xhr,options)])
$("div").ajaxSend(function(e,xhr,opt){
    $(this).html("Requesting"+opt.url);
});

5、jQuery.ajaxSetup()方法：设置全局AJAX默认选项

jQuery.ajaxSetup(name:value,name:value,...)

//为所有AJAX请求设置默认URL和success函数
$("button").click(function(){
    $.ajaxSetup({
        url:"demo_ajax_load.txt",
        success:function(result){
            $("div").html(result);
        }
    });
    $.ajax();
});

设置默认地址为"/xmlhttp/"，禁止触发全局AJAX事件，用POST代替默认的GET方法，其后的AJAX请求不再设置任何选项参数：

$.ajaxSetup({
    url: "/xmlhttp/",
    global: false,
    type: "POST"
});
$.ajax({ data: myData });

6、.ajaxStart() 方法：AJAX请求发送前执行函数

.ajaxStart(function())
$("div").ajaxStart(function(){
    $(this).html("<img src='demo_wait.gif' />");
});

7、.ajaxStop() 方法：AJAX请求结束时执行函数

.ajaxStop(function(){})
$("div").ajaxStop(function(){
    alert("所有AJAX请求已完成");
});

8、.ajaxSuccess() 方法：AJAX请求成功时执行函数

.ajaxSuccess(function(event,xhr,options))

$("#msg").ajaxSuccess(function(evt,request,setting){
    $(this).append("<p>请求成功~</p>");
});

9、jQuery.get() 方法：通过远程HTTP GET请求载入信息。

$(selector).get(url,data,success(response,status,xhr),dataType)
//等价于：
$.ajax({
	url: url,
	data: data,
	success: success,
	dataType: dataType
});

$("button").click(function(){
    $.get("demo_ajax_load.txt",function(result){
        $("div").html(result);
    });
});

dataType：规定预计的服务器响应的数据类型。默认jQuery会智能判断。可能的类型有："xml"，"html"，"text"，"script"，"json"，"jsonp"

示例1：请求test.php网页，传递两个参数，忽略返回值

$.get("test.php",{ name:"John", time:"2pm"});

示例2：显示test.php返回值（HTML或XML，取决于返回值）

$.get("test.php", function(data){
    alert("Data Loaded"+data);
});

示例3：显示test.cgi返回值（HTML或XML，取决于返回值），添加一组请求参数

$.get("test.cgi",{ name:"John",time:"2pm"},function(data){
    alert("Data Loaded:"+data);
});

10、jQuery.getJSON ：通过HTTP GET请求载入JSON数据

发送到服务器的数据可作为查询字符串附加到URL之后，如果data参数的值是对象（映射），则附加到URL之前将转换为字符串，并进行URL编码。

传递给callback的返回数据，可以是JavaScript对象，或以JSON结构定义的数组，并使用S,parseJSON()方法进行解析。

jQuery.getJSON(url,data,success(data,status,xhr))
$.ajax({
    url: url,
    data: data,
    success: callback,
    dataType: json
});
$("button").click(function(){
    $.getJSON("demo_ajax_load.js",function(result){
        $.each(result,function(i,field){
            $("div").append(field+"");
        });
    });
});

示例1：从test.js载入JSON数据并显示JSON数据中一个name字段数据：

$.getJSON("test.js",function(json){
    alert("JSON Data:"+json.users[3].name);
});

示例2：从Flickr JSONP API载入4张最新的关于猫的图片

$.getJSON("http://api/flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",function(data){
    $.each(data.time,function(i,item){
        $("<img/>").attr("src",item.media.m).appendTo("#images");
        if(i==3) return false;
    });
});

示例3：从test.js载入JSON数据，附加参数，显示JSON数据中一个name字段数据

$.getJSON("test.js",{name:"John",time:"2pm"},function(json){
    alert("JSON Data:"+json.users[3].name);
});

11、jQuery.getScript() 方法：通过HTTP GET请求载入并执行JavaScript文件

response：包含来自请求的结果数据

status：包含请求的状态（"success"，"notmodified"，"error"，"timeout"或"parsererror"）

jQuery.getScript(url.success(response,status))
//该函数是简写的Ajax函数，等价于：
$.ajax({
    url:url,
    dataType:"script",
    success:success
});
$("button").click(function(){
    $.getScript("demo_ajax_load.js");
});

示例：载入jQuery官方颜色动画插件，成功后绑定颜色变化动画

//HTML代码
<button id="go">Run</button>
<div class="block"></div>
//jQuery代码
jQuery.getScript("",function(){
    $("#go").click(function(){
        $(".block").animate({ backgroundColor:'pink'},1000).animate({ backgroundColor:'blue'},1000);
    });
});

12、.load() 方法：通过AJAX请求组从服务器加载数据，并把返回的数据放置到指定的元素中。该方法是最简单的从服务器获取数据的方法，几乎与$.get(url,data,success)等价，区别在于.load()不是全局函数，并有隐式的回调函数。当侦测到成功的响应时（如：当textStatus为"success"或"notmodified"时），.load()将匹配元素的HTML内容设置为返回的数据。

如果提供回调函数，则会在执行post-processing之后执行该函数

load(url,data,function(response,status,xhr))
$("button").click(function(){
    $("div").load("demo_ajax_load.txt");
});

加载页面片段

.load()方法可以可以通过url参数的特殊语法插入远程文档的某个部分，例如：

$("#result").load("ajax/test.html #container");

url字符串中紧接着第一个空格的字符串就是所要加载内容的jQuery选择器。

如果执行该方法，会取回ajax/test.html的内容，不过然后jQuery会解析被返回的文档，来查找带有容器ID的元素。该元素连同其内容会被插入带有结果ID的元素中，所取回文档的其余部分会被丢弃。

jQuery使用浏览器的.innerHTML属性来解析被取回的文档，并把它插入到当前文档，在这个过程中，浏览器会从文档中过滤元素，如<html>，<title>或<head>元素。结果由.load()取回的元素可能与浏览器直接取回的文档不完全相同。

注：浏览器安全问题，大多数"Ajax"请求无法从不同的域、子域或协议成功的取回数据。

13、jQuery.param() 方法：创建数组或对象的序列化表示，该序列化值可在进行AJAX请求时在URL查询字符串中使用。用于在内部将元素值转换为序列化的字符串表示。

object：要进行序列化的数组或对象

traditional：规定是否使用传统的方式浅层进行序列化（参数序列化）

param()

jQuery.param(object,traditional)
var params = { width:1900, height:1200 };
var str = jQuery.param(params);
$("#results").text(str);
//结果：width=1680&height=1050

示例1：显示对象的查询字符串表示以及URL编码版本：

var myObject = {
    a:{
        one: 1,
        two: 2,
        three: 3
    },
    b:[1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);

输出的结果是：

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3

a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

示例2：可以将traditional参数设置为true，来模拟jQuery1.4之前版本中$.param()的行为：

var myObject = {
    a:{
        one: 1,
        two: 2,
        three: 3
    },
    b:[1,2,3]
};
var shallowEncoded = $.param(myObject,true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded );
alert(shallowDecoded );

输出的结果：

a=%5Bobject+Object%5D&b=1&b=2&b=3

a=[object+Object]&b=1&b=2&b=3

14、jQuery.post() 方法：通过HHTP POST请求从服务器载入数据。根据响应的不同的MIME类型，传递给success回调函数的返回数据也有所不同，这些数据可以是XML根元素、文本字符串、JavaScript文件或者JSON对象。也可向success回调函数传递响应的文本状态。

jQuery.post(url,data,success(data,textStatus,jqXHR),dataType)
//等价于：
$.ajax({
    type: 'POST',
    url: url,
    data: data,
    success: success,
    dataType: dataType
});
//jqXHR对象

通过POST读取的页面不被缓存，因此jQuery.ajaxSetup()中的cache和ifModified选项不会影响这些请求。

注：如果有jQuery.post()发起的请求返回错误代码，那么不会有任何提示，除非脚本已调用了全局的.ajaxError()方法。或对于jQuery1.5，jQuery.post()返回的jqXHR对象的.error()方法也可以用于错误处理。

jqXHR对象：

15、.serialize() 方法：通过序列化表单值，创建URL编码文本字符串，可以选择一个或多个表单元素（比如input及/或文本框），或者form元素本身，序列化的值可在生成AJAX请求时用于URL查询字符串中。

$(selector).serialize()
$("button").click(function(){
    $("div").text($("form".serialize()));
});

16、.serializeArray() 方法：通过序列化表单值来创建对象数组（名称和值），序列化表单元素，返回JSON数据结构（JSON对象，而非JSON字符串）数据。

$(selector).serializeArray()
$("button").click(function(){
    x=$("form").serializeArray();
    $.each(x,function(i,field){
        $("#results").append(field.name + ":" + field.value + "");
    });
});