创建Ajax对象的跨浏览器兼容方法
Ajax 技术的核心是 XMLHttpRequest 对象(简称 XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来都提供了相同的实现。IE5 是第一款引入 XHR 对象的浏览器。在 IE5 中, XHR 对象是通过 MSXML 库中的一个 ActiveX对象实现的。因此,在 IE 中可能会遇到三种不同版本的 XHR 对象,即 MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MXSML2.XMLHttp.6.0。因此,创建XHR对象应该是用一个函数:
//适用于 IE7 之前的版本
function createXHR(){
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);
}
鉴于IE7+、 Firefox、 Opera、 Chrome 和 Safari 都支持原生的 XHR 对象,在这些浏览器中创建 XHR 对象要像下面这样使用 XMLHttpRequest 构造函数。
var xhr = new XMLHttpRequest();
在必须支持IE7以下版本时,必须使用以下函数:
function createXHR(){
/*如果浏览器支持原生XMLHttpRequest对象,返回用原生对象创建的XMLHttpRequest对象*/
if (typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined"){
//否则使用MSXML库的ActiveX对象创建
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.");
}
}
创建对象的浏览器兼容方式是 var xhr = createXHR();
XHR对象的两个方法
open():它接受 3 个参数:要发送的请求的类型("get"、 "post"等) 、请求的 URL 和表示是否异步发送请求的布尔值(true代表异步,false代表同步,默认是是异步)。下面就是调用这个方法的例子。
xhr.open("get", "example.php", false);
调用 open()方法并不会真正发送请求,而只是启动一个请求以备发送。具体发送请求需要使用.send()方法。
send()方法:
xhr.open("get", "example.txt", false);
xhr.send(null);
这里的 send()方法接收一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入 null,因为这个参数对有些浏览器来说是必需的。
在收到响应后,响应的数据会自动填充 XHR 对象的属性,相关的属性简介如下。
responseText:作为响应主体被返回的文本。
responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保
存包含着响应数据的 XML DOM 文档。对于非XML数据,responseXML的值是null。
status:响应的 HTTP 状态。200~300之间是正常响应,304表示请求的资源未修改,因此可以使用浏览器中缓存的数据,也即响应有效。
statusText: HTTP 状态的说明。
readyState 属性
XHR 对象的 readyState 属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。
0:未初始化。尚未调用 open()方法。
1:启动。已经调用 open()方法,但尚未调用 send()方法。
2:发送。已经调用 send()方法,但尚未接收到响应。
3:接收。已经接收到部分响应数据。
4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
只要 readyState 属性的值由一个值变成另一个值,都会触发一次 onreadystatechange 事件。可以利用这个事件来检测每次状态变化后 readyState 的值。通常,我们只对 readyState 值为 4 的阶段感兴趣,因为这时所有数据都已经就绪。不过,必须在调用 open()之前指定 onreadystatechange事件处理程序才能确保跨浏览器兼容性。使用DOM0级事件处理程序的代码如下:
var xhr = createXHR();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){ //每次readyState改变都检查一次,仅当4时才真正作用
//如果状态码>200且<300,或者为304,输出响应文本
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); //添加onreadystatechange事件后使用open()方法
xhr.send(null);
XHR的两种请求方式:GET and POST
GET请求:
GET 是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到 URL 的末尾,以便将信息发送给服务器。对 XHR 而言,位于传入 open()方法的 URL 末尾的查询字符串必须经过正确的编码才行。使用 GET 请求经常会发生的一个错误,就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用 encodeURIComponent()进行编码,然后才能放到 URL 的末尾;而且所有名-值对儿都必须由和号(&)分隔:
xhr.open("get", "example.php?name1=value1&name2=value2", true);
POST请求:通常用于向服务器发送应该被保存的数据。 POST 请求应该把数据作为请求的主体提交,而 GET 请求传统上不是这样。 POST 请求的主体可以包含非常多的数据,
而且格式不限。在 open()方法第一个参数的位置传入"post",就可以初始化一个 POST 请求,如下面的例子所示。
xhr.open("post", "example.php", true);
发送 POST 请求的第二步就是向 send()方法中传入某些数据。由于 XHR 最初的设计主要是为了处理 XML,因此可以在此传入 XML DOM 文档,传入的文档经序列化之后将作为请求主体被提交到服务器。当然,也可以在此传入任何想发送到服务器的字符串。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。