我是专注于软件开发和it教育的孙鑫老师，出版过多本计算机图书，包括《java web开发详解》、《vc++深入详解》、《struts 2深入详解》、《rvlet/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公司的咨询顾问jes 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的技术报告可以在
/d/file/titlepic/ppdom是独立于程序设计语言的，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 xmlhtt电压表测量对象p;function createxmlhttprequest() {if(window.activexobject){xmlhttp = new activexobject("microsoft.xmlhttp");}el if(window.xmlhttprequest){xmlhttp = new xmlhttprequest();}}

xmlhttprequest的方法如表1所示。

表1 xmlhttprequest的方法

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

xmlhttprequest的属性如表2所示。

表2 xmlhttprequest的属性

属 性说 明onreadystatechange每个状态改变时都会触发这个事件处理器，通常是一个javascript函数readystate请求的状态。有5个可能的取值：0（未初始化）、1（请求已建立，但还没有发送）、2（请求已发送，但还没有收到响应）、3（正在接收，通常响应中的部分数据已经可用，但还没有完全接收完毕）、4（响应已完成）respontext服务器的响应，表示为文本内容responxml服务器的响应，表示为xml。这个对象可以解析为一个dom对象status服务器的http状态代码，如200对应ok，404对应not found等。仅当readysta小学运动会口号te值为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");}el 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.nd(null);//处理服务器响应的回调函数function handlestatechange() {//判断响应是否完成if(xmlhttp.readystate == 4) {//判断响应是否成功if(xmlhttp.status == 200) {alert(xmlhttp.respontext);}}}

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 chart="gbk"><title>跨源上传</title><script>      var xmlhttp;      function checksupport(){      xmlhttp = window.xdomainrequest ? new xdomainrequest : new xml关于重阳节的传说httprequest;      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.respontext);      }            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.nd(data);      }    中国是什么气候  function displayprogress(info){      document.getelementbyid("state").innerhtml = info;      }</script></head><body><p>上传消息：<input type="text" id="data" placeholder="输入要上传的数据"><button id="ndbutton" onclick="upload();">发送数据</button></p><p>状态：<span id="state">准备</span></p></body></html>