XHR对象

XHR的属性 4个

1. response 和responseType

      const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          // 文本形式的响应内容
          // responseText 只能在没有设置 responseType 或者 responseType = '' 或 'text' 的时候才能使用
          // console.log('responseText:', xhr.responseText);

          // 可以用来替代 responseText
          console.log('response:', xhr.response);
          // console.log(JSON.parse(xhr.responseText));
        }
      };
      xhr.open('GET', url, true);
      // xhr.responseType = '';
      // xhr.responseType = 'text';
      xhr.responseType = 'json';
      xhr.send(null);

3. timeout ：设置请求的超时时间（单位 ms）

   const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.response);
        }
      };

      xhr.open('GET', url, true);

      xhr.timeout = 10000;

      xhr.send(null);

5. withCredentials 属性
   指定使用 Ajax 发送请求时是否携带 Cookie
   使用 Ajax 发送请求，默认情况下，同域时，会携带 Cookie；跨域时，不会
   xhr.withCredentials = true; 表示跨域时可以携带cookie
   最终能否成功跨域携带 Cookie，还要看服务器同不同意

     const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
      // const url = './index.html';

      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.response);
        }
      };

      xhr.open('GET', url, true);

      xhr.withCredentials = true;

      xhr.send(null);

XHR的方法 setRequestHeader abort 2个

 // 1.abort()
      // 终止当前请求
      // 一般配合 abort 事件一起使用
      const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.response);
        }
      };

      xhr.open('GET', url, true);

      xhr.send(null);

      xhr.abort();

      // 2.setRequestHeader()
      // 可以设置请求头信息
      // xhr.setRequestHeader(头部字段的名称, 头部字段的值);
      // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
      const url = 'https://www.imooc.com/api/http/json/search/suggest?words=js';

      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.response);
        }
      };
      xhr.open('POST', url, true);

      // 请求头中的 Content-Type 字段用来告诉服务器，浏览器发送的数据是什么格式的
      // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.setRequestHeader('Content-Type', 'application/json');

      // xhr.send(null);
      // xhr.send('username=alex&age=18');
      xhr.send(
        JSON.stringify({
          username: 'alex'
        })
      );

XHR的事件 4个 load abort timeout error

 // 1.load 事件
      // 响应数据可用时触发
      const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
      const xhr = new XMLHttpRequest();

      // xhr.onload = () => {
      //   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      //     console.log(xhr.response);
      //   }
      // };
      xhr.addEventListener(
        'load',
        () => {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.response);
          }
        },
        false
      );

      xhr.open('GET', url, true);

      xhr.send(null);

      // IE6~8 不支持 load 事件

      // 2.error 事件
      // 请求发生错误时触发

      const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
      const url = 'https://www.iimooc.com/api/http/search/suggest?words=js';
      const xhr = new XMLHttpRequest();

      xhr.addEventListener(
        'load',
        () => {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.response);
          }
        },
        false
      );
      xhr.addEventListener(
        'error',
        () => {
          console.log('error');
        },
        false
      );

      xhr.open('GET', url, true);

      xhr.send(null);

      // IE10 开始支持

      // 3.abort 事件
      // 调用 abort() 终止请求时触发
      const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

      const xhr = new XMLHttpRequest();

      xhr.addEventListener(
        'load',
        () => {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.response);
          }
        },
        false
      );
      xhr.addEventListener(
        'abort',
        () => {
          console.log('abort');
        },
        false
      );

      xhr.open('GET', url, true);

      xhr.send(null);

      xhr.abort();

      // IE10 开始支持

      // 4.timeout 事件
      // 请求超时后触发
      const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

      const xhr = new XMLHttpRequest();

      xhr.addEventListener(
        'load',
        () => {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.response);
          }
        },
        false
      );
      xhr.addEventListener(
        'timeout',
        () => {
          console.log('timeout');
        },
        false
      );

      xhr.open('GET', url, true);

      xhr.timeout = 10;

      xhr.send(null);

      // IE8 开始支持