Ajax的工作原理以及优缺点

前面的话

我们都知道JavaScript运行环境是单线程的，就像一条流水线一样，只能一个任务完成后，再接着下一个任务。了解js的运行机制之后，我们再来聊一聊Ajax.

什么是Ajax

• Ajax（Asynchronous JavaScript and XML） = 异步的 JavaScript + XML
• Ajax不是一种新语言，而是一种在无需加载整个网页的情况下，能够更新部分网页的技术。 通过后台与服务器之间交换数据，ajax可以实现网页的异步更新。

Ajax工作原理

先看一张图， 了解一下浏览器利用Ajax向服务器请求数据的过程：

（1）浏览器告诉‘’XHR’，它想要向服务器请求数据
（2）浏览器继续做自己的事、
（3）'XHR’向服务器请求数据
（4）服务器返回数据给‘XHR’
（5）‘XHR’返回数据给浏览器
（6）浏览器拿到数据后去渲染页面

在整个过程中，我们可以看到‘XHR’是数据传输过程中的一个重要角色。

‘XHR’就是XMLHttpRequest,它是浏览器的内置对象，所有现代浏览器均支持XMLHttpRequest这个对象（IE5与IE6使用的是ActiveX对象）。同时它也是Ajax的核心，Ajax请求的异步通信就靠它。接下来聊一聊XMLHttpRequest这个对象。

XMLHttpRequest对象

1、创建XMLHttpRequest对象

要想使用Ajax发请求，首先就要创建一个XMLHttpRequest对象。

	 var xmlHttp;
	 if(window.XMlHttpRequest){
	 // 针对现代浏览器
	 xmlHTTP = new XMLHttpRequest();// 实例化一个XMLHttpRequest对象
	 }else {
	 // 针对IE5、IE6
	 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	 }

2、 设置请求方式

发送请求前，需要设置好请求方式，这里需要使用XMLHttpRequest对象的open()方法。
open(method, url, async): 设置请求的类型、URL、以及是否为异步请求。

• method参数：请求的类型；GET或POST
• url参数：文件在服务器上的位置
• async参数：一个布尔值；true（异步），false（同步)。

简单的GET的请求：

	 xmlhttp.open("GET",'https://www.w3school.com.cn/ajax', true);

简单的POST请求：

	xmlhttp.open("POST", 'https://www.w3school.com.cn/ajax', true);

是GET还是POST请求？

是同步还是异步？

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true。

3、设置onreadystatechange 属性中回调函数

当请求发送之后，不管服务端的请求成功还是失败，服务端反馈数据，那么前台都要给出回应。这个回应就是我们要写的回调函数。这时我们就要用到XMLHttpRequest对象的onreadystatechange属性。

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

• readyState：存着XMLHttpRequest状态变化的值。0~4的变化

• onreadystatechange: 存储函数，每当readyState属性变化时，就调用该函数
  （1）0 ：请求未初始化（未调用send()）
  （2）1：服务器连接以建立
  （3）2：请求以接收
  （4）3：请求处理中
  （5）4：请求以完成

• status：服务器返回的状态码。200 ：正确；404：未找到该页面

下面一个例子：

当readyState的状态为4且state状态码为200时，就将请求的数据赋给id为“myDiv”的div。

 XMLhttp.onreadystatechange = function() {
 	if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
 		var obj = document.getElementById('myDiv');
 		obj.innerHTML = xmlHttp.responseText;
 	} else {
 		 alert("AJAX服务器返回错误！");
 	}
 }

状态值与状态码的区别

• xmlhttp.readyState: 是ajax请求的状态变化，无论请求是否成功，都会发生的。
• xmlhttp.status：无论请求是否成功，服务器都得返回的http头信息代码。

关于状态码1XX~5XX有太多，下篇文章在详细介绍。

获取服务器响应

XMLHttpRequest对象获取服务器数据有两个属性：responseText 与responseXML

具体使用哪种，要取决于后台的数据。

4、发送请求

发送请求就要用到XMLHttpRequest对象的send()方法。

xmlhttp.send();

实例：

<div id="myDiv"></div>
<input id="Button1" type="button" value="display"  onclick ="creatReq();"/>

 </script>
		var xmlhttp; //定义变量，用来创建xmlhttprequest对象
        function creatReq() // 创建xmlhttprequest,ajax开始
        {
            var url = "http://XXXX"; //要请求的服务端地址
            if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本)，用xmlhttprequest对象创建
            {
                xmlhttp = new XMLHttpRequest();
            }
            else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
            }
            
            if(xmlhttp) //成功创建xmlhttprequest
            {
                xmlhttp.open("GET",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
                xmlhttp.onreadystatechange = callback; //指定回调函数
                xmlhttp.send(null); //发送请求
            }
        }
        
        function callback() //回调函数，对服务端的响应处理，监视response状态
        {
            if(xmlhttp.readystate === 4) //请求状态为4表示成功
            {
                if(xmlhttp.status == 200) //http状态200表示OK
                {
                    Dispaly(); //所有状态成功，执行此函数，显示数据
                }
                else //http返回状态失败
                {
                    alert("服务端返回状态" + xmlhttp.statusText);
                }
            }
            else //请求状态还没有成功，页面等待
            {
                document .getElementById ("myTime").innerHTML ="数据加载中";
            }
        }
        
        function Dispaly() //接受服务端返回的数据，对其进行显示
        {
            document .getElementById ("myDiv").innerHTML =xmlhttp.responseText;
        }
        
    </script>

Ajax的优缺点

Ajax优点：

• 页面无需刷新，用户体验好
• 采用异步方式与服务器通信，不需要中断
• 前后端负载平衡：Ajax的“按需取数据”，大大减少了冗余请求，减少服务器的负担
• 基于标准被支持：AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序

Ajax 缺点：

• 干掉了Back和History功能：用户无法回到前一个页面
• 安全问题：跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等
• 对搜索引擎支持较弱
• AJAX不能很好支持移动设备
• 不容易调试

参考链接：

• Ajax的工作原理
• 总结 - Ajax工作原理和实现步骤
• Ajax的工作原理以及优点、缺点
• w3c官网