JS原生：XMLHttpRequest发送GET&POST请求

目录

1、XMLHttpRequest   (xhr)

2、使用xhr发起GET无参请求

3、使用xhr发起GET有参请求

4、使用xhr发起POST请求

---

学到了xhr发起GET和POST请求，在此记录一下

1、XMLHttpRequest   (xhr)

XMLHttpRequest（简称xhr）是浏览器提供的JavaScript对象，通过它，可以 请求服务器上的数据资源。

在jQuery中封装的AJAX函数，就是基于xhr，然后封装出jq中的ajax，然后就可以调用出get、post、ajax()三个方法

在原生中实际上真正用到的，是XMLHttpRequest这个对象

2、使用xhr发起GET无参请求

四个步骤：

①：创建 xhr对象

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

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

     //2、调用xhr中的open()函数,创建一个Ajax的请求
     xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')

③：调用 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>

xhr 对象的 readyState 属性

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

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

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

3、使用xhr发起GET有参请求

使用 xhr对象发起带参数的请求，只需要在 调用open()方法期间，为URL地址指定参数即可

代码示例

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')

这里在URL后用 ? 进行连接参数，用键值对的方式，=号左边的是键，右边是值，其余与无参GET一致

这种在URL地址后拼接的参数?+参数 叫做 查询字符串

如果有多个参数传递，参数与参数之间使用 & 符号连接

 let xhr = new XMLHttpRequest()

        //不带参数的URL地址
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')

        //带一个参数的URL地址
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')

        //带二个参数的URL地址
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记')

4、使用xhr发起POST请求

步骤（五步）：

①、创建 xhr 对象

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

②、调用 xhr.open() 函数

        //2、调用open函数('请求类型','url')
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')

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

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

        //3、设置 Content-Type属性（固定写法）
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

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

        //4、调用send函数
        xhr.send('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', 'http://www.liulongbin.top:3006/api/addbook')
        //3、设置 Content-Type属性（固定写法）
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        //4、调用send函数
        xhr.send('bookname=落日听风&author=我我我&publisher=个人出版社')
        //5、监听事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText)
            }
        }
    </script>