Ajax请求
一、创建XHR
1、在IE7及其更高的版本中:
var xhr = new XMLHttpRequst();
2、在IE7之前的的版本中使用createXHR函数根据IE中可用的MSXML库创建最新版本的XHR对象:
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"];
var i;
var len;
for (i=0,len=versions.length; i < len; i++){
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex){
//skip
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available.");
}
}
var xhr = createXHR();
二、XHR的用法
xhr包含四个方法:
xhr.open();//接受3个参数:发送请求的类型,请求的地址,是否异步请求
xhr.setRequestHeader();//接受两个参数:设置htttp头部的名字,设置http头部的值
xhr.send();//接受一个参数:作为请求主体的数据
xhr.abort();//取消异步请求
1、xhr.open()以及xhr.send()
xhr.open()注意:发送请求的地址相对执行代码的当前页面。
当调用send()之后,请求将发送到后台并且服务器响应之后xhr对象的属性将被自动填充:
responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
status:响应http的状态。
statusText:响应状态说明。
2、readyState属性
说明:这个属性表示请求或者是响应个过程的当前活动阶段。
0: 未初始化。未调用open()方法。
1: 启动。已调用open(),未调用send()
2: 发送。已调用send(),尚未接收到响应数据
3: 接收。接收到部分响应数据
4: 完成。已经接收到所有数据
readyState每次改变时将会触发readystatechange事件。
可以在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器的兼容性。
//例子
var xhr = createXHR();
xhr.onreadystatechange = function(event){
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);
三、请求类型
1、GET请求
说明:用于向服务器查询信息。
通常将查询的变量加在请求地址之后
比如说:xxx.xxx.xx?id=2 向服务器传递了一个参数名字叫name值为1
用下面这个函数实现添加参数
function addURLParam(url, name, value) {
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" +encodeURIComponent(value);
return url ;
}
2、POST请求
说明:通常向服务器发送应该保存的数据
使用方法:
xhr.open('post','请求地址',true);
post请求消耗的资源比get请求要多。发送相同的数据,get的速度最多可以达到post的两倍
四、XMLHTTPRequest 2级
1、FormData
说明:序列化表单以及创建与表单格式相同的数据。
之前在文章中提到过,具体点 这里
2、超时限定
XHR的timeout属性,表示请求等待响应多少毫秒之后就会自动终止。
请求终止时会调用ontimeout事件处理程序,此时readyState为4,这就会调用onreadystatechange事件。但是如果超时终止请求之后再访问status属性就会报错。这里可以使用try-catch中去处理检查status属性。
3、overrideMimeType()
强行让XHR对象将响应作为XML处理。
4、进度事件
loadstart:在接收到相应数据的第一个字节时触发。
progress:在接收相应期间持续不断触发。
error:在请求发生错误时触发。
abort:在因为调用abort()方法而终止链接时触发。
load:在接收到完整的相应数据时触发。
loadend:在通信完成或者触发error、abort或load事件后触发。
每个请求不对触发Loadstart事件开始,接下来是一或多个progress事件,然后触发error、abort或load事件中的一个,最后以触发loadend事件结束。
4.1
Firefox在实现XHR对象的某个版本时,曾致力于简化异步交互模型。最终,Firefox实现中引入了load事件,用以替代readystatechange事件。响应接收完毕后将触发Load事件,因此也就没有必要去检查readyState属性了。而onload事件处理程序会接收到一个event对象,其target属性就指向XHR对象实例,因而可以访问到XHR对象的所有方法和属性。然而,并非所有浏览器都为这个事件实现了适当的事件对象。结果,开发人员还是要像下面这样被迫使用XHR对象变量。
var xhr = createXHR();
xhr.onload = function () {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.open("get", "altevents.php", true);
xhr.send(null);
只要浏览器接收到服务器的响应,不管其状态如何,都会触发load事件。而这意味着你必须要检查status属性,才能确定数据是否真的已经可用了。Firefox、Operan、Chrome和Safari都支持load事件。
4.2、progress事件
progress事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象,其target属性是XHR对象,但包含着三个额外的属性:lengthComputable、loaded和total。其中,lengthComputable是一个表示进度信息是否可用的布尔值,loaded表示已经接收的字节数,loaded表示根据Content-Length响应头部确定的预期字节数。有了这些信息,我们就可以为用户创建一个进度指示器了。