Ajax

文章出处：我的博客 我的生活

早上看了一篇文章，是关于Ajax 的，一起分享

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM
组成。编写应用程序时通常有两种：桌面应用程序和Web
应用程序，两者之间的差异我想大家都知道，Ajax就是用来提高用户体验的（为Web
应用程序）。


Ajax 应用程序所用到的基本技术：
•HTML 用于建立 Web
表单并确定应用程序其他部分使用的字段。
•JavaScript 代码是运行 Ajax
应用程序的核心代码，帮助改进与服务器应用程序的通信。


•DHTML 或 Dynamic
HTML，用于动态更新表单。我们将使用 div、span
和其他动态 HTML 元素来标记 HTML。
•文档对象模型 DOM 用于（通过 JavaScript 代码）处理
HTML 结构和（某些情况下）服务器返回的 XML。


第一步是创建XMLHttpRequest 对象：
script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
当然根据浏览器的不同，获取XMLHttpRequest
对象也有所不同
以支持多种浏览器的方式创建 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();



}


第二步是加入一些 JavaScript，得到 XMLHttpRequest
的句柄后，其他的 JavaScript
代码就非常简单了。事实上，我们将使用 JavaScript
代码完成非常基本的任务：
•获取表单数据：JavaScript 代码很容易从 HTML
表单中抽取数据并发送到服务器。

•修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。


•解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM，处理
HTML 表单服务器返回的 XML 数据的结构。


最后以DOM 结束。


以上介绍了 Ajax，对XMLHttpRequest
对象以及如何创建它也有了基本的了解。已经知道与服务器上的
Web 应用程序打交道的是 JavaScript
技术，而不是直接提交给那个应用程序的 HTML 表单。
到底如何使用
XMLHttpRequest。因为上面那段代码非常重要，您编写的每个
Ajax 应用程序都要以某种形式使用它，先看看 Ajax
的基本请求/响应模型是什么样吧。


Ajax 世界中的请求/响应
首先当然是：发出请求
已经创建了一个XMLHttpRequest 对象，需要一个 Web
页面能够调用的 JavaScript
方法（比如当用户输入文本或者从菜单中选择一项时）。接下来就是在所有
Ajax 应用程序中基本都雷同的流程：
1.从 Web 表单中获取需要的数据。
2.建立要连接的 URL。
3.打开到服务器的连接。
4.设置服务器在完成后要运行的函数。
5.发送请求。
function callServer() {
// 从 Web 表单中获取需要的数据
var city = document.getElementById("city").value;
// 如果没有数据就返回
if ((city == null) || (city == "")) return;
// 建立要连接的 URL
var url = "/scripts/getZipCode.do?city=" + escape(city) ;
// 打开到服务器的连接
xmlHttp.open("GET", url, true);
// 设置服务器在完成后要运行的函数
xmlHttp.onreadystatechange = updatePage;
// 发送请求
xmlHttp.send(null);



}


然后是处理响应：
function updatePage() {
// xmlHttp.readyState 属性的值等于4，即就绪状态
if (xmlHttp.readyState == 4) {
//服务器将把响应填充到 xmlHttp.responseText 属性中
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}


}


还有一个是如何连接Web 表单的，很简单，例如：
<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5"
/></p>
</form>