Ajax的工做原理以及优势、缺点 （汇总）

最近空闲时间，有朋友问我关于Ajax的工做原理，在这里我结合本身的工做经验和网上大佬的经验作一个总结，若有不足，请各位业内大佬指正

在咱们了解Ajax以前，咱们先来了解一下Javascript的执行原理：

Javascript语言的执行环境是"单线程"（single thread），所谓的“单线程”（参考https://blog.csdn.net/baidu_24024601/article/details/51861792）也就是说，就是指一次只能完成一件任务。若是有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。了解了Javascript的执行原理之后，咱们再来看看Ajax。

一、什么是Ajax？

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种建立交互式网页应用的网页开发技术，经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。 

二、为何要使用Ajax?

这儿咱们能够说到Ajax的优势之一：它能够在不刷新整个页面的状况下与服务器通讯保持原有页面状态，说的简单易懂一点。举个例子：在咱们浏览网页的时候会有两种状况

1.点击连接，页面白屏，等待跳转到另外一个页面。

2.页面不刷新，局部出现新内容得到更好的用户体验。

三、工做原理：

咱们先经过一张图片来大体的了解一下Ajax向服务器请求数据的过程。

有人会问，图片中的“XHR”是什么东东，别急，咱们慢慢来

所谓的“XHR”（浏览器内置对象”XMLHttpRequest ”），也就是Ajax功能实现所依赖的对象，AJAX就是经过浏览器的内置对象XHMHttpResquest来发送异步请求的，异步请求不会妨碍客户端的任何操做。 

异步：

XHR至关因而一个通讯兵，来负责客户端与服务器之间的通讯传输。举个形象生动的例子：

要打仗了，前方阵地（客服端）不可能只等着通讯兵（XHR）传递消息其余什么也不干吧，因此前方阵地还在干着本身的事情而后派通讯兵去请求后方指挥部（服务器）的命令，指挥部下达命令指挥，通讯兵再把命令传到前方阵地，而后前方阵地再执行命令相关的操做（客户端把数据渲染到页面），这也就是Ajax的异步原理。

再来讲说同步：

所谓的同步就是前方阵地和通讯兵一块儿去向服务器请求数据，直到通讯兵请求到数据，我才开始渲染页面，在请求的过程当中页面一直是白屏等待的。 

AJAX既然是经过浏览器的内置对象XMLHttpRequest来处理异步请求的那咱们先来了解下他又哪些方法和属性：

注：写在这里的为必选参数或者常常用到的可选参数

方法：

1、open();

解释：发送请求的页面在不刷新的状况能将参数传给一个服务器进行处理, 这个方法就是将这些个参数传送过去

参数:

1, method:用于指定请求的类型  "GET"或者"POST"

2, url:用于请求的地址, 可相对可绝对

3, asyncFlag:指定请求方式为同步仍是异步, true为异步, false为同步

2、send();

解释：这个东西就是将一些参数以键值对的方式传送给服务器, 异步的话将当即返回服务器的响应, 作到不刷新页面进行数据处理就是用来发送参数的, GET方法下能够在url的后面写上参数的值, POST方法下只能在send()方法里面写上参数的键值对

3、setRequestHeader("header","value")

解释：用于为请求的Http头设置值

四, getResponseHeader("headerLabel");

解释: 返回设置的Http头信息

五, abort();

我的理解: 使用了这个请求以后会直接中止getResult的回调函数, 让readyState属性的返回值直接为0

六, getAllResponseHeaders();

解释：以字符串的形式返回完整的字符串信息

 

属性：

 

一, onreadystatechange

解释: 用于指定状态改变时所触发的事件处理器（在设置回调函数的时候常常用到, 全部的状态改变的时候都会触发这个事件处理器）

二, readyState

解释: 用于获取请求的状态（ 经过返回的代码是多少来判断当前的状态是什么状况）

返回值有：0: 未初始化; 1: 正在加载; 2:已加载; 3:交互中; 4:完成

三, responseText

书上解释: 获取服务器的响应, 表示为字符串（response.getWrite().append("");将这个语句的内容返回到用户页面）

四, responseXML

解释: 用于获取服务器的响应, 表示为字符串

五, status

