《锋利的jQuery》 —— jQuery与Ajax的应用

·load( url [,data] [,callback] )方法
url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数

$("#myDiv").load("hello.html"); //向myDiv元素加载hello.html的内容
$("#myDiv").load("hello.html .myClass"); //筛选，只加载hello.html中myClass样式的内容

$("#myDiv").load("hello.html", function(){} ); //没参数的，使用GET方式
$("#myDiv").load("hello.html", {id:'123', name:'dier'}, function(){} ); //有参数的，使用POST方式

$("#myDiv").load("hello.html", function(responseText, textStatus, XMLHttpRequest){ //回调函数
    //responseText : 请求返回的内容
    //textStatus : 请求状态 success error notmodified timeout
    //XMLHttpRequest : Ajax对象
});

·$.get( url [,data] [,callback] [,type])和$.post( url [,data] [,callback] [,type])方法
url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数
type：指定服务器返回内容的格式 xml html script json text _default

$.get( "test.aspx", {id:"123", name:"dier"}, function(data,textStatus){ //回调函数只有当状态是success才触发
    //data : 请求返回的内容
    //textStatus : 请求状态 success error notmodified timeout
    
    //当data是HTML时，直接加载
    $("#myDiv").html(data);
    
    //当data是XML时，可筛选 <user id="123" name="dier" age="27" />
    var age = $(data).find("user").attr("age");
    
    //当data是JSON时，可直接点出属性来 {id:"123", name:"dier", age:"27"}
    var age = data.age;
});

·getScript(url [,callback])方法
$(function(){ //动态加载JS脚本
    $.getScript("test.js");
    
    $.getScript("test.js", function(){ //回调函数
        //do something..
    });
});

·getJSON(url [,callback])方法
$(function(){ //动态加载JS脚本
    $.getJSON("test.js");
    
    $.getJSON("test.js", function(data){ //回调函数
        //do something..
        //data : 返回的数据
        $.each( data, function(index, item){ //遍历，相当于foreach
            //index : 索引
            //item : 当前项内容
            //return false; 退出循环
        });
    });
});

·ajax(options)方法
url : 请求的地址
type : 请求的方式 GET POST 默认为GET
timeout : 请求超时时间(单位：毫秒）
data : 请求时发送的参数（String,Object）
dataType : 预期返回的数据类型 xml html script json jsonp text
bdforeSend : 发送请求前触发事件，如果return false则取消发送 function(XmlHttpRequest){}
complete : 请求完成后触发事件，不管成功与否 function(XmlHttpRequest, textStatus){}
success : 请求完成并且成功时触发事件 function(data, textStatus){}
error : 请求完成并且失败时触发事件 function(XmlHttpRequest, textStatus, errorThrown){}
global : 是否为全局请求，默认为true，可使用AjaxStart、AjaxStop控制各种事件

$.ajax({
    url : "test.aspx",
    type : "POST",
    timeout : "3000",
    data : {id:"123", name:"dier"},
    dataType : "HTML",
    success : function(data,textStatus){
        $("#myDiv").html( data );
    }
    error : function(XmlHttpRequest, textStatus, errThrown){
        $("#myDiv").html( "请求失败：" + errThrown );
    }
});

·序列化字符串 serialize()
$.get( "test.aspx", $("#form1").serialize(), function(data,textStatus){
    //将form1整个表单中的所有域序列化成提交的参数，支持自动编码
});

·序列化数组 serializeArray()
var arr = $(":checkbox, :radio").serializeArray();

·对象序列化 param()
var obj = {id:"123", name:"dier", age:"27"};
var kv = $.param(obj); //id=123&name=dier&age=27

·JQuery中的全局Ajax事件
ajaxStart(callback) //请求开始时触发
ajaxStop(callback) //请求结束时触发
ajaxComplete(callback) //请求完成时触发
ajaxSuccess(callback) //请求成功时触发
ajaxError(callback) //请求失败时触发
ajaxSend(callback) //请求发送前触发

$("#loading").ajaxStart(function(){ //当有AJAX请求时显示，完成时隐藏
        $(this).show();
    }.ajaxStop(function(){
        $(this).hide();
    }
);