XMLHttpRequest简单介绍

var xhr = new XMLHttpRequest();

//创建XMLHttpRequest 对象
//参数：无
//返回值：XMLHttpRequest 对象
function createXHR () {
    var XHR = [  //兼容不同浏览器和版本得创建函数数组
        function () { return new XMLHttpRequest () },
        function () { return new ActiveXObject ("Msxml2.XMLHTTP") },
        function () { return new ActiveXObject ("Msxml3.XMLHTTP") },
        function () { return new ActiveXObject ("Microsoft.XMLHTTP") }
    ];
    var xhr = null;
    //尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
    for (var i = 0; i < XHR.length; i ++) {
        try {
            xhr = XHR[i]();
        } catch(e) {
            continue  //如果发生异常，则继续下一个函数调用
        }
        break;  //如果成功，则中止循环
    }
    return xhr;  //返回对象实例
}

xhr.send(body);

        var xhr = creatXHR();  //实例化XMLHttpRequest 对象
        xhr.open ("GET", url, false);  //建立连接
        xhr.send(null);  //发送请求
        request.onreadystatechange=function(){//判断和服务器端的交互是否完成,和服务器端是否返回了正确的数据
             if(request.readyState===4){
                   if(request.status===200){
                        //获得字符串形式的响应数据
                        console.log(xhr.responseText) //接收数据
                   }else{
                        alert("发生错误:"+ request.status);
                   }
             }
       };

 let btnadd = document.querySelector('.btnadd')
 let bookname = document.querySelector('[name="bookname"]')
 let author = document.querySelector('[name="author"]')
 let publisher = document.querySelector('[name="publisher"]')
 ​
 btnadd.addEventListener('click', function() {
 // 收集数据
 let booknameV = bookname.value
 let authorV = author.value
 let publisherV = publisher.value
 ​
 // 创建异步对象
  let xhr = new XMLHttpRequest()；
 ​
 // 发起请求
 // 请求行:post不能在请求行中拼接参数，否则相当于没有传递
  xhr.open('post', 'http://www.itcbc.com:3006/api/addbook',true)
     
 // 请求头:post方式传递普通键值对，需要设置Content-type编码格式，否则后台无法正确的获取到参数
 // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
 // json格式，上面的是字符串格式
  xhr.setRequestHeader('Content-Type', 'application/json')
     
 // 请求体，参数格式与get一样，除非你进行其它的处理
 // xhr.send(`bookname=${booknameV}&author=${authorV}&publisher=${publisherV}`)
 // 需要对象方式提交，则需要转换JSON，否则会报错，请求头也需要更换json
    xhr.send(
        JSON.stringify({
          bookname: booknameV,
          author: authorV,
          publisher: publisherV
        })
    )
 ​
 // 接收响应
 xhr.addEventListener('load', function() {
      console.log(JSON.parse(xhr.response))
    })
 })

xhr.onreadystatechange = function () {};  //清理事件响应函数
xhr.abort();  //中止请求

    var url = "server.php";  //设置请求的地址
    var xhr =new XMLHttpRequest();//实例化XMLHttpRequest对象
    xhr.open("POST", url, true); //建立间接，要求异步响应
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); //设置为表单方式提交 
    xhr.onreadystatechange = function () { //绑定响应状态事件监听函数 
        if (xhr.readyState == 4) { //监听readyState状态 
            if (xhr.status == 200 || xhr.status == 0) { //监听HTTP状态码 
                console.log(xhr.responseText); //接收数据  
                } 
        } 
    }
    xhr.send("callback=functionName"); //发送请求 

var url = "server.php";  //设置请求的地址
var xhr = new XMLHttpRequest();  //实例化XMLHttpRequest对象
xhr.open("post", url, true);  //建立间接，要求异步响应
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');  //设置为表单方式提交
xhr.onload = function () {
   //如果请求成功
   if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
       //do successCallback
      }
}
xhr.send();  //发送请求

<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
    window.onload = function () {  //页面初始化
        var b = document.getElementsByTagName("input")[0];
        b.onclick = function () {
            var xhr = new XMLHttpRequest();  //实例XMLHttpRequest对象
            xhr.open("GET", "server.xml", true);  //建立连接，要求异步响应
            xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
                if (xhr.readyState == 4) {  //监听readyState状态
                    if (xhr.state == 200 || xhr.status == 0) {  //监听HTTP状态码
                        var info = xhr.responseXML;
                        console.log(info.getElementsByTagName("the")[0].firstChild.data);  //返回元信息字符串“XML 数据”
                    }
                }
            }
            xhr.send();  //发送请求
        }
    }
</script>

