XMLHttpRequest对象

XMLHttpRequest（XHR）对象用于与服务器交互。

通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。

这允许网页在不影响用户操作的情况下，更新页面的局部内容。

创建对象： xhr = new XMLHttpRequest();

xhr的readyState 属性

XHR对象中的 readyState 属性，用来表示当前Ajax请求所处的状态。

每个Ajax请求必然处于以下状态的一个：

值	状态	描述
0	UNSENT	xhr对象已被创建，但未调用open方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已被调用，响应头也已经被接收
3	LOADING	数据接收中，此时 response 属性中已经包含部分数据
4	DONE	Ajax请求完成，这意味着数据传输已经彻底完成或失败

xhr的onreadystatechange事件

每当 readyState 改变时，就会触发 onreadystatechange 事件。

xhr的status属性

1xx:信息响应类，表示接收到请求并且继续处理
2xx:处理成功响应类，表示动作被成功接收、理解和接受
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
5xx:服务端错误，服务器不能正确执行一个正确的请求

xhr.readyState==4 && xhr.status==200的解释：请求完成并且成功返回

常见status值：

200 - 交易成功
302 - 表示临时性重定向访问一个Url时，被重定向到另一个url上。常用于页面跳转。
400 - 错误请求，如语法错误
401 - 请求授权失败
403 - 请求不允许
404 - 没有发现文件、查询或URl
500 - 服务器产生内部错误

XMLHttpRequest发送请求

Get请求 - 四个步骤

①：创建 xhr对象

//1、创建一个 xhr 的对象
let xhr = new XMLHttpRequest()

②：调用 xhr的open()函数（open中传递两个参数，参数一是GET/POST请求方式，参数二是请求的URL地址）

//2、调用xhr中的open()函数,创建一个Ajax的请求

//无参数格式
xhr.open('GET', 'url')

//带参数格式 - 查询字符串
xhr.open('GET', 'url?key1=value1&key2=value2')

③：调用 xhr.send()函数

//3、调用xhr的send函数，发起请求
xhr.send()

④：监听 xhr.onreadystatechange事件

//4、监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {  //固定写法
        //数据获取成功，获取服务器响应的数据 
        console.log(xhr.responseText)
    }
}

xhr发起GET请求的完整代码

 <script>
     //1、创建一个 xhr 的对象
     let xhr = new XMLHttpRequest()
     //2、调用xhr中的open()函数,创建一个Ajax的请求
     xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
     //3、调用xhr的send函数，发起请求
     xhr.send()
     //4、监听 onreadystatechange 事件
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4 && xhr.status === 200) {  //固定写法
             //数据获取成功，获取服务器响应的数据 
             console.log(xhr.responseText)
         }
     }
 </script>

POST请求 - 五个步骤

①、创建 xhr 对象

        //1、创建xhr的对象
        let xhr = new XMLHttpRequest()

②、调用 xhr.open() 函数

        //2、调用open函数('请求类型','url')
        xhr.open('POST', 'url')

③、xhr.setRequestHeader 设置 Content-Type 属性（固定写法）

Content-Type必须写在open()的下面，且语句是固定的

        //3、设置 Content-Type属性（固定写法）
        
        // 参数格式 - 查询字符串
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        
        // 参数格式 - json字符串
        xhr.setRequestHeader('Content-Type', 'application/json')

④、调用 xhr.send()函数，同时指定要发送的数据

        //4、调用send函数
        
        // 参数格式 - 查询字符串
        xhr.send('bookname=落日听风&author=我我我&publisher=个人出版社')
        
        // 参数格式 - json字符串
        xhr.send(JSON.stringify({bookname:'落日听风',author:'我我我',publisher:'个人出版社'}))

⑤、监听 xhr.onreadystatechange事件

        //5、监听事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText)
            }
        }

⑥、完整的POST请求

    <script>
        //1、创建xhr的对象
        let xhr = new XMLHttpRequest()
        //2、调用open函数('请求类型','url')
        xhr.open('POST', 'url')
        //3、设置 Content-Type属性（固定写法）
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        // 或
        //xhr.setRequestHeader('Content-Type', 'application/json')
        //4、调用send函数
        xhr.send('bookname=落日听风&author=我我我&publisher=个人出版社')
        // 或
        // xhr.send(JSON.stringify({bookname:'落日听风',author:'我我我',publisher:'个人出版社'}))
        //5、监听事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText)
            }
        }
    </script>