Ajax加强

xhr的基本使用

1.定义：浏览器提供的javascript对象，通过它，可以请求服务器上的数据资源。
2.使用xnr发起GET请求
步骤：
（1）创建xhr对象
（2）调用xhr.open(‘请求方式’,‘URL地址’)函数
（3）调用xhr.send()函数来发起Ajax请求
（4）监听xhr.obreadystatechange事件，并指定处理函数【在这里面我们可以拿到服务器响应回来的数据】
这里面要监听xhr对象的请求状态readyState与服务器的响应状态status

  var xhr=new XMLHttpRequest();
        xhr.open('get','http://www.liulongbin.top:3006/api/getbooks')
        xhr.send()
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText);
            }
        }

3.xhr中的readyState属性【用来表示当前Ajax请求所处的状态】
每个Ajax请求必然处于以下状态中的一个
0-----UNSET-----XMLHttpRequest对象已经被创建但是尚未调用open方法
1------OPENED–open()方法已经被创建
2------HEADERS_RECEIVED----send()方法已经被调用，响应头也已经被接收
3-----LOADING—数据接收中，此时response属性中已经包含部分的数据
4------DONE-----Ajax请求完成，意味着有数据传输已经彻底完成/失败
4.使用xhr发起带参数的GET请求

xhr.open('get','http://www.liulongbin.top:3006/api/getbooks？id=1&bookname=西游记')

在URL地址后面拼接的参数用？拼接的字符串，多个参数用&拼接，叫做查询字符串
5.GET请求携带参数的本质 ：直接将参数已查询字符串的形式，追加到URL地址的后面，从而发送到服务器上
6.使用xhr发起post请求
步骤：
（1）创建xhr对象
（2）调用xhr.open()函数
（3）设置Content-type属性【固定写法】 xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’)
（4）调用xhr.send(‘查询字符串’)函数，同时要指定向服务器发送的数据
（5）监听xhr.onreadystatechange()事件