我是孙鑫，专注于软件开发和IT教育的老师。我已经出版了许多计算机书籍。包括Java Web开发、VC++、Struts 2、Servlet/JSP、XML、XML Sche***、XSLT 2.0和XQuery开发、HTML5、CSS和JavaScript开发、Vue.js从入门到实用，Java无难事，Java

如果你喜欢我的文章，请关注、转发、评论、点赞、收藏。我会经常和大家分享IT技术和编程语言的文章和教学视频。目前，《Vue.js从初学者到实战》、《Java无难事》完整教学视频已经发布，《Vue.js 3.0从初学者到实战》教学视频正在发布中。

现在有很多学生在学习前端开发，很多JavaScript库和框架都封装了Ajax调用。但是初学者不知道Ajax的原理，导致学习一知半解。为此，我将前一本书中的章节发表出来，帮助大家更好地理解和学习前端开发。

Ajax简介

Ajax的全称是异步JavaScript和XML，即异步JavaScript和XML。Ajax是由Adaptive Path公司的顾问Jesse James Garrett于2005年2月首次提出的。Garrett专门写了一篇关于Ajax的文章，Ajax是一种新的Web应用程序方法。感兴趣的读者可以从以下网址看到这篇文章:

http://*** . adaptive path . com/ideas/essays/archives/000385 . PHP

加勒特称XHTML和CSS，DOM，XML和XSLT，XMLHttpRequest和JavaScript Ajax的综合应用。换句话说，Ajax不是一种技术，而是多种技术的组合，包括:

使用XHTML和CSS呈现数据；

使用DOM实现动态显示和交互；

使用XML和XSLT实现数据交换和操作；

使用XMLHttpRequest发送和接收异步数据；

使用JavaScript绑定XHTML、DOM、XML和XMLHttpRequest。

实际上，早在Garrett发表他的文章Ajax之前，Ajax就已经在一些Web系统中得到应用。谷歌是首批采用Ajax的公司之一。它在一些产品中使用Ajax，如Google Suggest、Google Maps和G***il等。正是因为Ajax在这些产品中的成功应用，极大地鼓舞了开发者在Web系统中使用Ajax的信心，Ajax得到了快速推广。

Ajax给用户带来了更好的用户体验。在传统的Web应用程序中，用户向服务器发送请求，然后等待，服务器处理用户请求，然后返回响应。这是一种同步处理方法。如果服务器处理请求的时间很长，用户就要等很长时间，盯着空白色的浏览器窗口。?

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

传统的Web应用模型及其同步传输机制分别如图1和图2所示。

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

图1传统Web应用程序模型

图2传统Web应用程序模型(同步传输)

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

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

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

图3 Ajax Web应用程序模型

图3 Ajax Web应用程序模型

图4 Ajax Web应用程序模型(异步传输)

数字正射影像图

它是DOM文档对象模型的缩写，即文档对象模型，是W3C推荐的处理XML的标准接口。2004年4月7日，W3C发布了DOM Level3 Core推荐标准。有关DOM的技术报告可在
http://***.w3.org/dom/domtr.html.网站查看

DOM独立于编程语言，W3C以IDL(接口定义语言)的形式定义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对象。因此，为了兼容不同的浏览器，您需要创建XMLHttpRequest对象，如示例3所示。

示例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方法

方 法说 明abort()终止当前请求getAllResponseHeaders()以字符串的形式返回所有的响应报头getResponseHeader(String header)获取指定的响应报头的值open(String method，String uri)建立对服务器的调用。method参数可以是GET、POST或HEAD。url参数可以是相对URL或绝对URL。该方法还有三个可选的参数send(content)向服务器发送请求setRequestHeader(String header, String value)设置请求的报头信息。在设置任何报头之前，必须先调用open()方法

XMLHttpRequest的属性如表2所示。

表xmlhttprequest的2个属性

属 性说 明onreadystatechange每个状态改变时都会触发这个事件处理器，通常是一个JavaScript函数readyState请求的状态。有5个可能的取值：0（未初始化）、1（请求已建立，但还没有发送）、2（请求已发送，但还没有收到响应）、3（正在接收，通常响应中的部分数据已经可用，但还没有完全接收完毕）、4（响应已完成）responseText服务器的响应，表示为文本内容responseXML服务器的响应，表示为XML。这个对象可以解析为一个DOM对象status服务器的HTTP状态代码，如200对应OK，404对应Not Found等。仅当readyState值为3或4时，该属性才可用statusTextHTTP状态代码的描述文本，如OK、Not Found等。仅当readyState值为3或4时，该属性才可用statusTextHTTP状态代码的描述文本，如OK、Not Found等。仅当readyState值为3或4时，该属性才可用

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

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

var xmlHttp;if(window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();}var e***il = document.getElementById("e***il");var url = validate?e***il=" + escape(e***il.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级别2

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

跨源XMLHttpRequest进度事件（Progress event）

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

跨源XMLHttpRequest可用于构建基于异构服务的Web应用程序。

1.添加事件。

事件名称

说明

loadstart当请求开始progress在发送和加载数据期间abort请求已被终止。如调用abort()方法error当请求已失败load当请求已成功完成timeout在请求完成之前指定的超时值到了loadend当请求已完成（无论成功或失败）

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.XDo***inRequest ? new XDo***inRequest : 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>