【IT168 技术】说到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对象
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2. 构造浏览器向服务器发送的异步HTTP请求URL
"GET",
"my-dynamic-content.jsp?id="
+encodeURI(myId),
true
);
3. 指定回调函数接收服务器端响应
processReqChange(req);
}
4.浏览器向服务器端发送XRH请求
如果使用同步方式，待客户端请求发送后，要做的是等待服务器端的响应。有时是干等，因为服务器因服务忙，或者网络延迟原因响应很慢。而使用异步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)，我们才会做解析操作，如下：
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的出现进一步提升了DOM的地位，这一点在single-page应用程序尤为明显。DOM的工作分为两个阶段：查找DOM元素;修改或重构内容
1. 查找DOM元素
首先，DOM标准本身已具备一些基本的查找工具。
其次，使用Prototype也可以定位DOM元素。
实例
最后，企业级JavaScript库，例如jQuery，功能上会更加丰富一些。
实例
2. 修改或重构DOM
DOM标准为我们提供了基本的工具集，浏览器供应商也提供一些相应的标准
使用原型来修改DOM
原型有助于使用innerHTML来修改DOM。通过Insertion命名空间可以强化该功能。
从程序语言的角度看，原型方法并不支持构建DOM元素。但是，Scriptaculous库新增了DOMBuilder对象。
WIDGETS 与 BEHAVIORS对比
jQuery和原型更趋向于侵入式JavaScript的UI类型，页面的内容被声明为HTML。有一种可选的方法来发展Ajax UIs，更有利于桌面应用程序的开发。通过JavaScript组建可以创建DOM元素。Qooxdoo 和 Ext2都是UI开发风格的最好示例：
在理想的世界里，选择何时的开发框架可以让开发过程如鱼得水。但是在实际中，你需要时不时的冷静分析。我们特别推荐以下Ajax开发工具。
