js ajax request native

What is ajax

All modern browsers support XMLHttpRequest object (IE5 and IE6 use ActiveXObject).

XMLHttpRequest for exchanging data with the server in the background. This means that, for certain parts of the page to be updated without reloading the entire page.

Simple example:

 

function Request () {
     var http = new new the XMLHttpRequest ()       // Create Object ajax 
    http.open ( "the GET", "the test1.txt", to true );    // (predetermined type of request) requesting synchronous or asynchronous mode request address 
    http .setRequestHeader ( "the Content-type", "file application / X-WWW-form-urlencoded");   // request header 
    http.send ()                           // (sends a request to the server) 
    ajax.onreadystatechange = function () {   //   request response 
        IF (ajax.readyState == == 200 is ajax.status &&. 4 ) { 
            the console.log (the JSON.parse (ajax.responseText)); 
        } 
    }
  }
  Request ()   // call

 

XMLHttpRequest object

All modern browsers (IE7 +, Firefox, Chrome, Safari and Opera) are built-in XMLHttpRequest object (IE5 and IE6 use ActiveXObject)

var http = new XMLHttpRequest()

open () method

It accepts three parameters:

　　1.method: request type, such as get, post.

　　2.url: Request address.

　　3.async: the provisions of the current request is asynchronous, the default (do not fill) is asynchronous. (True asynchronous, false synchronous)

 

http.open("get","https://api.apiopen.top/recommendPoetry");

 

 

setRequestHeader method

Next we set the request header by setRequestHeader method. Note: This method must be to set in after the open () method is executed. (That is, you must first call the open () method). code show as below:

http.setRequestHeader("Content-type","application/x-www-form-urlencoded");

 

send method

The method shows a send request to the server.

When the request type to post, send () method accepts one parameter, the parameters you need to pass the background. get request can not fill or fill null

http.send()

 

readyState property

readyState is a property of the XMLHttpRequest object, it implies a response to our server status information. readyState property a total of five values:

• 0: The request is not initialized (proxy is created, but not yet call open () method)
• 1: server connection is established ( openmethod has been called)
• 2: request has been received ( sendmethod has been called, and the state and the head is already available)
• 3: process the request (download, responseText properties already contains partial data)
• 4: request has been completed, and the response is ready (download operation has been completed)

 

onreadystatechange method

Whenever the readyState property changes, it will trigger onreadystatechange () method, so we can go get our response to the server in which this method.

When readyState value equal to 4, and indicates a request has been completed and the server has returned a result to us.

= function http.onreadystatechange () { 
   // equal to 4 and the readyState status is equal to 200 (indicating a request successful) 
  IF (4 && ajax.status ajax.readyState == == 200) { 
      the console.log (ajax.responseText); // the results of the server response 
  }   
}

 

responseText and responseXML property

responseText: response data string obtained.

responseXML: get the response data as XML.

We used above is responseText property, but generally require that json format data, we can use JSON.parse () so that string into a json object. code show as below:

= function http.onreadystatechange () { 
   // equal to 4 and the readyState status is equal to 200 (indicating a request successful) 
  IF (4 && ajax.status ajax.readyState == == 200) { 
      the console.log (the JSON.parse (ajax.responseText )); // server response results 
  }   
}