图2-1显示了Ajax应用中标准的交互模式。 1. 一个客户端事件触发一个Ajax事件。从简单的onchange事件到某个特定的用户动作,很多这样的事件都可以触发Ajax事件。可以有如下
图2-1显示了Ajax应用中标准的交互模式。
1. 一个客户端事件触发一个Ajax事件。从简单的onchange事件到某个特定的用户动作,很多这样的事件都可以触发Ajax事件。可以有如下的代码:
<input type="text"d="email" name="email" onblur="validateEmail()";>
1)实例化XMLHttpRequest 并兼容浏览器
初始化对象并发出XMLHttpRequest请求为了让javascript可以向服务器发送HTTP请求,必须使用XMLHttpRequest对象。使用之前,要先将XMLHttpRequest对象实例化。之前说过,各个浏览器对这个实例化过程实现不同。IE以ActiveX控件的形式提供,而Mozilla等浏览器则直接以XMLHttpRequest类的形式提供。为了让编写的程序能够跨浏览器运行,要这样写:
if (window.XMLHttpRequest) {
// Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if ( window.ActiveXObject) {
// IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错。因此,要确保返回的内容包含text/xml信息。
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
(2)指定响应处理函数
接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如:
http_request.onreadystatechange = processRequest;
需要指出的时,这个函数名称不加括号,不指定参数。也可以用Javascript即时定义函数的方式定义响应函数。比如:
http_request.onreadystatechange = function( ) { //(4)处理服务器返回的信息 }; (3)发送HTTP请求
发出HTTP请求指定响应处理函数之后,就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);
open的第一个参数是HTTP请求的方法,为Get、Post或者Head。
第二个参数是目标URL。基于安全考虑,这个URL只能是同网域的,否则会提示“没有权限”的错误。这个URL可以是任何的URL,包括需要服务器解释执行的页面,不仅仅是静态页面。
第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True,则不会继续执行,直到服务器返回信息。默认为True。
按照顺序,open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话,可以是任何想传给服务器的内容。不过,跟form一样,如果要传文件给服务器,必须先调用setRequestHeader方法,修改MIME类别。如下:
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
(4)处理服务器返回的信息
a.定义指定的响应处理函数( processRequest).
b.检查XMLHttpRequest对象的readyState值,判断请求目前的状态。参照前文的属性表可以知道,readyState值为4的时候,代表服务器已经传回所有的信息,可以开始处理信息并更新页面内容了。如下:
if (http_request.readyState == 4) {
// 信息已经返回,可以开始处理
} else {
// 信息还没有返回,等待
}
服务器返回信息后,还需要判断返回的HTTP状态码,确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中,200代表页面正常。
if (http_request.status == 200) {
// 页面正常,可以开始处理信息
} else {
// 页面有问题
}
XMLHttpRequest对成功返回的信息有两种处理方式:
responseText:将传回的信息当字符串使用;
responseXML:将传回的信息当XML文档使用,可以用DOM处理。
可以看到,这与正常的请求/响应模式有所不同,但对Web开发人员来说,并不是完全陌生的。显然,在创建和建立XMLHttpRequest对象时还可以做些事情,另外当“回调”函数完成了状态检查之后也可以有所作为。一般地,你会把这些标准调用包装在一个库中,以便在整个应用中使用,或者可以使用Web上提供的库。这个领域还很新,但是在开源社区中已经如火如荼地展开了大量的工作。
通常,Web上提供的各种框架和工具包负责基本的连接和浏览器抽象,有些还增加了用户界面组件。有一些纯粹基于客户,还有一些需要在服务器上工作。这些框架中的很多只是刚开始开发,或者还处于发布的早期阶段,随着新的库和新的版本的定期出现,情况还在不断发生变化。这个领域正在日渐成熟,最具优势的将脱颖而出。一些比较成熟的库包括libXmlRequest、RSLite、sarissa、JavaScript对象注解(JavaScript Object Notation,JSON)、JSRS、直接Web远程通信(Direct Web Remoting,DWR)和Rails on Ruby。这个领域日新月异,所以应当适当地配置你的RSS收集器,及时收集有关Ajax的所有网站上的信息。