Some elementary understanding of Ajax Async and JavaScript

technology to request data from the server

There are five common techniques for requesting data from the server

1. XMLHttpRequest (XHR)
2. Dynamic script tag insertion (dynamically scripted tag insertion)
3. IFRAMEs
4. Comet
5. Multipart XHR (Multi-part XHR)

XHR

Advantage: The ability to fine-grained control of sending requests and receiving data, which means that you can add arbitrary header information and parameters (including get and post) to the requested message, and read the header information returned from the server, as well as the response text itself.

Disadvantage: You cannot use XHR to request data from outside the currently running code domain, and the old version of IE does not provide a state of readystate of 3 (the status of 3 indicates that the data is being received), nor does it support streaming. The data returned from the request is treated like a string or an XML object, which means it will be quite slow to process large amounts of data.

Recommendation: When you use XHR to request data, you can use post or get. If the request does not change the server state and just retrieve the data it is recommended to use get, because the data of the GET request is automatically buffered by the browser and can improve performance if the same data is fetched multiple times.

Use post to extract data only if the URL and parameters are longer than 2048 characters, because IE restricts the length of the URL, which causes the request parameter to be truncated.

Dynamic Script tag insertion (dynamically scripted tag insertion)

Advantage: You can obtain data from a server that is not on the active domain

Because the result of the response is to run JavaScript, not as a string must be further processed. So it should be the quickest way to get and parse data on the client.

Disadvantage: Cannot send information header by request, parameter can only be passed by Get method, cannot post.

You cannot set a request timeout or retry, in fact you do not need to know if it has failed, and you must wait until all the data is returned before you can process it.

Unable to access the response information header or access the entire response message like an access string

Note: Because JavaScript does not have permissions or access control concepts, any code inserted on your page using dynamic scripting tags can have full control over the entire page, so be careful when using external source code.

Because the response message is used as the source code for the script tag, it must be an executable JavaScript. This means that any data format must be assembled in a callback function.

Multipart XHR (Multi-part XHR)

Multi-part XHR (MXHR) allows you to obtain multiple resources from the server side using only one HTTP request, which is sent from the server side to the client by packaging the resource into a large string delimited by a specific delimiter. The JavaScript code handles this long string, parsing each resource according to its media type and other "information headers".

Pros: Significantly improves the performance of the entire page.

Disadvantage: The obtained resource cannot be cached by the browser.

Older versions of IE do not support readystate=3 or Data:url

Recommendation: As the MXHR response message becomes larger, it is necessary to process each resource immediately rather than wait for the entire response message to be received, which can be achieved by monitoring readystate = Three

Send Data

Sometimes we just need to send the data to the server and not care about receiving the data, we can take the following two technologies

1. Xhr
2. Beacons

XHR

When you use XHR to send data back to the server, it is faster than get. (Cause: Sending a GET request to the server consumes a single packet, on the other hand a post sends at least two packets, one for the information header, one for the post body) post is more suitable for sending a large amount of data to the server, because it does not care about the number of additional packets, Because of the URL length limit of IE, the use of get will be limited.

Beacons

Implementation principle: Create an Image object, set src as the URL of the server's previous script file, which contains the key value pair data we intend to pass back through the get format. (without creating an IMG element or inserting them into the DOM), the server obtains this data and saves it without having to return anything to the client, so there is no actual image display.

Pros: This is the most efficient way to return information to the server, with the fastest loopback data, with minimal overhead, and no server-side errors that affect the client.

Disadvantage: The received response type is restricted and cannot send post data, so the URL length is limited to a fairly small number of characters. You can receive the returned data in a very limited way, listening to the load event of the image object, which tells you whether the server has successfully received the data.

If you need to return a large amount of data to the client, use XHR, if you only care about sending the data to the server side (which may require very few responses), then use beacons

Data Format

There are several data formats:

1. Xml
2. Json
3. Html
4. Custom formats

XML

Pros: Strict format, easy to verify

Cons: Data is lengthy, parsing is difficult, parsing is slow, although XPath can slightly speed up the point resolution, it is not widely supported.

JSON

JSON is an easy and easy-to-parse data format that is written in JavaScript object and array literal syntax. JSON data can be called JavaScript code that can be run.

Advantages: Small format, small footprint, fastest download, shortest resolution time

Here's a concrete look at JSON.

When using XHR, the JSON data is returned as a string using () to convert to a local object

When inserted using dynamic script tags, the JSON data is treated as a separate JavaScript file and executed as a local code. To do this, the JSON data must be wrapped in a callback function, which is json-p (JSON padding is json-padding)

json-p

Json-p because the callback wrapper slightly increased the file size, but its resolution performance improvement compared to this is insignificant, because the data as the local JavaScript processing, it is as fast as local JavaScript parsing speed.

The fastest JSON format is using the JSON-P format of the array.

Note: Because json-p must be executable JavaScript, labs can use it across domains using dynamic scripting Tag injection technology can be called by anyone in any site, so security must be noted and should not involve sensitive data.

HTML

Using HTML to transmit data large qualifying parsing time is long (not discussed in this general use as little as possible)

Custom Formats

Custom format download sensible, easy to parse, just call the split of the string to parse the data. When creating your own custom format, the most important decision is what delimiter to use (the delimiter should be a single character and not exist in your data).

Summary: XHR and dynamic script tag injection both can use this format, in both cases to parse the string, there is no substantial difference in performance, for very large datasets, it is the fastest transmission format, even in the resolution speed and download time to defeat the native execution of the JSON. Sending large amounts of data to clients in this format takes only a very small amount of time.

Data Format Summary

Preferably in JSON and custom formats, if the dataset is large or requires a long parsing time, it is best to use one of these two formats

Json-p data is obtained using the dynamic technology tag insertion method, which treats data as a running JavaScript rather than as a string, parsing is extremely fast and can be used across domains, but should not involve sensitive data.

Character-delimited custom formats, using XHR or dynamic scripting tags to insert technology extracts, using split parsing. This technique is slightly faster than json-p technology when parsing very large datasets, and usually has a smaller file size.

Cache Data

On the server side, set the HTTP header to ensure that the return message is cached in the browser

On the client side, cache the acquired data locally and do not request the same data multiple times.

 

Some elementary understanding of Ajax Async and JavaScript