Ajax总结——中度解析

简介

Ajax（Asynchronous JavaScript And XML）是一种技术，准确一点的说它是融合了过去已经有的技术的一种技术（优点绕），即它需要XML和JavaScript来配合，从而实现浏览器与服务器无需刷新页面的通信。其核心是XMLHttpRequest对象。我们先从它的功能上有个印象就好，即它是干什么用的，接着再对它进行分析。

原理

异步和同步的理解

关于异步和同步的原理，查的资料涉及到了传输的数据单元，传输通道，时钟等。我都不明白，所以就不在这瞎说了。这里我们只做简单的概念上的理解，所谓的同步就是两个人一起做一件事情，整件没做完是不许做其他事的。在网页通信上就是说，浏览器发送消息给服务器，一定要等到服务器返回了才能接着做其他事情。而异步呢就是两个人一起做一件事情，我做了一部分可以去做其他事情，而不用死等。这里，如果你有学过计算机组成原理的话，流水线技术所做的事情和异步传输实际上是一致的，就是消除等待，提高效率。

在我门的生活中的哪些事情反应了同步和异步呢？我觉得打电话和微信这两种通信方式是比较典型的，看图：






仔细看他们的差别，在时间上我们通电话的时候是不能离开的。这时候你是没办法干别的事请的直到通话结束（你要说你一心二用的话，只能说同学咱不钻牛角尖好吧）。但是微信则不会，你9：00发送的消息之后，你就干别的了，知道他的微信消息过来给你提示，你再回复他。这里你干别的事情是不会影响通信的。到此应该理解的差不多了吧！再看传统的网页通信过程和应用了Ajax之后的区别，如下图。

核心

从上面看大概了解了异步通信，那么Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据，也就是说Ajax的核心是XMLHttpRequest对象。关于这个对象的具体属性和方法这里不一一做介绍了，就看其中几个。然后了解一下这个对象的工作原理。

readyState属性

　　当XMLHttpRequest对象把一个HTTP请求发送到服务器到接收返回的信息，将经历若干种状态。 readyState属性描述对象的当前状态。如下表：

onreadystatechange事件

无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值向该方法指示无论readyState值何时发生改变，该对象都将激活。

open()方法

初始化一个XMLHttpRequest对象，open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1。

注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。　

send()方法

在通过调用open()方法准备好一个请求之后，调用send()方法将请求发送的服务器。需要注意的是仅当readyState值为1时，send()方法才可以被调用；否则的话，XMLHttpRequest对象将引发一个异常。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2。

这里当收到服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3。当请求完成接收时，它把readyState设置为4。

建议：对这里的工作原理呢可以画一张时序图来看看，还是有助于理解这个对象的执行原理的。自己动个手把，这个图我就不上了。

优缺点

优点

①最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

②使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

③可以把以前一些服务器负担的工作转嫁到客户端。ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

缺点

①ajax干掉了back按钮，即对浏览器后退机制的破坏。

②对搜索引擎的支持比较弱。

③破坏异常处理机制

总结：Ajax技术的应用最直接好处是提高了用户体验，但是这种用户体验的提高并不是通过去解决数据在网络中传输的延迟等问题，而是掩盖了等待的过程。在等待这个过程但中解放了用户，给了用户自由。