Ajax异步请求
Ajax全称为Asynchronous Javascript and XML。通过Ajax实现了不刷新页面,更新局部视图的功能。
1. XMLHttpRequest对象
// 原生写法,不考虑兼容性
var xhr = new XMLHttpRequest();
如果要考虑兼容IE6,可以使用下面的createXHR函数:
function createXHR () {
if (typeof XMLHttpRequest !== "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
if (typeof arguments.callee.activeXString != "string") {
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len;
for (i = 0, len = versions.length; i < len; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex) {
// 跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available");
}
}
2.XHR的用法
open方法
创建XMLHttpRequest对象完成后,需要通过open方法启动请求。见下栗:
xhr.open("get", "example.txt", false);
// open接受三个参数,分别为:
// 1.请求的方法
// 2.请求的路径
// 3.是否使用异步的布尔值
send方法
启动请求完成后,需要发送请求,通过send方法:
xhr.send(null);
// send 方法接受一个参数:
// 你要发送给服务器的数据
// 使用get方法时,传入null或者不写
响应对象
responseText: 作为响应主体,被返回的文本。
responseXML: 如果相应内容类型为text/xml或application/xml,这个属性中将存着相应数据的XML DOM文档。
status: 响应的HTTP状态码。
statusText: HTTP状态的说明。
readyState: 表示请求和响应过程中,当前的活动阶段。有以下五个值:
0: 未初始化。尚未调用open()方法;
1:启动。已经调用open(),但尚未调用send();
2:发送。已经调用send(),但尚未接受到相应;
3:接收。已经接收到部分响应数据;
4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
onreadystatechange: readyState的值发生改变,就会触发一个该事件。举个栗子:
var xhr = createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300 || xhr.status === 304)) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get", 'example.txt', true);
xhr.send(null);
3.XMLHttpRequest 2级
FormData表单数据的序列化
通过此构造函数,可以为序列化表单以及创建与表单格式相同的数据(用于XHR传输)提供了便利。使用方法如下:
// 第一种方法:直接append添加数据
var data = new FormData();
data.append("name", "Jerry"); //接受两个参数:键,值
// 第二种方法:通过构造函数传入form对象
var data = new FormData(document.forms[0]);
// 通过send()发送FormData数据
xhr.send(new FormData(form));