返回Http状态码——200:表示成功; 202:表示请求被接受, 但还没有成功; 400:错误的请求; 404:文件未找到; 500:内部服务器错误

六, statusText

返回Http状态码的文本信息

下面让咱们经过一段代码实例来了解一下Ajax的使用方法：

 1 /**
 2  * ajax参数：
 3  * ajax({
 4  * method:post,get,
 5  * url,
 6  * param:参数，
 7  * callback:回调函数
 8  * })
 9  * 
10  */
11 var test = (function () {       //函数自执行    test存放返回的值，做为全局变量
12 
13     // ajax建立兼容封装
14     function getXlmHttp(obj) {
15         var xmlHttp;
16         if (window.XMLHttpRequest) { //兼容DOM
17             xmlHttp = new XMLHttpRequest();
18         } else if (window.ActiveXObject) { //兼容IE
19             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
20         }
21         return xmlHttp;
22 
23     }
24 
25     // ajax get请求
26     function getAjax(obj) {
27         var xmlHttp = getXlmHttp();
28         xmlHttp.onreadystatechange = function () {
29             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
30                 console.log(xmlHttp.responseText);
31                 obj.callback(xmlHttp);
32             }
33         }
34         // var obj = { "username": '张三', "password": "123" }
35         // 取对象的值有两种方式，一、"."" 二、"[]"
36         // 运算符要求是标识符，不能使变量，
37         var str;
38         for (key in obj.param) {
39             str = "key" + "=" + obj.param[key] + "&";
40         }
41         if (str.length > 0) {
42             str.url = obj.url + "?" + str;
43         }
44         xmlHttp.open(obj.method, obj.url)
45         xmlHttp.send(null)
46     }
47 
48     // ajax post请求
49     // var obj = { "username": '张三', "password": "123" }
50     function postAjax(obj) {
51         var xmlHttp = getXlmHttp();
52         xmlHttp.onreadystatechange = function () {
53             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
54                 console.log(xmlHttp.responseText);
55                 obj.callback(xmlHttp);
56             }
57         }
58         var str;
59         for (key in obj.param) {
60             str = "key" + "=" + obj.param[key] + "&";
61         }
62         if (str.length > 0) {
63             str.url = obj.url + "?" + str;
64         }
65         xmlHttp.open(obj.method, obj.url);
66         xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
67         xmlHttp.send(str);
68     }
69 
70     // 调用请求方式封装
71     function ajax(obj) {
72         if (obj.method = "post") {
73             postAjax(obj);
74         }
75         else if (obj.method = "get") {
76             getAjax(obj)
77         }
78     }
79 
80     // ajax Json封装
81     function getJson(obj) {
82         obj.callback = function (xmlHttp) {
83             var obj = JSON.parse(xmlHttp.responseText);
84             obj.callback(obj);
85         }
86         getAjax(obj);
87     }
88     return { "getAjax": getAjax, "postAjax": postAjax, "getJson": getJson, "ajax": ajax }    //返回值
89 })();
90 
91 test.getAjax() //调用封装的函数

 

优势：

1.最大的优势就是页面无需刷新，在页面内与服务器通讯，很是好的用户体验。 
2.使用异步的方式与服务器通讯，不须要中断操做。 
3.能够把之前服务器负担的工做转嫁给客户端，减轻服务器和带宽，能够最大程度减小冗余请求。 
4.基于标准化的并被普遍支持的技术，不须要下载插件或者小程序。

缺点：

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。 
在动态更新页面的状况下，用户没法回到前一个页面状态，由于浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差异很是微妙；用户一般会但愿单击后退按钮可以取消他们的前一次操做，可是在Ajax应用程序中，这将没法实现。 
2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据创建了一个直接通道。这使得开发者在不经意间会暴露比之前更多的数据和服务器逻辑。ajax的逻辑能够对客户端的安全扫描技术隐藏起来，容许黑客从远端服务器上创建新的攻击。还有ajax也难以免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。 
3.对搜索引擎的支持比较弱。若是使用不当，AJAX会增大网络数据的流量，从而下降整个系统的性能。

应用场景：

场景 1. 数据验证

场景 2. 按需取数据

场景 3. 自动更新页面