浏览器中xhr选项是做什么用的呢_Javascript在浏览器环境中(七)XMLHttpRequest

XMLHttpRequest

XMLHttpRequest是一个函数&＃xff0c;用来创建一个http请求。最初XHR是IE通过ActiveX对象实现的。以后各个浏览器都开始支持了。现在流行的AJAX就是通过XMLHttpRequest对象来实现的。总的来说ajax就是不必刷新整个页面而获取新的内容的一种方法。通过ajax我们可以做类似桌面的程序。

AJAX:Asynchronous Javascript and XML.Asynchronous&＃xff0c;向服务器发个请求&＃xff0c;并不用等待返回。但是它可以做其他的事情并且通过一个事件来得知有一个相应返回。

Javascript,我们通过Javascript来创建一个XHR对象。

XML&＃xff0c;因为最初的开发人员都是用XHR请求一个XML文档。把它作为数据返回到页面上。现在比较流行用JSON的格式。

用XHR非常简单只需要两个步骤发出一个请求&＃xff0c;创建一个XHR对象&＃xff0c;并且给它一个监听器。

处理响应&＃xff0c;事件的监听器能得知响应的返回。这样代码就能处理这个响应了。

发送一个请求

为了用于演示&＃xff0c;以下的代码在各个浏览器可能不太一样。

第一步创建一个XHR对象

Js代码 varxhr &＃61;newXMLHttpRequest();

第二步给readystatechange添加一个监听器。

Js代码 xhr.onreadystatechange &＃61; myCallback;

第三步调用XHR对象的open方法

Js代码 xhr.open(&＃39;GET&＃39;,&＃39;somefile.txt&＃39;,true);

第一个参数是HTTP请求的类型&＃xff0c;一般都是post和get。如果不需要向服务端发送大量的数据可以用get。不然的话就用post。第二个参数是请求的url。这个例子中是个相同目录下的somefile.txt文件。最后一个参数指定是否为异步。

第四步发送一个请求。

Js代码 xhr.send(&＃39;&＃39;);

这个方法&＃xff0c;可以向服务端发送数据。对于GET请求&＃xff0c;是个空字符串。对于post请求它是个字符串 key&＃61;value&key2&＃61;value2

处理请求

我们已经给readystatechange加了一个监听器了。什么事ready state&＃xff0c;它是怎样改变的呢&＃xff1f;

XHR有个属性叫做readyState.它每次变化都会去执行readystatechange事件。

readyState属性的值如下0-uninitialized

1-loading

2-loaded

3-interactive

4-complete

当readyState的值为4的时候&＃xff0c;也就是response返回了。在上个例子的myCallback函数中&＃xff0c;在确认readyState值为4的之后&＃xff0c;还要确认HTTP请求的status code(状态码).如请求了一个不存在的URL&＃xff0c;http的状态码为404.如果状态码是200就说明是正确的了。所以&＃xff0c;myCallback函数中会检查这个状态码。我们可以用过XHR的status属性来获取状态码。

所以如果readyState为4&＃xff0c;http状态码为200&＃xff0c;你就可以通过XHR的responseText属性访问请求URL的内容了。

具体看代码

Js代码 functionmyCallback() {

if(xhr.readyState 

return;// 还没有返回

}

if(xhr.status !&＃61;&＃61; 200) {

alert(&＃39;Error!&＃39;);// HTTP状态码错误。

return;

}

//  查看返回的内容。

alert(xhr.responseText);

}

通过xhr.responseText。你就可以获取请求URL内容&＃xff0c;并且可以把它添加到当前的页面中了。

在IE浏览器中创建XHR对象

因为在IE中&＃xff0c;是用ActiveX来创建XHR对象的。但是各个IE浏览器版本之间也有所不同。

因此如果要跨浏览器创建XHR对象&＃xff0c;代码如下

Js代码 varids &＃61; [&＃39;MSXML2.XMLHTTP.3.0&＃39;,

&＃39;MSXML2.XMLHTTP&＃39;,

&＃39;Microsoft.XMLHTTP&＃39;];

varxhr;

if(typeofwindow.XMLHttpRequest &＃61;&＃61;&＃61;&＃39;function&＃39;) {

xhr &＃61; newXMLHttpRequest();

} else{

for(vari &＃61; 0; i 

try{

xhr &＃61; newActiveXObject(ids[i]);

break;

} catch(e){}

}

}

来解释下上面的程序。首先这个ids数组存放着三个不同的ActiveX的ID。用来解决IE浏览器版本的问题。

然后在检查window.XMLHttpRequest是否是个合法的函数。如果支持说明浏览器支持XMLHttpRequest(一般firefox,Safari,Opera都支持)。

关于异步

现在我们知道了怎样创建一个XHR以及处理响应。如果发出两个异步请求的话会怎么样呢&＃xff1f;如果第二个响应在第一个响应之前返回呢&＃xff1f;

在上个例子中XHR是个全局的对象myCallBack函数依赖于全局的XHR对象。如何避免用全局的变量呢&＃xff0c;那就把回调函数封装为闭包。看下代码

Js代码 varxhr &＃61;newXMLHttpRequest();

xhr.onreadystatechange &＃61; (function(myxhr){

returnfunction(){myCallback(myxhr);}

})(xhr);

xhr.open(&＃39;GET&＃39;,&＃39;somefile.txt&＃39;,true);

xhr.send(&＃39;&＃39;);

这个例子中&＃xff0c;myCallback函数接收了XHR对象&＃xff0c;就不需要访问全局的XHR了。

关于XML

虽然JSON已经明显要比XML流行的多&＃xff0c;但是XML仍然是一个好的选择。如果是XML文档&＃xff0c;我们可以用responseXML来访问一个XML文档。这样返回的内容就可以用DOM解析的方式来读取了。如getElementsByTagName()等等。