xhr对象的属性

当使用XMLHttpRequest（）对象进行Ajax请求时，我们可以使用以下属性和方法来处理响应数据和请求超时：

• responseText、response、responseType
• timeout属性和timeout事件
• withCredentials

1，responseText属性

responseText 属性用于获取文本格式的响应数据，如HTML、XML、JSON等。如果设置了 responseType 为 json，则无法使用该属性，因为 responseType 为 json 时响应数据会自动解析为 JavaScript 对象。

xhr.responseText

2，response属性

response 属性可以获取任意格式的响应数据，包括文本、JSON、XML 等。如果响应数据为 JSON 格式，则可以在设置 responseType 为 json 后直接访问 response 属性获取 JavaScript 对象。

xhr.response

3，responseType属性

responseType 属性用于指定期望的响应数据类型。默认值为 “text”，表示期望的响应类型为文本格式。可以设置为 json、document等。

xhr.responseType = 'json'

4，timeout属性和ontimeout事件

timeout 属性用于设置请求超时时间，单位为毫秒。如果在指定的时间内没有接收到响应，则会触发 ontimeout 事件。

xhr.timeout = 1000
//一般写在open（）方法之后、send（）方法之前
xhr.ontimeout = function() { console.log('请求超时') }

5，withCredentials属性

withCredentials 属性用于控制是否允许在跨域请求时携带身份凭证，如 Cookie 和 HTTP 认证信息。

默认情况下，跨域请求是不会携带身份凭证的，如果需要在跨域请求时携带身份凭证，则需要将该属性设置为 true。

xhr.withCredentials = true

TIP

• 需要注意的是，如果请求是同源请求，则不能设置 withCredentials 属性,否则会报错（演示代码里请求的text.json文件与本文件在同一目录下打开的服务器，因此是请求是同源的）

• 同时，如果服务端没有设置允许跨域请求时携带身份凭证的配置，则即使设置了该属性也不会生效。
  

6，本节联系代码

    <script>
        // 1,创建xhr对象用于发送ajax，此时的readyState状态为0
        const xhr =new XMLHttpRequest();

        //4,添加响应的监听事件;每一次eadyState值得改变都会触发一次这个函数
        xhr.onreadystatechange=function(){
            // 响应过程readyState状态为3，响应结束为4
            if(xhr.readyState !== 4) return;
            if((xhr.status >=200 && xhr.status<300)||xhr.status ===304){//表示成功
                // 6,xhr.responseText属性，只能接收文本类型的返回值，基本被response代替了
                // console.log(xhr.responseText);//因为xhr.responseType设置了json，这个属性接收数据会报错

                //7，此时接收到的是JSON格式的字符串，xhr.response可以接收任意类型的数据格式
                console.log(xhr.response)

                // console.log(JSON.parse(xhr.response));//如果没有设置xhr.responseType='json',则需要手动转化
            };
        };

        // 2,准备发送ajax，此时的readyState的状态为1
        let url ='./text.json';
        xhr.open("get",url);//传入三个参数，第一个为请求方式、第二个为请求的url地址、第三个是否开启同步一般不传

        //8,xhr.timeout属性，设置超时时间，不设置默认不会超时；通常配合timeout时间使用，也就是超时后需要进一步处理什么

        xhr.timeout=1000;//时间为纯数字，单位为ms；

        xhr.ontimeout=function(){
            console.log("响应超时了！！！")
        };

        //3.发送请求,此时readyState的状态为2
        xhr.send()//如为get请求，则无需传递参数，传了也不会处理；如果为post请求，则send传递的数据会携带在请求体中

        //!!!5,xhr.responseType属性，默认是text文本；如果设置为json数据格式，当响应的数据为json格式时会自动解析成对象
        xhr.responseType='json';

        //9，xhr.
        xhr.withCredentials=true;
        //是否允许跨域请求时携带cookie，跨域默认是不携带的，当然即使设置了true，最终是否能携带给服务器还需要后端进行配置配合
        //如果同域请求设置这个属性会报错！
    </script>