从零开始学习Ajax：Web开发技术实战.docVIP

说到AJAX，您会想到什么？球迷的第一反应或许是荷兰的阿贾克斯足球队。而本文的AJAX，指的是一种网页开发技术。在WWW被笑称为Wait，Wait，Wait的时代，AJAX大放异彩，AJAX提供的一步交互技术，可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 ?????何谓AJAX？ ???? ?AJAX(Asynchronous JavaScript and XML)是一种创建交互式网页应用的网页开发技术。AJAX使用JavaScript编写的 XMLHttpRequest 对象与与服务器通信。使用XMLHttpRequest，浏览器向Web 服务器发送异步HTTP请求，页面无需重载即可与Web 服务器交换数据。 　　AJAX技术的标准实现是XMLHttpRequest(简称XHR)对象。XHR可以调用类似jQuery等相关JS库例。下面给一个示例代码，来演示如何使用XHR。 　　1. 创建XMLRequest对象 if?(window.XMLHttpRequest) {　　xhr?=?new?XMLHttpRequest();　　}?else?if?(window.ActiveXObject) {　　xhr?=?new?ActiveXObject(Microsoft.XMLHTTP);　　} 　　2. 构造浏览器向服务器发送的异步HTTP请求URL xhr.open(　　GET,　　my-dynamic-content.jsp?id=　　+encodeURI(myId),　　true　　); 　　3. 指定回调函数接收服务器端响应 xhr.onreadystatechange?=?function(){　　processReqChange(req);　　} 　　4.浏览器向服务器端发送XRH请求 xhr.send(null); 　　如果使用同步方式，待客户端请求发送后，要做的是等待服务器端的响应。有时是干等，因为服务器因服务忙，或者网络延迟原因响应很慢。而使用异步AJAX技术，我们就可以干点别的事情了，而不必干等，因为AJAX指定回调函数随时接收服务器的响应，然后通知我们。如果您想了解更多细节， 请参见XHR对象的更多属性信息： 　　何谓HTTP 　　XHR的基础是HTTP协议，因此，充分熟悉HTTP协议有助于更加有效利用AJAX技术。HTTP协议的主要特点如下： 　　HTTP是一种无状态的请求-响应协议 　　无论是请求，还是响应，都包含了Header，属于文本类型。 　　只有POST请求才包含Body。 　　所谓请求是指定义一个动词与方法。 　　通过在Header文件设置Content-type指定请求、响应Mime类型。 　　相比于其它HTTP方法，我们使用GET和POST的概率是99%。HTTP方法列表如下： 　　REST是时下非常流行的Web Service技术，常见的一个应用是地图服务，常用的HTTP的方法如下： 　　正确设定请求与响应的Mime类型，是网页正常显示的关键因素之一。Mime类型列表如下： XHR实战技巧 　　记得在调用open()函数时，将async参数设置为true。 　　不要忘记在调用send()函数前设置回调函数。 　　使用encodeURI()对提交的表单数据编码。 　　将请求对象的mime-type参数设置为application/x-www- form-urlencoded 　　如需使用responseXML属性，将响应对象的mime-type设置为 application/xml 或者text/xml。 　　我们为XHR对象分配了回调函数。一旦接受响应，回调函数被调用一次。不过只有当完全接收到响应(状态为200)，我们才会做解析操作，如下： 　xhr.onreadystatechange=function(){　　if?(xhr.readyState==4){　　if?(xhr.status==200){　　parseResponse(xhr);　　}else{　　//handle the HTTP?error...　　}　　};　　}; 　　通用JavaScript实战技巧 　　JavaScript是一种弱类型脚本语言，支持面向对象，语法上类似Java、C，本质却大不同。JavaScript的主要特点如下： 　　运行时可动态扩展JavaScript对象属性。 　　一个函数可当成对象，作为参数传递到另一个函数。 　　变量不必遵循“先定义，后使用”的原则。 　　AJAX出现以前，人们习惯将UI等价为 HTML，DOM (Document Object Model)发挥有限。AJAX的出现进