AJAX 中 XMLHttpRequest() 实例'xhr'方法详细分解!!

AJAX (Async JavaScript And XML)

var xhr = new XMLHttpRequest();
xhr.open('GET','请求的服务器地址',true);
xhr.setRequestHeader(header,value);
xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.stastus === 200){
            console.log(xhr.responseText);
        }
}
xhr.send(data);

• AJAX-创建 XMLHttpRequest 对象：xhr

var xhr = new XMLHttpRequest();

一、xhr.open();

• 用来设置请求协议

xhr.open('GET','请求的服务器地址',true);

1、第一个参数 要用来请求方式 GET/POST 中’GET’通常用来获取资源；
3、第二个参数 要用来请求的服务器地址（接口地址）；
4、第三个参数 要用来设置请求方式(默认认知true true 异步/false 同步)

二、xhr.setRequestHeader();

• 用来设置请求头

xhr.setRequestHeader(header,value);

1、此方法用来设置HTTP请求头部的方法；
2、此方法必须在 xhr.open() 方法和 xhr.send() 之间调用。

三、xhr.onreadystatechange

• 用来监听 AJAX 请求

xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.stastus === 200){
            console.log(xhr.responseText);
        }
}

1、当请求被发送到服务器时，用来执行一些基于响应的任务；
2、每当 readyState 改变时，就会触发 onreadystatechange 事件；
3、readyState 属性存有 XMLHttpRequest 的状态信息。

• xhr.readyState
  • 用来反应 AJAX 运行状态值，无论是否成功

xhr.readyState === 4 

1、resdyState === 0 创建ajax实例,值就是0;
2、resdyState === 1 open执行完之后 值就是1
3、resdyState === 2 客户端请求发出去之后,客户端(前段)已经接收到请求的头部信息
4、resdyState === 3 正在接触响应体
5、resdyState === 4 响应体接收完毕

• xhr.status
  • 用来反应由HTTP协议根据所提交信息的状态码，无论AJAX访问是否成功

xhr.stastus === 200

1、xhr.stastus === 2开头的一般都代表成功；
2、xhr.stastus === 3开头的一般都代表重新定向 304代表走的缓存；
3、xhr.stastus === 4开头的一般都代表前端路径错误 404(找不到资源) 405(请求类型的错误)；
4、xhr.stastus === 5开头的一般都是服务器的错误；

• xhr.responseText
  • 从服务器返回的数据

xhr.responseText

1、此属性包含对文本的请求的响应，若是请求成功，就返回一个DOM字符串；
2、若是请求不成功或尚未发送，则返回null。
四、xhr.send();

• 用来发送请求

xhr.send(data);

1、此方法用于发送 HTTP 请求；
2、如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才能返回。