AJAX基础详细介绍

简介

是什么

Asynchronous JavaScript and XML——异步JavaScript和XML

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

举个例子，我们去饭店吃饭，然后点了一桌子菜，后来发现其中有一道菜太咸了，因此我们只需要让服务员端回去给厨师重新做这一道菜再拿回来就行了。

在这个例子中的人、物对比Ajax的关系如下表：

当我们发现有一道菜太咸了，不需要让厨师把所有的菜重新做一遍，只要让服务员拿这一道菜回去给厨师重做这一操作就相当于让ajax对象向后端请求那一小部分数据再拿回来更新页面而无需刷新整个页面。

提出背景

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

发起请求的方式一般是<input type="submit">

在上世纪90年代，几乎所有的网站都由HTML页面实现，服务器处理每一个用户请求都需要重新加载网页。形式是怎样的呢？就比如说你在浏览器上登录自己的微博账号，填完了表单，点击登录按钮，一次"完整"的HTTP请求就此触发，服务器发现你的登录密码不对头，立马把网页原原本本的返回给你，在用户看来呢，就是一次重新加载的过程！用户体验极差！而且这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

特点

• 不是编程语言，而是一种使用现有标准的新方法
• 无需加载整个界面，可与服务器交换数据，更新部分网页
• 不需要浏览器插件，但需要用户允许js在浏览器上运行

为什么需要Ajax

**在没有使用Ajax情况下：**Web站点强制用户进入提交/等待/重新显示（重新加载整个网页），对于服务器加大了流量，对于用户每一次与服务器传递数据都会重新加载整个网页。
**使用Ajax情况下：**通过在后台与服务器进行少量数据交换，AJAX 使用JavaScript和DHTML立即更新UI（部分刷新），这对用户有利，因为它不会干扰或中断他或她正在使用的网页。

小提示：

DHTML 是一种创建动态和交互 WEB 站点的技术集简单说就是HTML、CSS和 JavaScript 的组合
JavaScript 不是唯一使用 AJAX 编程的客户端脚本语言; VBScript 和其他语言都有这种功能，但 JavaScript 是最受欢迎的。

工作原理

包含的技术

AJAX是基于现有的Internet标准，并且联合使用它们：

• XMLHttpRequest 对象 (异步的与服务器交换数据)
• JavaScript/DOM (信息显示/交互)
• CSS (给数据定义样式)
• XML (作为转换数据的格式)

原理简述

通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

原理详述

Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。

并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎，用户操作起来也就感觉更加流畅了。

浏览器普通交互方式：

浏览器的Ajax的交互方式：

同步与异步

异步传输是面向字符的传输，它的单位是字符；

同步传输是面向比特的传输，它的单位是帧，它传输的时候要求接受方和发送方的时钟是保持一致的。

同步的话，必须这个操作完了才会执行下一步，在等待期间浏览器会挂起不能执行任何接下来的js代码；

异步则是【告诉】浏览器去做，【告诉】是一瞬间的事情，然后就继续执行下一步了，等到结果返回来了，浏览器会通知js执行相应的回调。

优点和缺点

优点

1.无刷新更新数据。

AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

2.异步与服务器通信。

AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

3.前端和后端负载平衡。

AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

4.基于标准被广泛支持。

AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

5.界面与应用分离。

Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

缺点

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。

在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。

2.AJAX的安全问题。

简单版：ajax暴露了浏览器与服务器交互的细节。

AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

3.对搜索引擎支持较弱。

对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

4.破坏程序的异常处理机制。

至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。

5.违背URL和资源定位的初衷。

例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

6.AJAX不能很好支持移动设备。

一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。

7.客户端过肥，太多客户端代码造成开发上的成本。

编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。