Xhr application scenarios

I. Brief HistoryIe5.5 implements xhr at the earliest. You need to create an xhr instance through activexobject until IE7 defines the XMLHTTPRequest object. After ie5.5 implements xhr, other browsers immediately implement xhr and directly name it XMLHttpRequest. Early xhr capabilities were limited: only text could be transmitted, the upload capability was limited, and cross-origin was not allowed. To solve these problems, W3C released the "XMLHttpRequest Level 2" draft on 2008. Enhanced xhr capabilities: (1) support for request timeout. Xhr. Timeout = 3000 (2) Support for binary and text data transmission (3) support for applications RewriteMedia type and encoding response (4) support monitoring progress events for each request (5) support valid file uploads (6) support secure cross-source requests Ii. Cross-source Resource Sharing (CORS)  3. download data through xhrXhr can transmit both text data and binary data. The browser can automatically provide encoding and decoding services for various native data types. Therefore, it has been decoded when data is directly transferred to xhr. Data Types supported by xhr automatic decoding: (1) binary data buffer with fixed arraybuffer length (2) blob Binary large object or immutable data (3) documenthtml or XML (4) jsonjs object (5) the text browser can determine the appropriate data type based on the HTTP header content-type. The application can also be displayed when an xhr request is initiated. RewriteData Type:

VaR xhr = new XMLHttpRequest (); xhr. open ('get', '/images/photo. webp '); xhr. responsetype = 'blob '; // set the return type to blob xhr. onload = function () {If (this. status = 200) {var IMG = document. createelement ('img '); IMG. src = Window. URL. createobjecturl (this. response); // create a unique object uri img based on the response. onload = function () {window. URL. revokeobjecturl (this. SRC); // The object is released immediately after the image is loaded.}; document. body. appendchild (IMG );}}

  4. Upload data through xhr  V. xhr Streaming Data TransmissionThe stream application scenario is very important. Unfortunately, up to now there is no API to implement the xhr stream (1) When uploading, The send method only accepts the complete load (2) the response, responsetext, and responsexml attributes are not designed for streaming upload. You can only split the file and then use multiple xhr requests for iterative upload. Streaming download has limited browser support: var xhr = new XMLHttpRequest (); xhr. open ('get', '/stream'); xhr. seenbytes = 0; xhr. onreadstatechange = function () {If (xhr. readystate> 2) {var newdata = xhr. responsetext. substr (xhr. seenbytes); // todo processes newdata xhr. seenbytes = xhr. responsetext. length ;}}; xhr. send (); defect: manual offset tracking is required, and manual data Splitting: responsetext buffered the complete response. The memory cannot be released before the current request is complete. Only text data can be read, and binary data cannot be read. Browser compatibility: The data types that can be read are inconsistent. Some allow text/HTML, and some only allow application/X-Javascript. In short, the xhr stream is difficult to implement and inefficient, cannot be used in the production environment. Vi. Real-time notification and delivery(1) implement regular round robin through xhr. The client regularly initiates an xhr request. If the server has new data, new data is returned, and no blank response is returned. The difficulty is that the optimal polling interval is hard to grasp. A balance must be made between efficiency and message latency. (2) Implement long polling through xhr. Regular round robin may cause a large number of unnecessary empty checks. This can be improved: when there is no data, no blank data is returned immediately, but the link is kept for a period of time. (3) websocket. HTML5 features can be implemented in a high-version browser. Currently, long polling solutions are widely used. VII. ReferencesAuthoritative Web performance guide, advanced JavaScript programming

 

Xhr application scenarios