XMLHttpRequest对象

---

一、XMLHttpRequest对象

---

构造方法

var oReq = new XMLHttpRequest();

 用于初始化一个XMLHttpRequest实例对象

---

二、请求

---

1.open()

        初始化化一个新创建的请求，或重新初始化一个请求

oReq.open(method,url,async,user,password);

        参数：

• method：要使用的http方法（请求方式），如get、post、put、delete等 
• url：请求访问的文件路径
• async：true（异步，默认，已完成事务的通知可供事件监听器使用）| false（同步，send()方法直到收到答复前不会返回）。如果multipart属性为true，则async必须为true，否则将会引发异常
• user：（可选）用户名称
• password：（可选）密码

2.setRequestHeader()

        设置http“请求头”，给服务器更多信息。此方法必须在open()和send()之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头

oReq.setRequestHeader(header,value);

       参数：

• header：属性名称
• value：属性值

        例子：

        1.添加一个x-requested-with，便于服务器判断请求是否为Ajax发起：

oReq.setRequestHeader('x-requested-with','xml');

        2.通常post时，还要设定content-type，否则默认类型为text/plain，影响后台程序转换

oReq.setRequestHeader('Contenet-type','application/x-www-form-urlencoded');

 3.send()

        用于发送http请求。如果是异步请求（默认异步），此方法会在请求发送后立即返回。如果是同步请求，此方法直到响应到达后才会返回。

        get请求时，可以不用带参数，因为参数都可以在url中直接包含

var oReq=new XMLHttpRequest();
xhr.open('get','/server',true);
oReq.onload=function(){
    //请求结束后，在此处写处理代码
}；
oReq.send();

        post请求时。通常将参数信息放在send()中

var oReq=new XMLHttpRequest();
oReq.open('post','/server',true);
//发送合适的请求头信息
oReq.setRequestHeader('Content-type','application/x-www-form-urlencoded');
oReq.onload=function(){
    //请求结束后，在此处写处理代码
};
xhr.send("foo=bar&loren=ipsum");

---

三、异步

---

        send()是没有返回值的，要想拿到服务器响应，需要利用事件：

onreadystatechange

        只要readyState属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。        可以利用（this.）readyState来判断Ajax请求的状态

oReq.onreadystatechange=function(){
    console.log(this.readyState);
}

          输出结果：

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中；responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

---

四、服务器响应

---

        获得来自服务器的响应

1.responseText

        获取字符串形式的响应数据

var resultText=XMLHttpRequest.responseText;

2.responseXML

        获取XML形式的响应数据

---

五、示例

---

        请求地址：https://v1.hitokoto.cn/
        请求方式：get

function reqListener() {
//获取数据(该数据为字符串形式)
    console.log(this.responseText);
//将数据转换为object形式
    var type = JSON.parse(this.responseText);
    console.log(type)
    var types = typeof(type);
    console.log(types)
}
const oReq = new XMLHttpRequest();
oReq.addEventListener('load', reqListener)
oReq.open('get', 'https://v1.hitokoto.cn/');
oReq.send();