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

一、load()方法

/*
 *如果没有参数传递，采用GET方式传递
 *如果有参数，则自动转换成POST方式传递
 *无论Ajax是否请求成功，请求完成后回调函数触发
 */
load("test.html")
load("test.html .para")  //加载html里中有para类的DOM
load("test.php",{name:"rain",age:""},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:""},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:,b:,c:};
$.param(obj);  //结果为a=1&b=2&c=3