jQuery学习笔记（八）
八、Ajax
1、将内容载入到元素中
直接用例子来说明jQuery的优越性
如果直接用Javascript写的话
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
throw new Error("Ajax is not supported by this browser");
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300) {
document.getElementById('someContainer')
.innerHTML = xhr.responseText;
}
}
}
xhr.open('GET','/serverResource');
xhr.send();
换作jQuery：
$('#someContainer').load('/serverResource');
ok，一句话搞定，看出效率了吧
现在就来介绍一下load方法，这个方法是一个包装集方法。
load(url,parameters,callback)
url ： 不必多说，服务器资源的url，需要注意的是，可以加入筛选条件， url #selector.用于在包装集中做筛选，然后再将服务器数据填充
parameters ： 发送请求时需要的数据。如果有数据发送到服务器端，则load方法使用post方式发送请求，否则使用Get方式． parameters的类型为object
callback ： 回调函数。 当数据被载入到元素中后触发。有三个参数： ｒｅｓｐｏｎｓｅＴｅｘｔ，ｓｔａｔｕｓＣｏｄｅ，ＸＨＲ对象
返回一个包装集
另外一个有用的方法是： ｓｅｒｉａｌｉｚｅ（）。用于将查询字符串编码
ｓｅｒｉａｌｉｚｅＡｒｒａｙ（）方法用于将查询字符串编码，然后放入ａｒｒａｙ
2、分别使用Get和Post请求
首先介绍一下这两种请求的不同
Get方式——用于从服务器上获取数据，不能修改服务器数据和信息
Post方式——用于修改服务器上的数据和信息
可以看出，在不同的Context中，要使用不同的方式，load不能满足一切的请求
jQuery提供了一些实用函数来实现这些功能。（注意，不是包装集函数）
$.get(url,parameters,callback)
callback ： 请求完成时触发，有两个参数: response body， status
返回一个XHR
$.getJSON(url,parameters,callback)
该函数用于已知返回的数据是JSON数据时使用
$.post(url,parameters,callback)
4、完全控制Ajax请求
$.ajax(options)
options ： object类型
返回XHR
options的内容：
url——请求的url
type——HTTP方法，Get或者Post，默认是Get
data——在发送请求时，使用的parameters，由$.ajax()方法负责编码
dataType——返回的数据类型，包括xml, html, json, jsonp, script, text
timeout——设置请求的超时时间（毫秒），若超时，则error回调函数自动被触发
global——是否允许调用全局函数
contentType——默认是application/x-www-form-rulencoded，用于former提交
success——response成功后，调用的方法，两个参数，一个是返回的数据，类型由datatype决定，第二个是status，（success）
error——发生错误的时候，调用的方法。有三个参数，XHR实例，状态信息（error），XHR返回的异常对象（可选）
complete——请求成功后调用，XHR实例，状态字符串（success，error）
beforeSend——初始化请求之前触发，可以设置header
async——是否异步提交，默认为true
processData——bool值，待考虑？
ifModified——检查header是否更改过
$.ajaxSetup(properties)
用于设置ajax的属性，即设置上面所述的属性的默认值。设置后就不用每次请求都写这些属性了，如：
$.ajaxSetup({
type: 'POST',
timeout: 5000,
dataType: 'html',
error: function(xhr) {
$('#errorDisplay)
.html('Error: ' + xhr.status + ' ' + xhr.statusText);
}
})
5、ajax的全局函数
ajaxStart(callback)
ajaxSend(callback)
ajaxSuccess(callback)
ajaxError(callback)
ajaxComplete(callback)
ajaxStop(callback)
callback方法的参数
一般第一个参数是一个object，有两个属性，type， target
第二个是XHR对象
第三个是ajax的property
第四个是exception
学的差不多了，接下来的任务就是如何把它熟练的使用起来了，这需要不断的实践和积累，现在才刚刚开始jQuery的历程，加油了！
1、将内容载入到元素中
直接用例子来说明jQuery的优越性
如果直接用Javascript写的话
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
throw new Error("Ajax is not supported by this browser");
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300) {
document.getElementById('someContainer')
.innerHTML = xhr.responseText;
}
}
}
xhr.open('GET','/serverResource');
xhr.send();
换作jQuery：
$('#someContainer').load('/serverResource');
ok，一句话搞定，看出效率了吧
现在就来介绍一下load方法，这个方法是一个包装集方法。
load(url,parameters,callback)
url ： 不必多说，服务器资源的url，需要注意的是，可以加入筛选条件， url #selector.用于在包装集中做筛选，然后再将服务器数据填充
parameters ： 发送请求时需要的数据。如果有数据发送到服务器端，则load方法使用post方式发送请求，否则使用Get方式． parameters的类型为object
callback ： 回调函数。 当数据被载入到元素中后触发。有三个参数： ｒｅｓｐｏｎｓｅＴｅｘｔ，ｓｔａｔｕｓＣｏｄｅ，ＸＨＲ对象
返回一个包装集
另外一个有用的方法是： ｓｅｒｉａｌｉｚｅ（）。用于将查询字符串编码
ｓｅｒｉａｌｉｚｅＡｒｒａｙ（）方法用于将查询字符串编码，然后放入ａｒｒａｙ
2、分别使用Get和Post请求
首先介绍一下这两种请求的不同
Get方式——用于从服务器上获取数据，不能修改服务器数据和信息
Post方式——用于修改服务器上的数据和信息
可以看出，在不同的Context中，要使用不同的方式，load不能满足一切的请求
jQuery提供了一些实用函数来实现这些功能。（注意，不是包装集函数）
$.get(url,parameters,callback)
callback ： 请求完成时触发，有两个参数: response body， status
返回一个XHR
$.getJSON(url,parameters,callback)
该函数用于已知返回的数据是JSON数据时使用
$.post(url,parameters,callback)
4、完全控制Ajax请求
$.ajax(options)
options ： object类型
返回XHR
options的内容：
url——请求的url
type——HTTP方法，Get或者Post，默认是Get
data——在发送请求时，使用的parameters，由$.ajax()方法负责编码
dataType——返回的数据类型，包括xml, html, json, jsonp, script, text
timeout——设置请求的超时时间（毫秒），若超时，则error回调函数自动被触发
global——是否允许调用全局函数
contentType——默认是application/x-www-form-rulencoded，用于former提交
success——response成功后，调用的方法，两个参数，一个是返回的数据，类型由datatype决定，第二个是status，（success）
error——发生错误的时候，调用的方法。有三个参数，XHR实例，状态信息（error），XHR返回的异常对象（可选）
complete——请求成功后调用，XHR实例，状态字符串（success，error）
beforeSend——初始化请求之前触发，可以设置header
async——是否异步提交，默认为true
processData——bool值，待考虑？
ifModified——检查header是否更改过
$.ajaxSetup(properties)
用于设置ajax的属性，即设置上面所述的属性的默认值。设置后就不用每次请求都写这些属性了，如：
$.ajaxSetup({
type: 'POST',
timeout: 5000,
dataType: 'html',
error: function(xhr) {
$('#errorDisplay)
.html('Error: ' + xhr.status + ' ' + xhr.statusText);
}
})
5、ajax的全局函数
ajaxStart(callback)
ajaxSend(callback)
ajaxSuccess(callback)
ajaxError(callback)
ajaxComplete(callback)
ajaxStop(callback)
callback方法的参数
一般第一个参数是一个object，有两个属性，type， target
第二个是XHR对象
第三个是ajax的property
第四个是exception
学的差不多了，接下来的任务就是如何把它熟练的使用起来了，这需要不断的实践和积累，现在才刚刚开始jQuery的历程，加油了！
