Ajax——原理、流程、readyState状态码、优缺点

1、AJAX 教程_w3cshool

2、AJAX 面试问题

一、什么是ajax？ajax作用是什么？

AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

二、Ajax的原理

在用户和服务器之间加了一个中间层( AJAX 引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中关键的一步就是从服务器获得请求数据。

三、Ajax的使用

Ajax的流程

客户端产生js的事件
创建xhr对象（XMLHttpRequest）
对xhr进行配置（指定该HTTP请求的方法、URL及验证信息）
通过ajax引擎发送异步请求
服务器端接受请求并且处理请求，返回html或xml内容
xml调用一个callback()处理响应回来的内容

页面局部刷新

//1、创建连接 创建Ajax核心对象 XMLHttpRequest（一定考虑兼容性）
// 前面兼容ie6+，后面兼容ie6-
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")

// 2、规定请求的类型、URL 以及是否异步处理请求。例如：xhr.open("GET","test.html",false);
// method：请求的类型；GET 或 POST
// url：文件在服务器上的位置
// async：true（异步）或 false（同步）
xhr.open(method, url, async)

// 3、向服务器发送请求
xhr.send(null)

// 4、接受服务器响应数据
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { 
        
    }
}
// onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数
// readyState：请求状态readyState一改变，回调函数被调用，它有5个状态

1、注意一
a、xhr.send(null) 当时POST请求时才使用字符串参数，否则不用带参数。
b、POST请求一定要设置请求头的格式内容

GET请求

POST请求

2、注意二：等待服务响应并渲染页面时（区分同步跟异步两种情况）

同步处理

xhr.open("GET","info.txt",false);

xhr.send();

// 获取数据直接显示在页面上
document.getElementById("myDiv").innerHTML = xhr.responseText;

异步处理：要在请求状态改变事件中处理
```
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200) { 
        document.getElementById("myDiv").innerHTML = xhr.responseText;
    }
}
```
a、responseText：获得字符串形式的响应数据，responseText获得XML形式的响应数据。

b、readyState：表明客户端与客户的交互状态过程。

四、readyState的状态码

0：UNSENT 未初始化（xhr被创建，但未调用open()方法）
1：OPENED open()方法成功调用，建立了连接
2：HEADERS_RECEIVED send()方法被调用，并已可以回去状态行和响应头
3：LOADING 响应体下载中，responseText属性可能已包含部分数据
4：DONE 响应体下载完成，可以直接使用responseText

五、Ajax的优缺点

优点：
- 通过异步模式，提升了用户体验；
- 优化浏览器和服务器之间的传输，减少不必要的数据往返；
- Ajax在客户端运行，承担了服务器的部分工作，减少服务器负载；
- Ajax可以实现局部刷新。
缺点：
- 安全问题，Ajax暴露了与服务器交互的细节；
- 对搜索引擎的支持比较弱；
- 不容易调试；
- ajax不支持浏览器back按钮（ajax干掉了back按钮，即对浏览器后退机制的破坏）

最后编辑于：2020.02.01 17:07:32