jQuery Ajax

load(url<String>[,data<Object>] [,callback<Function>])

载入远程HTML代码并插入DOM中

从服务器上获取静态的数据文件

1.url

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

2.data

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

3.回调函数

function(responseText, textStatus, XMLHttpRequest){
    //responseText: 请求返回的内容
    //textStatus: 请求状态:success error notmodified timeout
    //XMLHttpRequest: XMLHttpRequest对象
}

$.get(url<String>[,data<Object>][,callback<Function>][,type<String>])

使用GET方法来进行异步请求

$post(url<String>[,data<Object>][,callback<Function>][,type<String>])

使用POST方法来进行异步请求

1.key/value形式的data会作为QueryString附加到请求URL中

2.type为服务器返回内容的格式

3.回调函数

function(){
    //data: 返回的内容：XML/JSON/HTML
    //textStatus:  请求状态: success error notmodified timeout
}

$.getScript()

直接加载.js文件，与HTML片段一样简单方便。

$(function(){
    $.getScript("jquery.color.js" ,function(){
        $("#go").click(function(){
            $(".block").animate({background:'pink'}, 1000)
                        .animate({background:'blue'}, 1000);
        });
    });
});

$.getJSON()与$.each()

加载JSON文件，解析JSON文件

$.getJSON("test.json", function(data){
    //data: 返回的数据
});

用each()方法把返回的json数据遍历出来并且直接生成html内容

$(function(){
    $("#send").click(function(){
        $.getJSON("test.json", function(data){
            $("#resText").empty();
            var _html = "";
            $.each(data, function(commentIndex, comment){
                _html += '<div class="comment"><h6>'
                        + comment['username']
                        + ':</h6>'
                        + '<p class="para">'
                        + comment['content']
                        + '</p></div>'
            });
            $("#resText").html(_html);
        });
    });
});

$.ajax()

jQuery最底层的ajax实现

serialize()

把数据序列化成字符串形式

$("#send").click(function(){
    $.get("get.php", $("#formTest").serialize(), function(data, textStatus){
        $("#resText").html(data);
    });
});

不仅仅是表单form能用，form下的元素都能用。

$(":checkbox, :radio").serialize();

serializeArray()

将DOM元素序列化后返回JSON格式的数据

var fields = $(":checkbox, :radio").serializeArray();
console.log(fields);

测试一下就可以看到结果，就知道怎么用啦！

$.param(obj)

serialize()的核心，用来对一个对象或者数组按照key/value进行序列化。

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

jQuery中的Ajax全局事件

我们经常要在页面加载数据的时候给用户一个反馈，告诉用户数据正在加载中，请耐心等待之类的...比如

<div id="loading">加载中...</div>

然后用CSS控制元素隐藏，当Ajax请求开始的时候，将此元素显示，用来提示用户Ajax请求正在进行。当Ajax请求结束后，将此元素隐藏。

$("#loading").ajaxStart(function(){
    $(this).show();
});

$("#loading").ajaxStop(function(){
    $(this).hide();
});

除此之外还有

ajaxComplete(callback); //请求完成时执行
ajaxError(callback); //请求错误时执行
ajaxSend(callback); //发送请求前执行
ajaxSuccess(callback); //请求成功时执行

如果想在使用$.ajax()时使Ajax请求不受全局方法影响（不触发全局方法），jQuery1.5以前可以这么做

$.ajax({
    url:"test.html",
    global:false
});

1.5以后可以这么做

$.ajaxPrefilter(function(options){
    options.global = true;
});