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的历程，加油了！