Ajax_04之jQuery中封装的Ajax函数

1、PHP中json_encode编码规则：
PHP索引数组编码为JSON：[...]
PHP关联数组编码为JSON：{...}
2、jQuery中AJAX封装函数之load：

①使用：$('选择器').load(url,[data],[fn]);
$('选择器').load(url);

②含义作用：创建XHR对象，向指定的URL发起异步请求，请求参数为data，如果响应成功，自动调用指定回调函数fn，将响应主体数据（必须是HTML片段），替换为当前选定元素的innerHTML，已有内容会被覆盖；

3、jQuery中AJAX封装函数之$.get：

①使用：$.get(url,[data],[fn]);

②含义作用：创建XHR对象，向指定的URL发起异步GET请求，请求参数为data（形如k=v&k=v或{k:v,k:v}），如果响应成功，自动调用指定回调函数fn（必须在此回调函数中对响应数据进行处理——doResponse）；

4、jQuery中AJAX封装函数之$.post：

①使用：$.post(url,data,[fn]);

②含义作用：创建XHR对象，向指定URL发起异步POST请求，请求参数为data（形如k=v&k=v或{k:v,k:v}），追加在请求主体中，如果响应成功，自动调用指定回调函数fn（必须在此回调函数中对响应数据进行处理——doResponse(txt,msg,xhr);）；

③表单序列化：Serialize，把表单中所有具备name属性的输入域及值拼接为“k1=v1&k2=v2”形式的字符串，可直接用于HTTP请求消息（var data=$("#formId").serialize();）；

5、jQuery中AJAX封装函数之$.getJSON：

　　①使用：$.getJSON(url,[data],[fn]);

　　②含义作用：创建XHR对象，向指定URL发起异步GET请求，请求参数为data（形如k=v&k=v或{k:v,k:v}），追加在URL后，如果响应成功，自动调用指定回调函数fn（必须在此回调函数中对响应数据进行处理——doResponse(txt,msg,xhr);）；

　　*（该函数要求响应数据必须是application/json类型，会自动调用JSON.parse(xhr.responseText)加以解析）；
6、jQuery中AJAX封装函数之$.getScript：

　　①使用：$.getScript(url,[data],[fn]);
　　　　$.getScript(url);

　　②含义作用：创建XHR对象，向指定URL发起异步GET请求，请求参数为data（形如k=v&k=v或{k:v,k:v}），追加在URL后，如果响应成功，自动调用指定回调函数fn；

　　*（该函数要求响应数据必须是application/javascript类型，会自动调用eval(xhr.responseText)加以执行）；
7、jQuery中AJAX封装函数之$.ajax：

　　①使用：
$.ajax({
type:'GET',//POST/PUT/DELETE/HEAD
url:'x.php',
data:'k=v&k=v', //{k:v}请求数据
beforeSend:function(){}, //请求发送前的回调
success:function(){}, //成功响应的回调
error:function(){}, //失败响应的回调
complete:function(){} //响应完成的回调
});

②对应原生AJAX代码：
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200){success();}
else{error();}
complete();
}
}
xhr.open();
beforeSend();
xhr.send();
8、总结：
①$('选择器').load(url);——只接收html响应；

②$.get(url,data,fn);——取决于响应消息声明的内容类型，若声明为application/json，会自动调用JSON.parse()；若声明为application/javascript，会自动调用eval()；若声明为text/plain等，则不会自动执行；

③$.post(url,data,fn);

④$.getJSON(url,data,fn);——只接收json响应，不论响应消息是什么类型，都会自动调用JSON.parse()把xhr.responseText进行解析得到JS对象；

⑤$.getScript(url);——只接收script响应，不论响应消息什么类型，都会自动调用eval把xhr.responseText进行执行；

更多相关文章

随机推荐