Ajax概要：
Ajax不是个全新的技术，它是多种技术合并在一起产生的，包括XHTML，CSS，JavaScript，XmlHttpRequest，XML，JSON，DOM等
优点：（这也解释了为何我们需要Ajax技术）
传统页面被点击将与服务器通信后将刷新整个页面。用Ajax只需刷新局部，而且如果数据在本地，根本不必和服务器通信。
缺点：
Ajax整合了大量技术，因此可能会有浏览器兼容性问题，如果该浏览器不支持某项技术，就可能导致运行失败，因此一定要多浏览器测试。
步骤：
用传统JavaScript方式开发个使用Ajax技术的web页面的话可细分为以下5个步骤：
Step1：编写HTML和CSS来布局页面
Step2：编写一个函数初始化页面
Step3：编写一个函数创建请求对象
Step4：从服务器得到数据
Step5：在页面上更新显示
现在很多库（如jQuery，Backbone）都提供了便利的ajax函数供使用，但究其本质就是将上述步骤3进行封装，以简化代码开发
Step1详解：（编写HTML和CSS来布局页面）
（该步骤需要有HTML和CSS知识储备，非本文详解内容）
用HTML和CSS先编写个静态页面，页面内有个用户名控件：
我们希望在输入完用户名后，Textbox失去焦点后，就自动将用户名发送到服务器端去验证。
如果是验证结果失败（如该用户名已被注册）则Textbox右侧显示个叉图标。如果验证结果成功，Textbox右侧显示个勾图标。
Step2详解：（编写一个函数初始化页面）
HTML里加载js文件（如my_validation.js）
js文件里需要使BOM的window对象在加载页面时对页面先初始化（类似jQuery的$(document).ready(function(){...}）
- window.onload = initPage;<pre name="code" class="javascript">
- function initPage() {
- document.getElementById("username").onblur = checkUsername; //用户名失去焦点时触发回调函数
- }
- function checkUsername() { //检查用户名的回调函数暂时TBD
- alert("Username lose focus");
- }
输入好用户名后，离开Textbox将弹出警告框
Step3详解：（编写一个函数创建请求对象）
- function createRequest() {
- try {
- request = new XMLHttpRequest();
- } catch (tryMS) {
- try {
- request = new ActiveXObject("Msxml2.XMLHTTP");
- } catch (otherMS) {
- try {
- request = new ActiveXObject("Microsoft.XMLHTTP");
- } catch (failed) {
- request = null;
- }
- }
- }
- return request;
- }
从函数中也可以看出，IE和其他浏览器对请求对象的实现有所不同。甚至低版本IE和IE7以上版本的请求对象的实现亦不同。因此要对IE和非IE区别实现才能全浏览器适用。
更多请参照w3schools：http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp
有了请求对象之后就可以完成步骤2里的检查用户名的回调函数了：
- function checkUsername() {
- request = createRequest(); //new一个请求对象
- if (request == null)
- alert("Unable to create request");
- else {
- var username = escape(document.getElementById("username").value); //获取页面上用户输入的用户名
- var url= "checkName.php?username=" + username; //将用户名作为URL的一部分（因用Get而非Post方式）传给服务器端验证脚本
- request.onreadystatechange = showUsernameStatus; //注册回调函数，服务器端验证完毕后会调用该函数
- request.open("GET", url, true); //用Get而非Post方式发送请求给服务器，true表示异步
- request.send(null); //不需要额外的参数，如用Post方式需要传递参数
- }
- }
- function showUsernameStatus() { //服务器端验证完毕后调用该回调函数，暂时TBD
- alert("Call Web Server success");
- }
服务器端新建验证用户名的PHP脚本checkName.php，如该用户名已注册可返回denied，未注册可返回okay。PHP非本文内容不详解。
Step4详解：（从服务器得到数据）
如果你顺利做到Step3，会发现用户名Textbox失去焦点后，弹了5次”Call Web Server success“警告框。因为服务器收到请求对象后会将请求对象的readyState属性从0~4依次返回，共返回5次。请求对象的各属性详解：
请求对象的各属性请参照：http://www.w3schools.com/dom/dom_http.asp （XMLHttpRequest Object Properties）
readyState属性：0表示连接尚未初始化，1表示连接初始化了，2表示请求正在处理，3表示得到服务器响应，4表示服务器处理完请求。
state属性：服务器返回的一个HTTP状态码，如request.status == 200表示成功，404表示没找到
responseXML属性：服务器返回的XML格式的信息，如果返回的非XML格式的信息该值为空
statusText属性：如有问题，可从这个属性得到问题的描述
responseText属性：服务器返回的文本信息，如果返回的非文本格式信息该值为空
onreadystatechange属性：回调函数
- function showUsernameStatus() { //Step3里创建的回调函数
- if (request.readyState == 4 && request.status == 200) { //请求处理成功处理完毕
- if (request.responseText == "okay") { //Step3里的PHP里验证成功将返回字符串okay
- alert("username OK");
- } else {
- alert("username has been registed");
- }
- }
- }
Step5详解：（在页面上更新显示）
将Step4里的回调函数根据业务需要补充完整：
- function showUsernameStatus() {
- if (request.readyState == 4 && request.status == 200) {
- if (request.responseText == "okay") {
- document.getElementById("username").className = "approved";
- document.getElementById("register").disabled = false;
- } else {
- document.getElementById("username").className = "denied";
- document.getElementById("username").focus();
- document.getElementById("username").select();
- document.getElementById("register").disabled = true;
- }
- }
- }
如果服务器端PHP返回okay，则将用户名Textbox的CSS式样更新为approved。CSS式样中会在Textbox右侧显示勾图片：
如果服务器端PHP返回denied，则将用户名Textbox的CSS式样更新为denied。CSS式样中会在Textbox右侧显示叉图片：
总结：
传统页面只能和服务器同步交互。即发出请求后，在得到服务器响应前页面将呈现“僵死”状态，用户体验很糟糕。得到服务器响应后，需要刷新全页面，速度也比较慢。
而Ajax技术使得页面能够和服务器异步交互。即发出请求后，在得到服务器响应前页面仍能被用户正常使用。得到服务器响应后，也只需要刷新局部页面即可。数据碎片化，速度快。
另外jQuery库中除了提供ajax方法外，还提供get，getJSON，getScript，post，load几个快捷方式，它们最终都将调用ajax方法。