如何用原始的Ajax技术载入文档?

2016-07-11 16:24:00 4046 2 编辑:Monster 来源:Ajax书籍

Ajax技术的核心是XMLHttpRequest对象,任何Ajax技术的实现都离不开它。XMLHttpRequest对象是浏览器对象模型BOM中window对象的一个子对象(注:IE6不支持,但它可以用其他方式实现)。

该对象主要功能是向服务器异步发送HTTP请求,并能接收HTTP响应的数据(即载入文档)。本节只学习如何使用该对象载入文档到页面中。

XMLHttpRequest对象可以在不重新加载页面的情况下更新页面的局部,也就是在页面加载后仍然能向服务器请求数据,并接收服务器端返回的数据,XMLHttpRequest对象本质上是具备XML发送/接收能力的HttpRequest对象。

XMLHttpRequest对象载入文档的过程和用户使用自动售水机的过程非常相似(如果把用户想象成浏览器,自动售水机想象成服务器的话)。①用户首先需要投币给自动售水机,这就相当于用该对象的send()方法发送异步请求给服务器;②然后用户需要监视售水机是否出水,这就相当于用该对象的。nreadystatechange事件监听服务器是否返回了HTTP响应;③自动售水机出水了,相当于XMLHttpRequest对象通过responseText属性将数据返回给浏览器;④用一个容器去接售水机出来的水,相当于把responseTex,的属性值赋给一个DOM对象的innerHTML属性,这样这个DOM对象就接住了XMLHttpRequest对象返回的内容。

下面具体来看XMLHttpRequest对象异步获取服务器数据的全过程。

(1)在使用XMLHttpRequest对象前,必须先创建该对象的实例。代码如下:

var xmlHttPReg;

if(window.ActiveXObject){      //针对IE6

    xmlHttpReq=new ActiveXobject('"Microsoft.XMLHTTP");}

else if (window.XMLHttpRequest){   //针对除IE6以外的浏览器

    xm1HttpReq=new XMLHttpRequest();//实例化一个XMLHttpRequest}

这样就创建了一个XMLHttpRequest对象的实例xmlHttpReq。由于IE6浏览器是以ActiveXObject的方式引入XMLHttpRequest对象的,而在其他浏览器(如IE7十、Firefox.Safari)中XMLHttpRequest对象是window对象的子对象。为了兼容这两类浏览器,必须用上述代码中的两种方式创建该对象的实例。 

(2)然后使用XMLHttpRequest对象的实例的open()方法指定载入文档的HTTP请求类型、文件名以及是否为异步方式。代码如下:

xmlHttpReq.open("GET", "9-2.htm1", True);    //调用open()方法并采用异步方式载入文档

其中,open()方法可以有3个参数:第一个参数表示HTTP请求的类型(GET或POST);第二个参数表示请求文件的URL地址;第三个参数表示请求是否以异步方式发送(默认值为true,表示是异步方式)。

提示:XMLHttpRequest对象出于安全性考虑,规定open()方法中的URL地址必须是相对URL地址,而不能是绝对URL,这使得Ajax发送异步请求无法实现跨域(Cross-Origin,即跨网站的意思)请求。要实现跨域请求,必须使用JSONP(JSON with Padding)技术。

(3)使用send()方法将open()方法指定的请求发送出去,该方法只有一个参数,但该参数可以为空或null,建议null一定要写,否则程序只能在IE中运行,在Firefox中无法运行。代码如下:xmlHttpReq.send(null);

(4)使用send()方法发送了一个载入文档的请求后,还要准备接收服务器端返回的内容。但是客户端无法确定服务器端什么时候会完成这个请求。这时需要使用事件监听机制来捕获请求的状态,XMLHttpRequest对象提供了onreadystatechange事件实现这一功能。

onreadystatechange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果。

说明:

①onreadystatechange属性中的事件处理函数只有在readyState属性发生改变时才会触发,readyState的值表示服务器对当前请求的处理状态,在事件处理函数中可以根据这个值来进行不同的处理。readyState有5种可取值(0表示尚未初始化;1表示正在加载;2表示加载完毕;3表示正在处理;4表示处理完毕)。一旦readyState属性的值变成了4,就表明服务器已经处理完毕。

status属性表明请求是否已经成功,如果status属性值为200表明一切正常,服务器已成功接收了客户端的请求,如果为其他值则表明有错误发生(如404表示资源未找到)。

因此,readyState属性的值变成了4并且status属性的值为200就表明服务器已经处理完毕并且没有发生错误,这时客户端就可以访问从服务器返回的响应数据了。

②服务器在收到客户端的请求后,根据请求返回相应的内容。返回的内容可以有两种形式:一种是文本形式,将存储在responseText中;另一种是XML格式,存储在responseXML中。responseText和responseXML都是只读属性,只有当readyStat。属性值为4时,才能通过responseText获取完整的响应信息。如果设置服务器端响应内容类型为”text/xml",responseXML才会有值并被解析成一个XML文档。

③由于上述程序是向服务器请求载入文档9-2.html,因此服务器处理请求完毕后,返回的就是9-2.html的全部内容。它以字符串形式保存在responseText属性中,因此可设置#target元素的innerHTML为xmlHttpReq.responseText,这样#target元素中就载入了9-2.html中的内容。

将上述代码合在一起,并在页面中添加一个按钮和一个#target元素,设置单击该按钮就执行上述代码,就得到了一个采用Ajax技术载入文档的完整程序。


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通