XHR的四个属性都是写在open之后send之前的！

responseType
timeout
withCredentials

responseType属性

? ? ? ? responseType属性是用来设置响应数据类型的，默认值是text也可以是空的，这个拿不准就是说以前不写这个属性的时候写的是直接写的是那个console.log(xhr.responseText)，当使用了responseText=‘text’的时候，就可以把后面的text去掉了console.log(xhr.response);当使用了responseText=‘json’的时候，浏览器会自动调用JSON.parse方法，转为js数据类型的！

timeout属性

? ? ? timeout属性是用来设置那个响应时间的，同样也是写在open之后，send之前，

xhr.timeout=10;意思就是设置浏览器的响应时间为10ms，timeout的单位是毫秒，到时间还没响应到就会触发timeout事件，主要是用来提醒用户！

withCredentials属性----带有凭证

? ? ? ? ? ? ? 用来指定ajax发送请求时是否携带cookie的，当使用ajax发送请求时，在默认情况下如果是同域，就会携带上cookie，如果是跨域就不会携带了。

xhr.credentials=true;同样也是写在open和send之间的！

最后跨域携带cookie是否可以成功，还需要看服务器是否同意，取决于服务器中的access-control-allow-origin后面跟的值是否是你所使用的那个地址了。

第一次看这四个字母我也不知道这四个字母是什么意思，我帮跟我一样英语不咋样的小伙伴查了字典嘿嘿！

????????access-control-allow-origin:跟指定域名

????????入口---控制-----允许----源头：具体域名

abort()方法----用来阻止请求

这个和上面的四个属性书写位置不太一样，要写到send后面哦！

setRequestHeader()方法---顾名思义设置? ?请求? ?头

setRequestHeader方法和上面的四个属性一样写在open和send之间的

当使用get请求的时候没有必要设置setRequestHeader方法

当使用post请求的时候就需要设置了，setRequestHeader方法中跟有两个参数，第一个参数(Content-Type)是用来设置头部字段的名称的，请求头中的Content-Type(content---内容，type---类型)字段用来告诉服务器，浏览器发送的数据是什么格式的,第二个参数(默认值：application/x -www-from-urlencoded)是用来设置头部字段的值的，当使用post请求发送json的时候，第二个参数的值就应该是application-json了！

XHR的事件

load事件(IE6-8是不支持load事件的)---响应数据可用时触发的事件

<script>
        // load事件---响应数据可用时触发的事件
        const url = 'https://www.imooc.com/api/http/search/suggest?word=js';
        const xhr = new XMLHttpRequest();
        xhr.onload = () => {
            // 因为load事件是响应数据可用时触发，所以我们在这里不需要再判断xhr的执行状态了
            // if (xhr.readyState !== 4) return;
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                // console.log(xhr.responseText);
                // 由于responseType属性的默认值是text，所以我们直接使用response来进行代替。
                console.log(xhr.response);
            };
        };
        xhr.open('GET', url, true);
        // timeout用来限制响应时间，响应时间内没有完成会触发timeout事件，单位是ms;
        xhr.timeout = 10000;
        xhr.send(null);
        xhr.abort();
        // abort方法用来终止当前请求
    </script>

2.error事件----请求发生错误的时候执行的事件(IE10开始支持)

 const url = 'https://www.dudu.com/api/http/search/suggest?word=js';
        const xhr = new XMLHttpRequest();
        xhr.addEventListener('error', () => {
            console.log('error');
        });
        xhr.open('GET', url, true);
        xhr.send(null);

上图一个不存在的服务器地址，发送请求自然会失败，我们在error事件的函数体中打印了error

3.abort事件---终止请求时触发(IE10开始支持)

const url = 'https://www.baidu.com/api/http/search/suggest?word=js';
        const xhr = new XMLHttpRequest();
        xhr.addEventListener('abort', () => {
            console.log('请求被终止了');
        });
        xhr.open('GET', url, true);
        xhr.send(null);
        xhr.abort();

?4.timeout事件---请求超时的时候触发(IE8开始支持)

       // timeout事件---请求超时的时候触发
        const url = 'https://www.imooc.com/api/http/search/suggest?word=js';
        const xhr = new XMLHttpRequest();
        xhr.addEventListener('timeout', () => {
            console.log('请求超时了');
        });
        xhr.open('GET', url, true);
        xhr.timeout = 10;
        xhr.send(null);