前端培训-中级阶段(21)- xhr2、FormData(2019-10-17期)

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

AJAX 我们肯定不陌生,低版本IE使用new ActiveXObject("Microsoft.XMLHTTP"),其他浏览器使用new XMLHttpRequest()
通过浏览器给我们的接口来实现通信交互,HTML 5 的概念形成后,W3C 开始考虑标准化这个接口。2008年2月,就提出了XMLHttpRequest Level 2 草案。

XMLHttpRequest Level 2 的新功能

  1. 不止支持文本数据的接收。还添加了更多类型的支持,如: blobarrayBuffer
    通过设置 XMLHttpRequest.responseType='blob' 来实现,默认值为 text
    老办法

     //告知浏览器自定义数据
     xhr.overrideMimeType("text/plain; charset=x-user-defined");
     // 还原成二进制
     for (var i = 0, len = binStr.length; i < len; ++i) {
        var c = binStr.charCodeAt(i);
        var byte = c & 0xff;
     }
  2. 同理也添加了支持发送数据的类型

    XMLHttpRequest.send();
    XMLHttpRequest.send(ArrayBuffer data);
    XMLHttpRequest.send(ArrayBufferView data);
    XMLHttpRequest.send(Blob data);
    XMLHttpRequest.send(Document data);
    XMLHttpRequest.send(DOMString? data);
    XMLHttpRequest.send(FormData data);
  3. 增加了跨域请求的能力
    支持了 CORS(Cross-origin resource sharing,跨域资源共享) 跨域方法。
  4. 增加了获得数据传输的进度信息的能力。
    下载 progress 事件,为 xhr.onprogress
    上传 progress 事件,为 xhr.upload.onprogress

    event.loaded / event.total(已传输/需要传输的总字节)。
    如果event.lengthComputable不为真,则event.total等于0

    之前判断是否成功需要监听xhr.onreadystatechange判断xhr.readyState == 4 && xhr.status == 200来确定。新增加了onloadonabortonerroronloadstartonloadEnd来判断各个阶段。

  5. 增加了超时限制
    通过设置xhr.timeout = 3000;来实现,默认值为0,意味着永不超时。如果请求超时会触发ontimeout事件

FormData

之前我们上传文件,依赖表单提交。异步上传的话,依赖iframe。
之后有了 File APIFormData 我们才可以很方便的上传文件。

Content-Type

  1. application/x-www-form-urlencoded默认

    Content-Type: application/x-www-form-urlencoded
    
    a=1&b=lilnong.top
  2. text/plain

    Content-Type: text/plain
    
    a=1
    baz=lilnong.top
  3. multipart/form-data 也就是我们的FormData

    Content-Type: multipart/form-data; boundary=------WebKitFormBoundaryuSsvkBRljoy0ECJz
    
    ------WebKitFormBoundaryuSsvkBRljoy0ECJz
    Content-Disposition: form-data; name="file"; filename="1571387420490-3.png"
    Content-Type: image/png
    
    ------WebKitFormBoundaryuSsvkBRljoy0ECJz
    Content-Disposition: form-data; name="a"
    
    1
    
    ------WebKitFormBoundaryuSsvkBRljoy0ECJz--

实战

上传文件

测试地址传送门

var formData = new FormData;
formData.append('file', file)//fileInput.files[0]
var xhr = new XMLHttpRequest();
xhr.open('post', '/upload_any');
xhr.send(formData);

设置超时时间

xhr = new XMLHttpRequest();
xhr.open('get','/')
xhr.timeout = 1;
xhr.send()
xhr.onload = ()=>console.log('load',xhr);
xhr.ontimeout = ()=>console.log('tiemout',xhr);

微信公众号:前端linong

clipboard.png

参考文献

  1. 前端培训目录、前端培训规划、前端培训计划
  2. XMLHttpRequest
阅读 674

推荐阅读
javascript-lNong
用户专栏

只此一生,何必从众

806 人关注
101 篇文章
专栏主页