Ajax 第三天 原生DOM中XHR2.0及jQuery的一些补充

1.介绍

​ 2008年2月，对XHR1.0进行了扩展

2.新增的一些事件

​ ontimeout：请求超时事件设置

let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
    if(xhr.readyState === 4) {
       let res = xhr.responseText;
       console.log(res);
    }
}
xhr.timeout = 30;
xhr.ontimeout = function () {
   alert('请求超时');
}
xhr.open('GET', 'http://www.itcbc.com:3006/api/getbooks?appkey=159357&id=123456');
xhr.send();

onload：请求成功事件 相当于xhr.readystate === 4触发事件

let xhr = new XMLHttpRequest();
// 成功后执行
xhr.onload = function () {
    let res = xhr.responseText;
    console.log(res.length);
};
xhr.open('GET', 'http://www.itcbc.com:3006/api/large');
xhr.send();

onerror：请求失败事件 比如断网时，不是人为错误导致的

let xhr = new XMLHttpRequest();
// 请求错误后执行
xhr.onerror = function () {
  console.log('请求失败');
}   
xhr.open('GET', 'http://www.itcbc.com:3006/api/large');
xhr.send();

onloadstart：请求开始事件 请求开始时就此触发事件

let xhr = new XMLHttpRequest();
// 开始传送数据时就执行
xhr.onloadstart = function () {
  console.log('即将开始下载数据');
}   
xhr.open('GET', 'http://www.itcbc.com:3006/api/large');
xhr.send();

onloadend：请求结束事件 结束后触发该事件 不管是成功还是失败，就是onload和onerror的结合

let xhr = new XMLHttpRequest();
// 数据传送结束时就触发执行
xhr.onloadend = function () {
  console.log('数据传送结束');
}   
xhr.open('GET', 'http://www.itcbc.com:3006/api/large');
xhr.send();

onprogress：接收进度事件 用于实现下载进度条

<progress max="总大小" value="已经接收了多少"></progress>

let xhr = new XMLHttpRequest();
// 数据传送结束时就触发执行
xhr.onprogress = function (e) {
  progress标签.max = e.total;
  progress标签.value = e.loaded;
}   
xhr.open('GET', 'http://www.itcbc.com:3006/api/large');
xhr.send();

upload.onprogress：查看进度条上传事件

<form action="">
    <input type="file" name="avatar">
    <button>上传</button>
  </form>

  <progress style="display: none;"></progress>

  <script>
    document.querySelector('button').addEventListener('click', function (e) {
      e.preventDefault();

      let fd = new FormData(document.querySelector('form'));                                
	  
      let xhr = new XMLHttpRequest();
      xhSr.onreadystatechange = function () {
        if(xhr.readyState === 4) {
          let res = xhr.responseText;
          console.log(res);
        }
      }

      let pro = document.querySelector('progress');

      xhr.upload.onprogress = function (e) {
        pro.max = e.total;
        pro.value = e.loaded;
        pro.style.display = 'block';
      }

      xhr.open('POST', 'http://www.itcbc.com:3006/api/formdata');
      xhr.send(fd);
    });

3.FormData

​ 作用：快速的收集表单数据

​ 注意事项：可以上传文件；如果某个表单元素禁用了不会收集；隐藏域的数据也可以收集；必须要有name属性

​ 原生DOM使用方法：

<form action="">
    姓名：<input type="text" name="username"><br />
    密码：<input type="password" name="pwd" disabled><br />
    性别：<input type="radio" name="sex" value="nan">男
    <input type="radio" name="sex" value="nv">女<br />

    <input type="file" name="avatar"></br>

    <input type="hidden" name="隐藏域" value="456">
    <button>提交</button>
</form>

<script>

  document.querySelector('button').addEventListener('click', function (e) {
    e.preventDefault();

    let form = document.querySelector('form');
    // 必须是DOM对象
    let fd = new FormData(form);
    console.log(fd);  

    // 追加数据
    fd.append('hhh', '789');   // 是附加数据，在后面附加，不会使前边的覆盖
    // 修改数据
    fd.set('username', '刘佳');
    // 删除数据
    // fd.delete('username');

    // foreach遍历数据可以查看填了哪些数据
    fd.forEach((value, key) => {
      console.log(key, value);
    });

    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if(xhr.readyState === 4) {
        let res = xhr.responseText;
        console.log(res);
      }
    }
    xhr.open('POST', 'http://www.itcbc.com:3006/api/formdata');
    xhr.send(fd);

  });

jQuery使用方法：

<form action="">
    <input type="text" name="username"><br />
    <input type="password" name="pwd"><br />
    <input type="radio" name="sex" value="nan">
    <input type="radio" name="sex" value="nv"><br />


    <button>提交</button>
  </form>

  <script src="./jquery-3.5.1.min.js"></script>
  <script>
    $('button').on('click', function (e) {
      e.preventDefault();

      let fd = new FormData($('form')[0]);

      $.ajax({
        type: 'POST',
        url: 'http://www.itcbc.com:3006/api/formdata',
        data: fd,
        processData: false,    // 不把formdata对象转换成查询字符串
        contentType: false,    // 不加请求头
        success: function (res) {
          console.log(res);
        }
      });
    });
 </script>

4.$.ajaxPrefilter()方法

​ 作用：批量的修改ajax选项或添加ajax选项

​ 在它之后的请求都会被修改或添加，$.ajaxPrefilter都会拦截

​ $.ajaxPrefilter修改选项都会修改，比如有两个ajax请求，改URL，这俩的URL都会改

​ 使用方法：

$.ajaxPrefilter(function (option) {
      option.url = 'http://www.itcbc.com:3006' + option.url;
});

$.ajax({
  	  url: '/api/getbooks',
      data: {
        appkey: '159357',
      },s
      success: function (res) {
        console.log(res);
      }
});

5.$.serialize()/serializeArray()方法

​ jQuery中封装的提供表单的方法

​ $.serialize()中得到的参数是查询字符串格式，根据input或下拉框的name值，获取的是name的值，得到查询字符串

​ serializeArray()方法中得到的参数是数组格式

​ 使用方法：

let data = $('form').serialize();  // 得到查询字符串
let data = $('form').serializeArray();  // 得到数组

6.FormData和$.serialize()/serializeArray()区别

​ 最主要的区别是$.serialize/serializeArray()不能上传文件，别的都一样

7.jQuery的默认转换

​ 参数可以是对象、数组和查询字符串格式，在jQuery中默认的是查询字符串格式，请求头也是查询字符串类型的 所以要加processData: false; contentType: false;

8.jQuery中的底层实现

​ 如果是get请求，参数要拼接在URL后面；如果是post/delete/put请求，参数要放在xhr.send()中