1.jQuery对AJAX操作的封装——load
用法:$(‘div’).load(‘1.php’,[‘k=v’],[fn]):$.load()
是JQ对js dom中onload函数的封装
作用:创建XHR对象,发起异步请求,把成功响应消息的主体数据(必需是text/html),追加为当前选定元素的innerHTML。
注意:响应消息必需是HTML片段!当前选定元素已有内容会被替换!
演示:异步加载全站所有页面都要使用的页头和页尾
2.jQuery对AJAX操作的封装——$.get
用法:$.get('2.php', ['k=v'], fn)
作用:创建XHR对象,发起异步GET请求,得到成功的响应消息调用指定的回调方法。
具体用法:
$.get(
'check_uname.php',//借口
{uname:'tom',age:20}, //参数
function(data, msg, xhr){ //回调
//data就是响应主体数据
}
)
3.jQuery对AJAX操作的封装——$.post
用法:$.post('3.php', {k:v,k:v}, fn)
作用:创建XHR对象,发起异步POST请求,得到成功的响应消息调用指定的回调方法。
具体用法:
$.post(
'register.php',
{uname:'tom',upwd:'123'},
function(data, msg, xhr){
//data就是响应主体数据
}
)
//$.post(url, data, fn)的底层实现:
jQuery.post = function(url,data,fn){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status ===200){
fn(xhr.responseText,'success',xhr);
}
}
}
3 xhr.open('post', url, true);
4 xhr.send( data );
}
扩展知识:
表单序列化——把表单中所有带name属性的输入域的值拼接为特殊形式的字符串,用于请求消息中的主体数据。
var data = $('#loginForm').serialize();
//返回值形如: k1=v1&k2=v2&...
//其中k就是表单中输入域的name
4.jQuery对AJAX操作的封装——$.getScript
用法:$.getScript('4.php', [{k:v,k:v}], [fn])
作用:创建XHR对象,发起异步GET请求,得到成功的响应消息——必需是application/javascript类型,自动调用eval()执行返回的JS脚步(即使响应消息声明的内容类型不是JS)。
具体用法:
`$.getScript( '4.php' )`
5. jQuery对AJAX操作的封装——$.getJSON
用法:$.getJSON('5.php', [{k:v,k:v}], fn)
作用:创建XHR对象,发起异步GET请求,得到成功的响应消息——必需是application/json类型,自动调用JSON.parse()把服务器返回的JSON字符串解析为JS对象。
6.jQuery对AJAX操作的封装——$.ajax
使用方法:
$.ajax( {
type: 'GET', //POST/PUT/DELETE...
url: 'x.php',
data: 'k=v&k=v', //{k:v, k:v}
beforeSend: fn, //在请求发送前的回调
success: fn, //响应成功后的回调
error: fn, //响应失败后的回调
complete: fn //响应完成后(不论成败)的回调
} )
成功的调用: beforeSend() => success() => complete()
失败的调用: beforeSend() => error() => complete()
对应于原生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()
总结jQuery中封装的AJAX操作:
(1) $('div').load(url)
发起GET或POST请求,接收html响应
(2) $.get(url, data, fn(data,msg,xhr){})
发起GET请求,接收任意响应,自动根据内容类型执行特定的操作,如eval()/JSON.parse()
(3) $.post(url, data, fn(data,msg,xhr){})
发起POST请求,接收任意响应,自动根据内容类型执行特定的操作,如eval()/JSON.parse()
(4) $.getScript( url )
发起GET请求,接收script响应,自动eval()
(5) $.getJSON( url, data, fn(data,msg,xhr){})
发起GET请求,接收JSON响应,自动JSON.parse()
(6) $.ajax( )
发起任意类型请求,接收任意类型响应,处理成功/失败的响应——万能AJAX调用函数!