关于JS中ajax的XMLHttpRequest对象的使用

来源：互联网发布：烽火通信软件测试招聘编辑：程序博客网时间：2024/06/11 15:57

JS中的Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而JavaScript通过这个对象可以自己发送请求，同时也自己处理响应。

现在我们先创建一个html页面，命名为test.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8"/>    <title>Ajax学习</title>    <script type="text/javascript" src="test.js"></head><body><div id="testdiv"></div></body></html>

其中引的test.js文件与当前html页面文件同在一个文件夹下

为了模拟服务器的响应，在test.html所在文件夹下再建一个文本文件test.txt,
包含内容：”这里面存的是模拟服务器的文本”;

这个test.txt文件将充当服务器端脚本的输出。多数情况下，服务器脚本接到请求之后，会做出相应的处理后才有所返回，这里为了方便，就直接用这个test.txt文件演示就行了，希望不会给大家带来太多的困惑。

XMLHttpRequest对象的历史比较早，几乎支持所有的浏览器，但是不同的浏览器实现XMLHttpRequest对象的方式有所不同，例如IE浏览器。为了能够保证能够跨浏览器调用，我们不得不为同样的事情写不同的代码分支了。

在IE浏览器上面，创建XMLHttpRequest对象就要使用下面的代码了：

var request = new ActiveXObject("Msxml2.XMLHTTP.3.0");

但是在其他浏览器上相对比较简单，就是基于XMLHttpRequest对象来创建对象

var request = new XMLHttpRequest();

但是，这里有一个比较麻烦的问题是：不同的IE版本中使用的XMLHTTP对象也是不完全相同的。为了兼容所有的浏览器，我们在test.js中定义这么一个函数，用来处理跨浏览器和跨版本时实现XMLHTTP对象

function getHTTPObject(){    //筛选IE浏览器    if((typeof XMLHttpRequest) == 'underfine'){        XMLHttpRequest = function(){            try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}            catch(e){}            try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}            catch(e){}            try{return new ActiveXObject("Msxml2.XMLHTTP");}            catch(e){}            return false;        }    }    //针对其他浏览器    return new XMLHttpRequest();}

getHTTPObject()方法通过对象检测技术检测了XMLHttpRequest对象，如果失败，则继续检测其他方法，最终返回false或一个新的XMLHttpRequest（或XMLHTTP）对象。

上面的getHTTPObject方法返回了一个XMLHttpRequest（或XMLHTTP）对象，现在我们定义一个函数getNewContent()，用这个对象来实现与服务器的交流。

function getNewContent(){    var request = getHTTPObject();//调用前面的函数，得到XMLHttpRequest（或XMLHTTP）对象    if(request){        request.open('GET','test.txt',true);//指定服务器上将要访问的文件        request.onreadystatechange = function(){            if(request.readyState == 4){                var para = document.createElement('p');                var txt = document.createTextNode(request.responseText);                para.appendChild(txt);                var testdiv = document.getElementById("testdiv");                testdiv.appendChild(para);            }        }        request.send(null);    }else{        alert("你的浏览器暂不支持XMLHttpRequest");    }}

现在可以执行getNewContent()函数，将test.txt里的内容加载到test.html里面了

window.onload = function(){    getNewcontent();}

审查test.html页面的元素，就会发现，原来的

<body>    <div id="testdiv"></div></body>

变成了

<body>    <div id="testdiv">    <p>这里面存的是模拟服务器的文本</p>    </div></body>

这就证明了，我成功的从test.txt中把里面的内容取出来，并且在test.html里展示出来。

在getNewContent()函数里面，可能会有陌生的一些属性，我在这里顺便解释一下：

1、request.open().
open()指定服务器上将要访问的文件。一般只需指定三个参数：第一个参数指定请求的类型，GET/POST/SEND。第二个参数指定访问的文件的路径，注意该文件必须与test.html处于同一项目下。第三个参数指定是以同步的方式还是异步的方式发送和处理，true表示异步，false表示同步。

2、request.onreadystatechange.
这里的onreadystatechange是XMLHttpRequest的一个属性，它是一个事件处理函数，会在服务器给XMLHttpRequest对象送回响应的时候被触发执行。在这个函数中，可以根据服务器的具体响应做相应的处理。

3、request.readystate.
readystate属性存有服务器响应的状态信息，服务器在向XMLHttpRequest对象发回响应时，该对象有许多属性可用，浏览器回在不同的阶段更新readystate属性的值，它有5个可能的值：
<1>0表示未初始化
<2>1表示正在加载
<3>2表示加载完毕
<4>3表示正在交互
<5>4表示完成
当readystate属性的值为4的时候，我们就可以访问服务器发送回来的数据并利用它们了。
还有就是，每当readystate的值改变的时候，onreadystatechange函数就会被执行。

4、request.responseText
我们可以用responseText属性来取到由服务器返回的数据

5、request.send()
该方法向服务器发送请求
例如：

var params = "username=jack&pwd=123456";request.send(params);//向服务器发送两个值，值之间用&号隔开

在最后，我试验一下open()方法中的同步和异步的区别
在getNewContent()方法中，我添加两行代码

function getNewContent(){    var request = getHTTPObject();//调用前面的函数，得到XMLHttpRequest（或XMLHTTP）对象    if(request){        request.open('GET','test.txt',true);//指定服务器上将要访问的文件        request.onreadystatechange = function(){            if(request.readyState == 4){                alert("step 1");                var para = document.createElement('p');                var txt = document.createTextNode(request.responseText);                para.appendChild(txt);                var testdiv = document.getElementById("testdiv");                testdiv.appendChild(para);            }        }        request.send(null);    }else{        alert("你的浏览器暂不支持XMLHttpRequest");    }    alert("step 2");}

此时open()函数中我设定第三个参数为true,即异步方式，
刷新页面，你会发现先输出的是 step 2;
这就证明了脚本不会等待send()的响应，而是继续往下执行，因为服务器响应的速度比客户端慢。
加入你把true改成false,也就是同步的方式。那么，无论服务器的响应速度有多慢，step 2 都会等到 step 1 输出后再输出。

以上所有内容是本人在看《JavaScript DOM 编程艺术》这本书和百度后整理出来的，希望对大家的学习有所帮助。还有，感觉《JavaScript DOM 编程艺术》这本书不错，大家可以看一下。（大神勿喷）

1 0