我是专注于软件开发和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技术、编程语言的文章和教学视频。目前已发布完整的《Vue.js从入门到实战》和《Java无难事》教学视频，正在发布《Vue.js 3.0从入门到实战》一书教学视频。

现在学习前端开发的同学很多，很多JavaScript库与框架都封装了Ajax调用，但初学者对于Ajax的原理并不了解，导致在学习时一知半解，为此，我将之前写的书中的章节发布出来，帮助大家更好的理解和学习前端开发。

Ajax简介

Ajax的全称是Asynchronous JavaScript and XML，即异步JavaScript和XML。Ajax最早是由Adaptive Path公司的咨询顾问Jesse James Garrett在2005年2月提出的，Garrett专门写了一篇文章来讲述Ajax这一新的Web开发方式，文章名为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所示。

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

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

DOM

DOM是Document Object Model的缩写，即文档对象模型，它是W3C组织推荐的处理XML的标准接口。2004年4月7日，W3C组织发布了DOM Level3 Core的推荐标准，有关DOM的技术报告可以在http://www.w3.org/DOM/DOMTR.html上查看。

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 显示图书信息的表格

<table><tbodyid="booksBody"><tr><th>书名