AJAX 涉及到的7 项技术中，个人认为Javascript、XMLHttpRequest、DOM、XML 比较有用。

1、XMLHttpRequest 对象
XMLHttpRequest 是XMLHTTP 组件的对象，通过这个对象，AJAX 可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时
间。
IE5.0 开始，开发人员可以在Web 页面内部使用XMLHTTP ActiveX 组件扩展自身的功能，不用从当前的Web 页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0 以及NetScape7 则是创建继承XML 的代理类XMLHttpRequest；对于大多数
情况，XMLHttpRequest 对象和XMLHTTP 组件很相似，方法和属性类似，只是部分属性不同。

2、Javascript
Javascript 一直被定位为客户端的脚本语言，应用最多的地方是表单数据的校验。现在，可以通过Javascript 操作XMLHttpRequest，来跟数据库打交道。

3、DOM
DOM（Document Object Model）是提供给HTML 和XML 使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容和可见物。脚本语言通过DOM 才可以跟页面进行交互。Web 开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如，
document 就代表页面对象本身。

4、XML
通过XML（Extensible Markup Language），可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。用XML 表述的数据和文档，可以很容易的让所有程序共享。

二、AJAX 开发框架

这里，我们通过一步步的解析，来形成一个发送和接收XMLHttpRequest 请求的程序框架。AJAX 实质上也是遵循Request/Server 模式，所以这个框架基本的流程也是：对象初始
化􀃆发送请求􀃆服务器接收􀃆服务器返回􀃆客户端接收􀃆修改客户端页面内容。只不过这个过程是异步的。

1、初始化对象并发出XMLHttpRequest 请求
为了让Javascript 可以向服务器发送HTTP 请求，必须使用XMLHttpRequest 对象。使用之前，要先将XMLHttpRequest 对象实例化。之前说过，各个浏览器对这个实例化过程实现不同。IE 以ActiveX 控件的形式提供，而Mozilla 等浏览器则直接以XMLHttpRequest 类的形式提供。为了让编写的程序能够跨浏览器运行，要这样写：

代码:
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

运行:
[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]

有些版本的Mozilla 浏览器处理服务器返回的未包含XML mime-type 头部信息的内容时会出错。因此，要确保返回的内容包含text/xml 信息。

--------------------------------------------------------------------------------
代码：
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

运行:
[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]
--------------------------------------------------------------------------------

2/指定响应处理函数
接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest 对象的onreadystatechange 属性就可以了。比如：

--------------------------------------------------------------------------------
代码：
http_request.onreadystatechange = processRequest;

运行:
[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]
--------------------------------------------------------------------------------

--------------------------------------------------------------------------------
代码：
http_request.onreadystatechange = function() {
};

运行:
[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]
--------------------------------------------------------------------------------

3、发出HTTP 请求
指定响应处理函数之后， 就可以向服务器发出HTTP 请求了。这一步调用XMLHttpRequest 对象的open 和send 方法。

--------------------------------------------------------------------------------
代码：
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);

运行:
[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]
--------------------------------------------------------------------------------

open 的第一个参数是HTTP 请求的方法，为Get、Post 或者Head。
open 的第二个参数是目标URL。基于安全考虑，这个URL 只能是同网域的，否则会提示“没有权限”的错误。这个URL 可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL 处理请求XMLHttpRequest 请求则跟处理普通的HTTP 请求一样，比如JSP 可以用request.getParameter(“”)或request.getAttribute(“”)来取得URL 参数值。
open 的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。
按照顺序，open 调用完毕之后要调用send 方法。send 的参数如果是以Post 方式发出的话，可以是任何想传给服务器的内容。不过，跟form 一样，如果要传文件或者Post 内容给服务器，必须先调用setRequestHeader 方法，修改MIME 类别。如下：

--------------------------------------------------------------------------------
代码：
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

运行:
[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]
--------------------------------------------------------------------------------
这时资料则以查询字符串的形式列出，作为sned 的参数，例如：

--------------------------------------------------------------------------------
代码：
name=value&anothername=othervalue&so=on

运行:
[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]
--------------------------------------------------------------------------------

4、处理服务器返回的信息
在第二步我们已经指定了响应处理函数，这一步，来看看这个响应处理函数都应该做什么。

首先，它要检查XMLHttpRequest 对象的readyState 值，判断请求目前的状态。参照前文的属性表可以知道，readyState 值为4 的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：

--------------------------------------------------------------------------------
代码：
if (http_request.readyState == 4) {
// 信息已经返回，可以开始处理
} else {
// 信息还没有返回，等待
}

运行:
[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]

--------------------------------------------------------------------------------
代码：
if (http_request.status == 200) {
// 页面正常，可以开始处理信息
} else {
// 页面有问题
}

运行:
[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]
--------------------------------------------------------------------------------

XMLHttpRequest 对成功返回的信息有两种处理方式：
responseText：将传回的信息当字符串使用；
responseXML：将传回的信息当XML 文档使用，可以用DOM 处理。

五、一个初步的开发框架

总结上面的步骤，我们整理出一个初步的可用的开发框架，供以后调用；这里，将服务器返回的信息用window.alert 以字符串的形式显示出来：

--------------------------------------------------------------------------------
代码：
<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest 对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME 类别
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE 浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest 对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL 以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
</script>

运行:
[Ctrl+A 全部选择 Ctrl+F 搜索文本 提示：你可先修改代码，再运行]

--------------------------------------------------------------------------------

文摘:http://www.itpub.net/598896.html