喜好我的文章欢迎关注、转发、评论、点赞和收藏，我会常常与大家分享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”，有兴趣的读者可以从下面的网址处看到这篇文章：

孙鑫jsp一文看懂Ajax进修前端开辟的同窗弗成错过 Bootstrap

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的方法

方 法

说 明

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所示。

表2 XMLHttpRequest的属性

属 性

说 明

onreadystatechange

每个状态改变时都会触发这个事宜处理器，常日是一个JavaScript函数

readyState

要求的状态。
有5个可能的取值：0（未初始化）、1（要求已建立，但还没有发送）、2（要求已发送，但还没有收到相应）、3（正在吸收，常日相应中的部分数据已经可用，但还没有完备吸收完毕）、4（相应已完成）

responseText

做事器的相应，表示为文本内容

responseXML

做事器的相应，表示为XML。
这个工具可以解析为一个DOM工具

status

做事器的HTTP状态代码，如200对应OK，404对应Not Found等。
仅当readyState值为3或4时，该属性才可用

statusText

HTTP状态代码的描述文本，如OK、Not Found等。
仅当readyState值为3或4时，该属性才可用

statusText

HTTP状态代码的描述文本，如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 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、新增事宜

事宜名称

解释

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.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>