<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
    window.onload = function () {  //页面初始化
        var b = document.getElementsByTagName("input")[0];
        b.onclick = function () {
            var xhr = new XMLHttpRequest();  //实例化XMLHttpRequest对象
            xhr.open("GET", "server.xml", true);  //建立连接，要求异步响应
            xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
                if (xhr.readyState == 4) {  //监听readyState状态
                    if (xhr.state == 200 || xhr.status == 0) {  //监听HTTP状态码
                        var o = document.getElementById("grid");
                        o.innerHTML = xhr.responseText;  //直接插入到页面中
                    }
                }
            }
            xhr.send();  //发送请求
        }
    }
</script>

<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
    window.onload = function () {  //页面初始化
        var b = document.getElementsByTagName("input")[0];
        b.onclick = function () {
            var xhr = new XMLHttpRequest(); //实例化XMLHttpRequest对象
            xhr.open("GET", "server.xml", true);  //建立连接，要求异步响应
            xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
                if (xhr.readyState == 4) {  //监听readyState状态
                    if (xhr.state == 200 || xhr.status == 0) {  //监听HTTP状态码
                        var info = xhr.responseText;
                        var o = eval("(" + info + ")" + "()");  //用eval()把字符串转换为脚本
                        console.log(o);  //返回客户端当前信息
                    }
                }
            }
            xhr.send();  //发送请求
        }
    }
</script>

<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
    window.onload = function () {  //页面初始化
        var b = document.getElementsByTagName("input")[0];
        b.onclick = function () {
            var xhr = new XMLHttpRequest();  //实例化XMLHttpRequest对象
            xhr.open("GET", "server.xml", true);  //建立连接，要求异步响应
            xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
                if (xhr.readyState == 4) {  //监听readyState状态
                    if (xhr.state == 200 || xhr.status == 0) {  //监听HTTP状态码
                        var info = xhr.responseText;
                        var o = eval("(" + info + ")");  //调用eval()把字符串转换为本地脚本
                        console.log(info);  //显示JSON对象字符串
                        console.log(o.user);  //读取对象属性值，返回字符串“css8”
                    }
                }
            }
            xhr.send();  //发送请求
        }
    }
</script>

var xhr = new XMLHttpRequest();  //实例化XMLHttpRequest对象
xhr.open("GET", "server.txt", true);  //建立连接，要求异步响应
xhr.nreadystatechange = function () {  //绑定响应状态事件监听函数
    if (xhr.readyState == 4) {  //监听readyState函数
        if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
            var info = xhr.responseText;
            if (info == "true") console.log("文本信息传输完整");  //检测信息是否完整
            else console.log("文本信息可能存在丢失");
        }
    }
}
xhr.send();  //发送请求

xhr.withCredentials 与  CORS 什么关系
我们都知道，在发同域请求时，浏览器会将  cookie 自动加在  request header 中。但在发送跨域请求时，  cookie 并不会自动加在  request header 中。
造成这个问题的原因：在 CORS 标准有如下规定，默认情况下，浏览器在发送跨域请求时，不能发送任何认证信息（ credentials）如  cookies 和  HTTP authentication schemes 。除非  xhr.withCredentials 为  true。
cookies 也是一种认证信息，在跨域请求中，  client 端必须手动设置  xhr.withCredentials=true，且  server 端也必须允许  request 能携带认证信息（即  response header 中包含  Access-Control-Allow-Credentials:true），这样浏览器才会自动将  cookie 加在  request header 中。
注意，一旦跨域  request 能够携带认证信息，  server 端一定不能将  Access-Control-Allow-Origin 设置为 *，而必须设置为请求页面的域名。

Access-Control-Allow-Origin: 允许跨域访问的域，可以是一个域的列表，也可以是通配符"*"。这里要注意Origin规则只对域名有效，并不会对子目录有效。
即http://www.test/test/是无效的。但是不同子域名需要分开设置，这里的规则可以参照那篇同源策略
Access-Control-Allow-Credentials: 是否允许请求带有验证信息，这部分将会在下面详细解释
Access-Control-Expose-Headers: 允许脚本访问的返回头，请求成功后，脚本可以在XMLHttpRequest中访问这些头的信息(貌似webkit没有实现这个)
Access-Control-Max-Age: 缓存此次请求的秒数。在这个时间范围内，所有同类型的请求都将不再发送预检请求而是直接使用此次返回的头作为判断依据，非常有用，大幅优化请求次数
Access-Control-Allow-Methods: 允许使用的请求方法，以逗号隔开
Access-Control-Allow-Headers: 允许自定义的头部，以逗号隔开，大小写不敏感