【学习笔记】锋利的jQuery（四）AJAX

一、load()方法

/*
*如果没有参数传递，采用GET方式传递
*如果有参数，则自动转换成POST方式传递
*无论Ajax是否请求成功，请求完成后回调函数触发
*/
load("test.html")
load("test.html .para")  //加载html里中有para类的DOM
load("test.php",{name:"rain",age:"22"},function(responseText,textStatus,XMLHttpRequest){
//responseText:   请求返回的内容
//textStatus:     请求状态：success/error/notmodified/timeout 4种
//XMLHttpRequest: XMLHttpRequest对象
})

二、$.get()与$.post()方法

$.get()与$.post()的区别：

1，GET请求将参数跟在URL后传递，POST则是作为HTTP消息的实体内容发送给服务器。

2，GET对传输的数据有大小限制，通常不大于2KB，POST不限制。

3，GET方式请求的数据会被浏览器缓存起来，数据会泄漏，而POST可以避免此类安全问题。

/*
*get和post的结构和使用方式都一样
*只有ajax请求的数据成功返回，回调函数才会被调用
*/
$.get("test.php",{name:"rain",age:"22"},function(data,textStatus){//GET方法的参数也可以用字符串方式
//data:        返回的数据：XML/JSON/HTML等
//textStatus:  请求状态：success/error/notmodified/timeout 4种
},"json")   //如果期望返回数据为json格式，将参数设为"json"

三、$.getScript()与$.getJson()方法

$.getScript("jq.color.js",fn)  //当js加载完后，执行回调函数

//可以通过getJSON中使用JSONP加载跨域的JSON数据
$.getJSON("test.json",function(data){ //data: 返回的json数据
//$.each()用于遍历对象和数组，return false退出each循环
$.each(data,function(i,item){
//i：   data中对象成员或数组的索引值
//item：data对应的变量或内容
})
})

四、通用Ajax方法：$.ajax()

$.ajax({
type: "GET",         //请求方式GET/POST，默认GET
url: "test.json",    //发送请求的地址
dataType: "json",    //预期服务器返回的数据类型
global: true,        //是否触发全局Ajax事件，默认为true（触发）
beforeSend: function(XMLHttpRequest){},   //发送请求前
complete: function(XMLHttpRequest,textStatus){}  //请求完成时（成功或失败）
success: function(data,textStatus) {  //请求成功后的回调函数
$.each(data,fn);
},
error: function(XMLHttpRequest,textStatus,errorThrown) //请求失败时
})

五、jQuery中的Ajax全局事件

//fn指回调函数(callback)
ajaxStart(fn)
ajaxStop(fn)
ajaxComplete(fn)
ajaxError(fn)
ajaxSend(fn)
ajaxSuccess(fn)

//如果想某个Ajax请求不受全局方式影响
$.ajax({
global: false;
})

六、系列化元素的方法

//序列化为字符串
serialize()
$("#form").serialize()   //整个表单的参数
$(":checkbox,:radio").serialize()  //选中的参数

//序列化为JSON格式数据
serializeArray()
$("#form").serializeArray()
$(":checkbox,:radio").serializeArray()

//对一个数组或对象序列化
$.param()
var obj = {a:1,b:2,c:3};
$.param(obj);  //结果为a=1&b=2&c=3