本文内容
虽然现在的 Ajax 框架很多，直接用就好了，但还是有必要了解一下它内部的实现机制。
- 促使 Ajax 产生的 Web 技术演化
- 隐藏帧技术
- 隐藏 iframe 技术
促使 Ajax 产生的 Web 技术演化
- 超文本和 URI
- HTML
- JavaScript
- frame
- 隐藏帧技术（frameset）
- DHTML 和 DOM
- 隐藏 iframe 技术
- XMLHttp 和 XMLHttpRequest
超文本和 URI，通俗一点就是文本和链接，只是为了创建一个彼此关联的信息网，毕竟，当初它的产生只是了科技人员之间交流最新的科研成果。因此，第一版的 HTML 完全不能构建交互性很强的 Web 应用程序。
那么，接下来我们要做什么？显然，要增强 HTML 信息的格式化和显示能力。于是有了 JavaScript。开发人员第一次能够干预页面与用户之间的交互。在静态页面时代，没必要这样做，也做不了啊。没有 JavaScript，一切都要靠服务器端，即便是一些再简单不过的工作，比如验证用户输入。
接下来——帧（frame）。帧的理念是使一个页面能够分成几个独立的文档。而 HTML 最初版本是将每个文档都看作是独立的，直到 HTML 4.0 版，帧还没有被正式引入。试想，如果你在一个页面里嵌入一个 frame，而这个 frame 指向另一个页面，那么，当用户操作 frame 里边的页面给服务器，并获得服务器的响应后，将会发的内容嵌入到之前的页面。这就是一个异步啊——这还仅仅是个开始而已，离 Ajax 还远。
但有 frame 貌似还不够，要是能将 frame 组织起来就更好了。因此，隐藏帧技术是客户端/服务器端通信的一种有效工具。隐藏帧技术配置一个帧集（frameset）。隐藏帧技术是 Web 应用系统第一个异步请求/响应模型。然而这只是第一个 Ajax 通信模型，另一个技术的发展已经不远了。
直到1996年前后，Web 的主流还是静态页面。尽管 JavaScript 和隐藏帧技术能够使用户交互更具活力，但除了重新加载页面外，我们还没有改变页面内容显示的方法——DHTML 和 DOM。DHTML 使得开发人员能通过 JavaScript 修改已经载入页面的任何部分。将 DHTML 和隐藏帧技术结合起来，意味着可以随时根据服务器的信息来更新页面的任何部分，这才是Web开发一次真正的范型转变。与 DHTML 只追求修改页面的某个部分不同，DOM 的目标更加宏伟：为整个页面提供一个标准结构，对该结构的操作将使得修改 DHTML 风格的页面成为可能——这是向 Ajax 发展的下一个重要步骤。
隐藏帧技术实现了异步请求/响应，但它存在不足：必须提前计划，为可预见的隐藏帧设置帧集。1997年，<iframe/> 元素作为 HTML 4.0 官方标注的一部分，这是 Web 进化的另一个重要步骤。开发人员可以在页面的任何地方放置隐形的 iframe，更加灵活，不再定义帧集 frameset。这就是新一代的隐藏帧技术——隐藏 iframe 技术。
现在 HTML 和 DOM 有了，JavaScript 也有了，而且能够通过 JavaScript 在客户端操作 HTML；我们还有隐藏 iframe 技术（是这个异步模型，而不是隐藏 iframe 技术本身），那么还缺少什么？其实，也不缺了，只是麻烦了点而已。即便像你我都能看出其中的端倪，那微软的开发人员就更不用说了——XMLHttp。这个工具在2001年以 ActiveX 对象的形式引入。它是一个能够在 JavaScript 中控制特定的 HTTP 请求。可以独立与页面的载入/重载周期，使用纯 JavaScript 通过程序访问服务器，而不再需要使用隐藏帧或隐藏 iframe 技术。随着使用者越来越多，Mozilla 的开发人员开始移植 XMLHttp，为了避免使用 ActiveX，将它的主要方法和属性都复制到他们自己浏览器的 XMLHttpRequest 对象。现在越来越多的浏览器都现实 XMLHttpRequest 对象。
隐藏帧技术
例子1
本例演示隐藏帧技术实现的最简单的异步刷新。
您的浏览器无法处理框架！
说明：
上面代码是 W3school 给出的占线测试的一个。你会发现，当你改变一个 frame 的链接时，无论是手动，也就是直接改变链接，再点击“测试”，还是通过 JavaScript。整个页面都不会刷新，而只刷新框架内部。
- 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
- 为不支持框架的浏览器添加 <noframes> 标签。
- 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
例子2
本例演示隐藏帧技术。向服务器端发送 GET 请求。
新建页面 main.htm，代码如下：
新建页面 display.htm，代码如下：
1:
2: function requestEmpInfo() { 3: var obj = document.getElementById("txt_empno"); 4: if (obj) top.frames["hiddenFrame"].location = "search.aspx?id=" + obj.value;
5: };
6:</ script >
1:
2:
3:
4: function getEmpInfo(info) { 5: var obj = document.getElementById("div_empInfo"); 6: if (obj) obj.innerHTML = info;
7: }
8:</ script >
客户ID：
说明：
- requestEmpInfo() 函数是根据文本框中的值，创建链接查询字符串，然后赋值给隐藏帧。"top" 对象可以获取浏览器顶级窗口，该对象返回一个 frame 数组。每个帧都是一个窗口对象，可以对其位置进行设置。
- getEmpInfo() 函数是用来显示从隐藏帧获得检索到的员工信息。
新建页面 search.aspx，代码如下：
<%@ Page Language="C#" %>
<%@ Import Namespace="HiddenFrame" %>
<%@ Import Namespace="System.Data" %>
1:
2: window.onload = function() { 3: var obj = document.getElementById("div_empHiddenInfo"); 4: if (obj) top.frames["displayFrame"].getEmpInfo(obj.innerHTML);
5: };
6:</ script >
1:
2:
3:
4: protected void Page_Load(object sender, EventArgs e)
5: { 6: if (!IsPostBack)
7: { 8: string id = Request.QueryString["id"].ToString();
9: DataTable dt = HiddenFrame.DS.CreateEMPDataSource();
10: DataRow[] dr = dt.Select("empno=" + id); 11:
12: if (dr.Length > 0)
13: { 14: this.div_empHiddenInfo.InnerHtml = "员工ID：" + dr[0]["EMPNO"].ToString() + "" +
15: "员工姓名：" + dr[0]["ENAME"].ToString() + "" +
16: "职位：" + dr[0]["JOB"].ToString() + "" +
17: "生日：" + dr[0]["HIREDATE"].ToString() + "" +
18: "薪水：" + dr[0]["SAL"].ToString() + "" +
19: "部门：" + dr[0]["DEPTNO"].ToString() + "";
20: }
21: else
22: { 23: this.div_empHiddenInfo.InnerHtml = "没有检索到员工编号为 <'" + id + "'> 的员工。";
24: }
25: }
26: }
27:</ script >
自定义 DS 类如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
namespace HiddenFrame
{ public class DS
{ public static DataTable CreateEMPDataSource()
{ DataSet ds = new DataSet();
ds.ReadXml(HttpRuntime.AppDomainAppPath + "\\" + "emp.xml");
return ds.Tables[0];
}
}
}
自定义 XML 文件作为“数据库”：
7369
SMITH
CLERK
7902
1980-12-17
800
20
……
本例运行界面如图所示。
本节旨在说明它的异步方式，至于如何使用，就不必了，毕竟隐藏帧技术现在已经基本不再使用。在这个问题上，估计做 UI 的人体会多些。我在原来公司时，最初的页面用得是 frameset，后来客户要求界面改版，新来的 UI 妹妹改用了 iframe，她说，用脚本控制页面自适应大小时，frameset 可能有问题，没有 iframe 好控制。下面说明隐藏 iframe 技术。
隐藏 iframe 技术
新建 main.htm 页面，代码如下：
1:
2: function requestEmpInfo() { 3: var obj = document.getElementById("txt_empno"); 4: if (obj) top.frames["hiddenFrame"].location = "search.aspx?id=" + obj.value;
5: };
6:</ script >
1:
2:
3:
4: function getEmpInfo(info) { 5: var obj = document.getElementById("div_empInfo"); 6: if (obj) obj.innerHTML = info;
7: }
8:</ script >
客户ID：
新建 search.aspx 页面，代码如下：
代码与例子 2 的 search.aspx 页面相同。
说明：
- 你当然可以利用 JavaScrip 动态创建 iframe。
- 本例与例子 2 功能完全相同，只是少了一个页面。但是方便多了。