在 (1)入门篇中 使用了XMLHttpRequest对象说明Ajax异步传输的过程,本篇文章将详细介绍XMLHttpRequest对象。
以执行顺序为XMLHttpRequest对象说明主线,牵涉出来那部分用那功能。如下:
1,创建对象实例
最简单的创建:
var req = new XMLHttpRequest();
但是由于浏览器兼容问题,最简单的可能不是最好的,所以兼容浏览器的代码产生了:
try { req = new XMLHttpRequest(); } catch (e) { //IE var xmlhttp_ids = new Array('MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'); var success = false; for (var i = 0; i < xmlhttp_ids.length && !success; i++) { try { req = new ActiveXObject(xmlhttp_ids[i]); success = true; } catch (e) { } } if (!success) { throw new Error('Unable to create XMLHttpRequest'); } }
2,设置回掉函数
告诉XMLHttpRequest对象,哪个函数会处理对象状态的改变。即设置onreadystatechange属性
3,指定请求的属性
.open("GET or POST","URL","true or boolean")
参数URL很好理解,就是请求的地址;Boolean值呢,设置是否异步传送,至于GET Or Post怎么选取得看他们有什么不同:
1),用“GET”请求时,send()方法没有参数;用“POST”请求时,send()方法有参数。这个是表面不同
2),“GET”方式,将参数追加到URL中发送,“POST”方式,将参数串放在请求体中发送。这也就是为什么send()方法一个有参数,一个没有参数。
3),使用“POST”方式,要设置对象的Content-Type首部,格式如下:
req.onreadyStateChange = handleStateChange; req.setRequestHeader("Content-Type","application/x-www-form-urlencoded") req.open('POST',url,true) req.send(name1=bill);
大多情况下是选择“GET”,原因是简单且速度快。
使用“POST”的情况:
4,请求发送给服务器
这里用到对象的一个方法.send()
5,返回信息
这里用到XMLHttpRequest对象的三个属性分别为:readyState responseText responseXML
readyState :
返回请求的当前状态。
//设置回调函数 xmlHttp.onreadystatechange = function () { //4==请求已完成,可以访问 if (xmlHttp.readyState == 4) { //从服务器的response获取数据 document.getElementById("getTXT").innerHTML = xmlHttp.responseText; //responsetext,属性获取服务器返回的数据 }
responseText :将获取的信息以字符串的形式返回
responseXML:将获取的信息以xml document对象返回。
//设置回调函数 req.onreadystatechange = function () { //4==请求已完成,可以访问 if (req.readyState == 4) { //从服务器的response获取数据 // document.getElementById("getTXT").innerHTML = xmlHttp.responseText; //responsetext,属性获取服务器返回的数据 alert(req.responseXML); } }
结果如下:
这两个属性很重要的,是返回信息的载体。具体是用responseText呢还是responseXML呢,据具体情况而定,responseText传过来的是一堆的字符串,不好控制;而responseXML呢,传来的信息,我们可以根据自己需要适当选择取舍,可以选择获取,这个较好一些,本人看法。
以上就是整个异步调用过程。可以看出,没有控件的实现也是很简单,就是得多用几个XMLHttpRequest对象的属性和方法。据了解得:这种实现方法是常用的。