js 原生方法请求接口

XNLHttpRequest （xhr）介绍：

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

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

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

// get 请求

// 1.创建XHR对象
let xhr = new XMLHttpRequest()

// 2.调用 xhr的open()函数（open中传递两个参数，参数一是GET/POST请求方式，参数二是请求的URL地址）,创建一个Ajax的请求
 xhr.open('GET', 'http://url地址',true) // true 异步 false 同步
 // 2-1.不带参数的URL地址
 // xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
 // 2-2. 带一个参数的URL地址
 // xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
 // 2.3 带二个参数的URL地址
 // xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记')

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

// 4. 监听 onreadystatechange 事件
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>

XHR对象中的 readyState 属性，用来表示 当前Ajax请求所处的状态，每个Ajax请求必然处于以下状态的一个：

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