AJAX工作原理

Ajax 由 HTML、JavaScript 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。

Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写。

 Ajax 应用程序所用到的基本技术：

HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。

JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。

DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。

文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

 1. 创建新的 XMLHttpRequest 对象

<script　language="javascript"　type="text/javascript"> 
var　xmlHttp　=　new　XMLHttpRequest(); 
</script>

2.用 JavaScript 代码捕获和设置字段值

//Get the value of the "phone" field and stuff it in a variable called phone 
var　phone　=　document.getElementById("phone").value; 
//　Set　some　values　on　a　form　using　an　array　called　response 
document.getElementById("order").value　=　response[0]; 
document.getElementById("address").value　=　response[1];

以 DOM 结束

最后还有 DOM，即文档对象模型。可能对有些读者来说 DOM 有点儿令人生畏，HTML 设计者很少使用它，即使 JavaScript 程序员也不大用到它，除非要完成某项高端编程任务。大量使用 DOM 的是 复杂的 Java 和 C/C++ 程序，这可能就是 DOM 被认为难以学习的原因。

幸运的是，在 JavaScript 技术中使用 DOM 很容易，也非常直观。现在，按照常规也许应该说明如何使用 DOM，或者至少要给出一些示例代码，但这样做也可能误导您。即使不理会 DOM，仍然能深入地探讨 Ajax，这也是我准备采用的方法。以后的文章将再次讨论 DOM，现在只要知道可能需要 DOM 就可以了。当需要在 JavaScript 代码和服务器之间传递 XML 和改变 HTML 表单的时候，我们再深入研究 DOM。没有它也能做一些有趣的工作，因此现在就把 DOM 放到一边吧。

获取 Request 对象

有了上面的基础知识后，我们来看看一些具体的例子。XMLHttpRequest 是 Ajax 应用程序的核心，而且对很多读者来说可能还比较陌生，我们就从这里开始吧。从 清单 1 可以看出，创建和使用这个对象非常简单，不是吗？等一等。

还记得几年前的那些讨厌的浏览器战争吗？没有一样东西在不同的浏览器上得到同样的结果。不管您是否相信，这些战争仍然在继续，虽然规模较小。但令人奇怪的是，XMLHttpRequest 成了这场战争的牺牲品之一。因此获得 XMLHttpRequest 对象可能需要采用不同的方法。下面我将详细地进行解释。

使用 Microsoft 浏览器

Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML（可以通过 参考资料 进一步了解 MSXML）。因此如果编写的 Ajax 应用程序要和 Internet Explorer 打交道，那么必须用一种特殊的方式创建对象。

但并不是这么简单。根据 Internet Explorer 中安装的 JavaScript 技术版本不同，MSXML 实际上有两种不同的版本，因此必须对这两种情况分别编写代码。3，其中的代码在 Microsoft 浏览器上创建了一个 XMLHttpRequest

3. 在 Microsoft 浏览器上创建 XMLHttpRequest 对象

var xmlHttp = false; try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } }

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

var xmlHttp = new XMLHttpRequest object;

结合起来

关键是要支持所有 浏览器。谁愿意编写一个只能用于 Internet Explorer 或者非 Microsoft 浏览器的应用程序呢？或者更糟，要编写一个应用程序两次？当然不！因此代码要同时支持 Internet Explorer 和非 Microsoft 浏览器。4 显示了这样的代码。

4. 以支持多种浏览器的方式创建 XMLHttpRequest 对象

/*　Create　a　new　XMLHttpRequest　object　to　talk　to　the　Web　server　*/ 
var　xmlHttp　=　false; 
/*@cc_on　@*/ 
/*@if　(@_jscript_version　>=　5) 
try　{ 
　 xmlHttp　=　new　ActiveXObject("Msxml2.XMLHTTP"); 
}　catch　(e)　{ 
　 try　{ 
　　　 xmlHttp　=　new　ActiveXObject("Microsoft.XMLHTTP"); 
　 }　catch　(e2)　{ 
　　　 xmlHttp　=　false; 
　 } 
} 
@end　@*/ 
if　(!xmlHttp　&&　typeof　XMLHttpRequest　!=　‘undefined‘)　{ 
　 xmlHttp　=　new　XMLHttpRequest(); 
}

发出请求

您已经有了一个崭新的 XMLHttpRequest 对象，现在让它干点活儿吧。首先需要一个 Web 页面能够调用的 JavaScript 方法（比如当用户输入文本或者从菜单中选择一项时）。接下来就是在所有 Ajax 应用程序中基本都雷同的流程：

从 Web 表单中获取需要的数据。

建立要连接的 URL。

打开到服务器的连接。

设置服务器在完成后要运行的函数。

发送请求。

5 中的示例 Ajax 方法就是按照这个顺序组织的：

5. 发出 Ajax 请求

function　callServer()　{ 
　 //　Get　the　city　and　state　from　the　web　form 
　 var　city　=　document.getElementById("city").value; 
　 var　state　=　document.getElementById("state").value; 
　 //　Only　go　on　if　there　are　values　for　both　fields 
　 if　((city　==　null)　||　(city　==　""))　return; 
　 if　((state　==　null)　||　(state　==　""))　return; 
　 //　Build　the　URL　to　connect　to 
　 var　url　=　"/scripts/getZipCode.php?city="　+　escape(city)　+　"&state="　+　escape(state); 
　 //　Open　a　connection　to　the　server 
　 xmlHttp.open("GET",　url,　true); 
　 //　Setup　a　function　for　the　server　to　run　when　it‘s　done 
　 xmlHttp.onreadystatechange　=　updatePage; 
　 //　Send　the　request 
　 xmlHttp.send(null); 
}

处理响应

现在要面对服务器的响应了。现在只要知道两点：

什么也不要做，直到 xmlHttp.readyState 属性的值等于 4。

服务器将把响应填充到 xmlHttp.responseText 属性中。

其中的第一点，即就绪状态，将在下一篇文章中详细讨论，您将进一步了解 HTTP 请求的阶段，可能比您设想的还多。现在只要检查一个特定的值（4）就可以了（下一期文章中还有更多的值要介绍）。第二点，使用 xmlHttp.responseText 属性获得服务器的响应，这很简单。清单 6 中的示例方法可供服务器根据 清单 5 中发送的数据调用。

6. 处理服务器响应

function　updatePage()　{ 
　 if　(xmlHttp.readyState　==　4)　{ 
　　　 var　response　=　xmlHttp.responseText; 
　　　 document.getElementById("zipCode").value　=　response; 
　 } 
}

7. 启动一个 Ajax 过程

<form> 
<p>City:　<input　type="text"　name="city"　id="city"　size="25"　 
　　　　　　 onChange="callServer();"　/></p> 
<p>State:　<input　type="text"　name="state"　id="state"　size="25"　 
　　　　　　 onChange="callServer();"　/></p> 
<p>Zip　Code:　<input　type="text"　name="zipCode"　id="city"　size="5"　/></p> 
</form>

如果感觉这像是一段相当普通的代码，那就对了，正是如此！当用户在 city 或 state 字段中输入新的值时，callServer() 方法就被触发，于是 Ajax 开始运行了。有点儿明白怎么回事了吧？好，就是如此！

AJAX工作原理

原文：http://blog.csdn.net/ddgweb/article/details/18506675