High-performance JavaScript Learning Note Series (6)-ajax

Reference high-performance JavaScript

JavaScript Advanced Programming

The core of Ajax-based Ajax technology is the XMLHttpRequest object (XHR), which enables us to read data from the server without having to refresh the page XHR

varXHR =NewXMLHttpRequest ();//only IE7 and higher versions are supportedXhr.onreadystatechange =function() {  if(Xhr.readystate = = 4) {      if((Xhr.status >= && xhr.status <) | | xhr.status = = 304 ) {        //Success}Else {          //failed}}};xhr.open ("Get", "test.html",false); The third parameter represents whether the send synchronous request or the asynchronous request false represents synchronous true, which represents the asynchronous open method that chooses the requested URL for the type of request to send the asynchronous request Xhr.send (NULL);

Above is a simple example of creating a XHR object and sending a GET request

The ReadyState property represents the current active phase of the request/response process

• 0: The initialization phase has not yet called the Open method
• 1: Startup has called the Open () method has not yet called the Send method
• 2: Send has called the Send method but has not received a response
• 3: Receive the response data that has received the partial
• 4: Complete the response data has been received, and can be used on the client

When a response is received, the data of the response is automatically populated with the properties of the Xhr object

ResponseText text to be returned as a response body

The HTTP status of the status response

StatusText Description of HTTP status

Request data

(1) XHR disadvantage XHR Unable to request data from an out-of-date data GET request data will be cached by the browser

(2) Dynamic script Injection (JSONP) creates a script tag in the page and sets its SRC attribute and then adds it to the page it can request data from the other, but the dynamic script control provides limited control, cannot set the header information, the way the parameter is passed can only get the way, The message that cannot set the Request timeout processing or retry the response must be an executable JS code that is the data in any format you want to request must be encapsulated in a callback function

(3) Multipart XHR (MXHR) allows the client to transfer multiple resources from the server to the client using only one HTTP request, sending the resource to the client by packaging the resources on the server as a long string of mutually agreed-upon strings, and then processing the long string on the client side. The data obtained in this way can not be cached by the browser, depending on the type of mime-type and other information provided to it, but this method is a good way to reduce the HTTP request

Send data

(1) XHR can choose Post and get two ways to send data to the server get request is to include the request information in the URL of the post request to include the request information in the request body, the following is a simple send the POST request function

functionXhrpost (url,params,callback) {varreq =NewXMLHttpRequest (); Req.onerror=function() {setTimeout (function() {xhrpost (url,params,callback); },1000); }    //request failedReq.onreadystatechange=function() {      if(Req.readystate = = 4) {        if(Callback &&typeofcallback = = = ' function ') {callback (); }}} req.post ("POST", URL,true); Req.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); //when the data returns the encoding type of the server, the URL-encoded server knows how to parse the dataReq.setrequestheader ("Content-length", params.length); Req.send (Params.join (' & '));}

(2) Beacons Create a new Image object via JS and set the SRC attribute to the script URL on the server (the URL contains the data that needs to be transmitted to the server) but this method can only send a GET request, and there is limited way to receive the data on the service side to obtain the response information

Improve Ajax Performance

Cache data

(1) The client sends a response to the request header to ensure that the response is cached by the browser.

Setting the Expires field in the request header specifies that the URL be accessed before a specific time using the cache

(2) Cache the information acquired locally on the client side to avoid a re-originating request

By storing the URL and the requested data as key-value pairs in a local

varLocalCache = {}functionXhrrequest (url,callback) {if(Localcache[url]) {callback.success (Localcache[url]); return; }      varreq =NewXMLHttpRequest (); Req.onerror=function() {callback.error (); } Req.onreadystatechange=function() {    if(Req.readystate = = 4 ) {      if(Req.responsetext = = "" | | Req.status = = ' 404 ') {callback.error (); return; } Localcache[url]=Req.responsetext;    Callback.success (Req.responsetext); }} req.open ("GET", URL,true); Req.send (NULL);}

High-performance JavaScript Learning Note Series (6)-ajax