深入理解Ajax

Posted 2021-04-15 同学们听我说

ajax的工作原理：

ajax的工作原理相当于在用户和服务器之间加了一个中间层（ajax引擎），使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，只有确定需要从服务器读取新数据时再由ajax引擎代为向服务器提交请求。

ajax的核心：

有javascript，XMLHTTPRequest，DOM对象组成，通过XMLHTTPRequest对象来向服务器异步请求，从服务器获得数据，然后用javascript来操作DOM来更新页面，这其中最关键的一步就是从服务器获得请求数据

XMLHTTPRequest对象：

AJAX的最大特点是无需刷新页面便可向服务器传输或读写数据，这一特点主要得益于XMLHTTP组件的XMLHTTPRequest对象。

创建AJAX的过程：

XMLHttpRequest是AJAX的基础，用于在后台与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

1，创建XMLHTTPRequest对象：（兼容处理）

var xhr = null;

if(window.XMLHttpRequest) { //前面必须添加window否则报错（不能拿一个不存在的对象作为判断条件）

xhr = new XMLHttpRequest()；

} else {

xhr = new ActiveXObject('Microsoft.XMLHTTP')

}

2，建立对服务器的调用

xhr.open(method, url , async)

method： 请求数据类型（get，post，options，head，put，delete，trace，connect）

get请求：

xhr.send()

post请求：

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //向请求添加HTTP头 xhr.send("fname=Bill&lname=Gates");

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

a. 无法使用缓存文件（更新服务器上的文件或数据库）；

b. 向服务器发送大量数据（POST 没有数据量限制）；

c. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

url：文件在服务器上的位置

async：true（异步）或false（同步）

同步：指发出数据后，等接收到响应以后再发送下一个数据包；

阐述：提交请求 -> 等待服务器处理 -> 处理完毕返回这个期间客户端浏览器不能干任何事情；当前只能做一件事情，其它事情必须等当前的事情完成，才能继续后面的事情

异步：指发出数据后，不用等待接收到响应，接着发送下一个数据包；

阐述：提交请求 -> 等待服务器处理(这时浏览器仍然可以做其他事情) -> 处理完毕；三心二意，同时可以做多件事情；

Ajax发送请求时候分为同步和异步：

异步传输方式是用的最多的也是默认的方式，他避免了服务器检索给用户带来的时间延迟。在异步传输时候，它只是在后面悄悄进行着，用户仍旧可以做他做的事情，不会给用户任何的等待的感觉。在传输的数据量较大的时候，服务器检索的时间就更长了，但是用户却不知道，用户仍旧专注于页面上面的操作，根本就不知道服务器都干了些什么，就给用户良好的体验。

同步传输方式却相反，他就好像是刚刚加载页面的那一刻一样，当发出了同步请求之后，浏览器就在等待，等待服务器检索完毕，返回结果。此时，鼠标会变成等待的形状，提醒我们的用户请求还没有相应，您什么也不能做，我们的用户就什么也干不成，能够做的一件事就是——等待……虽然用户已经习惯了等待整改页面的加载，虽然在ajax里面同步请求的时间一般不会大于整个页面加载的时间，但是你要知道什么都不做只是在那里被动等待是多么痛苦的一件事情。所以，这个同步请求要慎重使用……

说到这里，我们不得不提出疑问，既然异步请求这么好，为啥不用异步请求呢？干脆不要同步请求得了。呵呵，你先别说的太急，假如有这么一个情况，我们这一步请求的结果是下一步请求的前提，只有知道这一步请求的结果用户以后所做的才有意义。那么你说应该使用同步请求还是异步请求呢？显而易见，同步请求吧，为了下一步所作的更有意义，我们亲爱的用户等一下又有何妨？

同步请求和异步请求，各有用处，没有好坏之分，只又用的合适不合适的问题

Ajax优点：

Ajax的优点

1，无刷新更新数据

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

2，异步与服务器通信；

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

3，前端与后端负载平衡；

AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。

并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能

4，基于标准被广泛支持：

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

5，界面与应用分离：

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

Ajax的缺点

1，AJAX干掉了history功能，即是对浏览器机制的破坏：

在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；

用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。

用过Gmail的知道，Gmail下面采用的Ajax技术解决了这个问题，在Gmail下面是可以后退的，

但是，它也并不能改变Ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，

通过创建或使用一个隐藏的IFRAME来重现页面上的变更。

一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，

允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论

2，AJAX的安全问题：

AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。

Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

3，对搜索引擎支持较弱：

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

4，AJAX不能很好支持移动设备：

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

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

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

XMLHttpRequest对象有三个重要的属性：

1，onreadystatechange 状态改变的事件触发器，每个状态改变时都会触发这个事件处理器

2，readyState 从0到4发生变化

0 = 未初始化，

1 = 正在加载/服务器连接已建立，

2 = 已加载/请求已接收，

3 = 交互中/请求处理中，

4 = 请求完成

3，status 服务器的HTTP状态码：

1字头：消息。这一类型的状态码，代表请求已被接受，需要继续处理。

2字头：成功。这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。( 200:'OK' )

3字头：重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。( 304:'Not Modified' )

4字头：请求错误。这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理

5、6字头：服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生

---

面试必问：