我是著眼于软件合作开发和IT基础教育的孙鑫同学，出版发行过多本计算机系统书刊，主要包括《Java Web合作开发简述》、《VC++深入细致简述》、《Struts 2深入细致简述》、《Servlet/JSP深入细致简述》、《XML、XML Schema、XSLT 2.0和XQuery合作开发简述》、《HTML5、CSS和JavaScript合作开发》、《Vue.js从进阶到两栖作战》、《Java无坏事》、《Vue.js 3.0从进阶到两栖作战》。

讨厌我的该文热烈欢迎高度关注、转贴、文章、雅雷和珍藏，就要时常与我们撷取IT控制技术、C语言的该文和课堂教学音频。目前已正式发布完备的《Vue.js从进阶到两栖作战》和《Java无坏事》课堂教学音频，已经开始正式发布《Vue.js 3.0从进阶到两栖作战》那哥课堂教学音频。

那时自学前端合作开发的同学很多，很多JavaScript库与架构都PCB了Ajax初始化，但新手对Ajax的基本原理并不介绍，引致在自学时敬而远之，有鉴于此，我将以后写的书中的段落正式发布出，协助我们更快的认知和自学前端合作开发。

Ajax概要

Ajax的全名是Asynchronous JavaScript and XML，即触发器JavaScript和XML。Ajax最先是由Adaptive Path公司的进行咨询高级顾问Jesse James Garrett在2005年2月明确提出的，Garrett专门针对写了一则该文来讲诉Ajax而此捷伊Web合作Attichy，该文名叫“Ajax: A New Approach to Web Applications”，有兴趣的听众可以从上面的邮箱处看见这篇该文：

http://www.adaptivepath.com/ideas/essays/archives/000385.php

Garrett将XHTML和CSS、DOM、XML和XSLT、XMLHttpRequest和JavaScript多种不同控制技术的综合性应用领域称作Ajax，换言之，Ajax并不是一类控制技术，它是多种不同控制技术的女团，主要包括：

— 采用XHTML和CSS来呈现出统计数据；

— 采用DOM同时实现实时处理和可视化；

— 采用XML和XSLT同时实现统计数据传输与操作方式；

— 采用XMLHttpRequest同时实现触发器统计数据的推送与转交；

— 采用JavaScript将XHTML、DOM、XML和XMLHttpRequest存取。

实际上，早在Garrett发表该文为Ajax命名以后，Ajax就已经在一些Web系统中应用领域了。Google是最先采用Ajax的公司之一，它在一些产品中采用了Ajax，如Google Suggest、Google Maps和Gmail等，也正是因为Ajax在这些产品中的成功应用领域，极大地鼓舞了合作开发人员在Web系统中采用Ajax的信心，使得Ajax得以迅速推广。

Ajax为用户带来了更快的用户体验。在传统的Web应用领域程序中，用户向服务器推送一个请求，然后等待，服务器对用户请求进行处理，然后返回一个响应。这是一类同步的处理方式，如果服务器处理请求的时间比较长，那么用户将不得不长时间的等待，“呆呆地”盯着空白的浏览器窗口。☺

传统的Web应用领域程序模型和它的同步传输机制分别如图1和图2所示。

图1 传统的Web应用领域程序模型

图2 传统的Web应用领域程序模型（同步传输）

长久以来，我们对这种Web可视化模式已经习以为常，以为Web就是这么用的，直到Ajax的出现。

与传统的Web应用领域程序不同，Ajax采用了触发器可视化机制，从而避免了用户请求-等待-响应这种可视化方式的缺点。Ajax应用领域程序在用户和服务器之间引入了一个中间层——Ajax引擎，它是用JavaScript编写的，在一个隐藏的架构中运行。Ajax引擎负责呈现出用户界面，以及代表用户与服务器进行可视化。Ajax引擎允许用户与服务器端的Web程序之间的可视化触发器地进行，这样用户就无须“呆呆地”看着空白的浏览器窗口和一个沙漏图标，等待服务器返回响应页面了。采用了Ajax的Web应用领域程序的模型和它的触发器传输机制分别如图3和图4所示。

图3 Ajax Web应用领域程序模型

图4 Ajax Web应用领域程序模型（触发器传输）

DOM

DOM是Document Object Model的缩写，即文档对象模型，它是W3C组织推荐的处理XML的标准接口。2004年4月7日，W3C组织正式发布了DOM Level3 Core的推荐标准，有关DOM的控制技术报告可以在

DOM是独立于程序设计语言的，W3C组织以IDL（Interface Definition Language，接口定义语言）的形式定义了DOM中的接口。某种程序语言要实现DOM，需要将DOM接口转换为本语言中的适当结构，为了保证不同语言的不同DOM之间同时实现广泛的兼容，W3C组织在DOM规范的附录部分提供了Java和ECMAScript这两种语言的语言存取。

DOM中的核心概念就是节点。DOM在分析HTML和XML文档时，将组成HTML和XML文档的各个部分（元素、属性、文本、注释等）映射为一个对象，这个对象就叫做节点。在内存中，这些节点形成一棵文档树。整棵树是一个节点，树中的每一个节点也是一棵树（子树），可以说，DOM就是对这棵树的一个对象描述，我们通过访问树中的节点来存取HTML和XML文档的内容。

采用DOM，我们不但可以访问HTML的各个节点，还可以编辑HTML文档的内容，从而创建动态的页面。

例如，HTML页面有一个表格，代码如例1所示。

例1 显示书刊信息的表格

如果我们想要为这个表格动态添加一行书刊信息，在JavaScript中可以采用DOM来同时实现而此功能，代码如例2所示。

例2 采用DOM动态提交书刊信息

提示： DOM和JavaScript并不是一回事。DOM是面向HTML和XML的API，为文档提供了结构化的表示。JavaScript是一类语言，它提供了DOM的同时实现。在JavaScript中，除了可以采用DOM API，还可以采用其他的API。

XMLHttpRequest

XMLHttpRequest对象是整个Ajax控制技术的核心，正是因为有了这个对象，触发器可视化才有可能同时实现。XMLHttpRequest最先是在IE 5中以ActiveX组件的形式同时实现的，它可以直接向服务器传输统计数据，而不需要由页面来推送请求，同时它还可以直接从服务器转交响应，而不需要刷新页面。

IE把XMLHttpRequest同时实现为一个ActiveX对象，其他的浏览器（Firefox、Safari和Opera）则把它同时实现为一个本地的JavaScript对象。因此，为了兼容不同的浏览器，你需要按照例3所示的方式来创建XMLHttpRequest对象。

例3 兼容不同浏览器的XMLHttpRequest对象的创建方式

XMLHttpRequest的方法如表1所示。

表1 XMLHttpRequest的方法

XMLHttpRequest的属性如表2所示。

表2 XMLHttpRequest的属性

我们看一个采用XMLHttpRequest推送请求和转交响应的例子，代码如例4所示。

例4 采用XMLHttpRequest推送请求和转交响应的例子

XMLHttpRequest Level2

XMLHttpRequest API使得Ajax控制技术的同时实现成为了可能，作为XMLHttpRequest的改进版， XMLHttpRequest Level 2在功能上有了很大的改进，主要主要包括：

跨源HTTP请求主要包括一个Origin头部，它为服务器提供HTTP请求的源信息。头部由浏览器保护，不能被应用领域程序代码更改。

采用跨源XMLHttpRequest可以构建基于非同源服务的Web应用领域程序。

1、新增事件

2、检测浏览器对XMLHttpRequest2的支持

3、示例