近排朋友面试，面试官问道一个问题：*ajax的原理*是什么？
好像一直是这样的使用，好像没认真想过究竟什么是ajax的原理，一时间想不出，今次要记下。。。
有什么不对的地方，欢迎大神们指正！
- ajax是什么
1. ajax(全称**Asynchronous JavaScript and XML**，即是异步的js和xml)：是一种web开发技术，支持异步发送/获取数据，可在无刷新的情况下进行页面数据渲染。
2. 异步传输面向字符，它的单位是字符；
3. 同步传输面向比特，它的单位是桢，传输时要求接受方和发送方的时钟保持一致。
-
ajax的原理
通过创建xhr对象，由xhr对象向服务器发送请求，异步下不会阻塞页面的进行，当xhr监听到服务器的响应数据之后由js处理响应数据并操作DOM元素将数据显示渲染在页面上 -
ajax的创建 -- 基本步骤四
1. 创建xhr对象（XMLHTTPRequest），要注意兼容不同的浏览器
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHTTPRequest();
}else {
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
2. 创建xhr对象监听函数，监听xhr状态变化;
只要 readyState 属性发生变化，就会调用相应的处理函数 (en-US)。这个回调函数会被用户线程所调用。xhr.onreadystatechange 会在 xhr 的readyState 属性发生改变时触发 readystatechange (en-US) 事件的时候被调用
只读属性 xhr.status 返回了xhr 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前，status的值为0。值得注意的是，如果 xhr 出错，浏览器返回的 status 也为0。
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
3. 启动
xhr.open("GET", url, true);
4. 发送
xhr.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。
xhr.send();
- xhr.readyState的变化有0~4五种
| 值 | 状态 | 描述 | 当时刻的http状态码 |
|---|---|---|---|
0 | UNSENT | 代理被创建，但尚未调用 open() 方法。 | 0 |
1 | OPENED | open() 方法已经被调用。 | 0 |
2 | HEADERS_RECEIVED | send() 方法已经被调用，并且头部和状态已经可获得。 | |
3 | LOADING | 下载中； responseText 属性已经包含部分数据。 | 200 |
4 | DONE | 下载操作已完成。 | 200 |
-
xhr接受 GET 和 POST
-
支持异步和同步，即xhr.open(method, url, async, user, password)的第三个参数，默认为异步true，false为同步
-
当method为GET时，传输的参数可直接而拼接在url后面，POST方法的参数可传递在xhr.send方法入参，入参类型多种
-
xhr.open(method, url, async, user, password)后面的两个参数用于http的用户认证
-
优点
1. 提高了性能和速度： 减少客户端和服务器之间的流量传输，同时减少了双方响应的时间，响应更快
2. 交互性能好
3. 异步调用： 避免等待数据响应阻塞页面渲染
4. 拥有开源JavaScript库: JQuery，Prototype，Scriptaculous等。
5. 通过HTTP协议进行通信。
- 缺点
1. 增加了设计和开发时间
2. ---
3. AJAX应用程序中的安全性较低，因为所有文件都是在客户端下载的。
4. 可能出现网络延迟问题
5. 禁用JavaScript的浏览器无法使用该应用程序。
6. 由于安全限制，只能使用它来访问服务于初始页面的主机的信息。如果需要显示来自其他服务器的信息，则无法在AJAX中显示
常见的ajax面试题
- 暂时未更新。。。
