Front end training – intermediate stage (21) – xhr2, formdata (2019-10-17)

Time:2019-11-16

The most basic part of the front end isHTML+CSS+Javascript。 Mastering these three technologies, even if you are a beginner, is just a beginner. Now the definition of front-end development is far more than these. Front end classroom(HTML/CSS/JS)In line with the central idea of improving the technical level and strengthening the basic knowledge, we have started the class(Every Thursday)。

AJAXWe must be familiar with the low version of IEnew ActiveXObject("Microsoft.XMLHTTP"), other browsers usenew XMLHttpRequest()
Through the interface provided to us by the browser, we can realize communication interaction,HTML 5After the formation of the concept, W3C began to consider standardizing this interface.February 2008, it is proposed thatXMLHttpRequest Level 2Draft.

New features of XMLHttpRequest Level 2

  1. Not only support text dataReceive。 More types of support have also been added, such as:blobarrayBuffer
    By settingXMLHttpRequest.responseType='blob'The default value istext
    Same old way

    //Inform browser of custom data
     xhr.overrideMimeType("text/plain; charset=x-user-defined");
     //Restore to binary
     for (var i = 0, len = binStr.length; i < len; ++i) {
        var c = binStr.charCodeAt(i);
        var byte = c & 0xff;
     }
  2. Support has also been addedSend outType of data

    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. IncreasedCross domain requestAbility
    SupportedCORS (cross origin resource sharing)Cross domain methods.
  4. IncreasedObtain progress information of data transmissionAbility.
    downloadprogressEvent, forxhr.onprogress
    uploadprogressEvent, forxhr.upload.onprogress

    event.loaded / event.total(total bytes transmitted / to be transmitted).
    Ifevent.lengthComputableNot true, thenevent.totalBe equal to0

    You need to monitor before judging whether it is successfulxhr.onreadystatechangejudgexhr.readyState == 4 && xhr.status == 200To make sure. New additionsonloadonabortonerroronloadstartonloadEndTo judge the stages.

  5. IncreasedTimeout restriction
    By settingxhr.timeout = 3000;The default value is0Means never time out. Trigger if request times outontimeoutEvent

FormData

Before we uploaded the file, we relied on the form to submit. For asynchronous upload, it depends on iframe.
Then there is.File APIandFormDataWe can easily upload files.

Content-Type

  1. application/x-www-form-urlencodeddefault

    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-dataThat’s ourFormData

    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--

actual combat

Upload files

Test address gate

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

Set timeout

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

WeChat public address: front-end Linong

Front end training - intermediate stage (21) - xhr2, formdata (2019-10-17)

Reference

  1. Front end training catalog, front end training planning, front end training plan
  2. XMLHttpRequest