我是专注于软件开发和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所示。

图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的技术报告可以在
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><tbody id="booksBody">    <tr>      <th>书名</th>      <th>作者</th>    </tr>    <tr>      <td>《Java无难事》</td>      <td>孙鑫</td>    </tr>  </tbody></table>

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

例2 使用DOM动态提交图书信息

<script type="text/javascript">  var row = document.createElement("tr");cell = createCellWithText("《Vue.js 3.0从入门到精通》");//将单元格作为子节点添加到<tr>元素中row.appendChild(cell);cell = createCellWithText("孙鑫");row.appendChild(cell);//将新创建的表行添加到<tbody>元素中document.getElementById("booksBody").appendChild(row);//定义创建单元格的函数function createCellWithText(text){var cell = document.createElement("td");var textNode = document.createTextNode(text);cell.appendChild(textNode);return cell;}</script>

提示： 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对象的创建方式

var xmlHttp;function createXMLHttpRequest() {if(window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}}

XMLHttpRequest的方法如表1所示。

表1 XMLHttpRequest的方法

XMLHttpRequest的属性如表2所示。

表2 XMLHttpRequest的属性

我们看一个使用XMLHttpRequest发送请求和接收响应的例子，代码如例4所示。

例4 使用XMLHttpRequest发送请求和接收响应的例子

var xmlHttp;if(window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();}var email = document.getElementById("email");var url = validate?email=" + escape(email.value);xmlHttp.open("GET", url);xmlHttp.onreadystatechange=handleStateChange;xmlHttp.send(null);//处理服务器响应的回调函数function handleStateChange() {//判断响应是否完成if(xmlHttp.readyState == 4) {//判断响应是否成功if(xmlHttp.status == 200) {alert(xmlHttp.responseText);}}}

XMLHttpRequest Level2

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

跨源XMLHttpRequest进度事件（Progress event）

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

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

1、新增事件

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

var xhr = new XMLHttpRequest() ;if (typeof xhr.withCredentials === undefined){// 您的浏览器不支持跨源的XMLHttpRequest}

3、示例

<!DOCTYPE html><html><head><meta charset="GBK"><title>跨源上传</title><script>      var xmlHttp;      function checkSupport(){      xmlHttp = window.XDomainRequest ? new XDomainRequest : new XMLHttpRequest;      if(typeof xmlHttp.withCredentials == undefined){      alert("您的浏览器不支持跨源的XMLHttpReqeust");      }      }      checkSupport();      function upload(){      xmlHttp.onprogress = function(e){      var radio = e.loaded / e.total;      displayProgress(radio + "% 上传");      }            xmlHttp.onload = function(e){      displayProgress(xmlHttp.responseText);      }            xmlHttp.onerror = function(e){      displayProgress("出错了");      }      var targetLocation = "http://example.com:8080/upload.jsp";      var data = document.getElementById("data").value;      xmlHttp.open("POST", targetLocation, true);      xmlHttp.send(data);      }      function displayProgress(info){      document.getElementById("state").innerHTML = info;      }</script></head><body><p>上传消息：<input type="text" id="data" placeholder="输入要上传的数据"><button id="sendButton" onclick="upload();">发送数据</button></p><p>状态：<span id="state">准备</span></p></body></html>