The AJAX request of native JS

What is Ajax

　　Ajax is a technique for creating fast, Dynamic Web pages. Ajax enables Web pages to be asynchronous and new by making a small amount of data exchange with the server in the background. This means that you can update a part of a webpage without reloading the entire page.

Disadvantages of traditional methods:

　　A traditional web Interactive user triggers an HTTP request server, and after it receives the server, it responds to the user and returns a new page, and each time the server processes the client-submitted request, the client is only idle, and even if it is a small interaction, Just get a very simple data from the server side to return a full HTML page, and the user each time to waste time and bandwidth to re-read the entire page. This practice wastes a lot of bandwidth, and the response time of the application depends on the response time of the server, because each application's interaction needs to send a request to the server. This causes the user interface to respond much more slowly than the local application.

XMLHttpRequest Object

　The XMLHttpRequest object is the basis of Ajax, and XMLHttpRequest is used to exchange data with the server in the background. This means that you can keep a new part of the page without reloading the entire page. All browsers currently support XMLHttpRequest

Method	Describe
Abort ()	Stop the current request
getAllResponseHeaders ()	Returns all response headers for an HTTP request as a key/value pair
getResponseHeader ("header")	Returns the string value of the specified header.
Open (' method ', ' URL ', [asyncflag],[' userName '],[' password '])	Establish a call to the server. The method parameter can be either a get, post, or Put.url parameter that can be an absolute address or a relative address. Also includes three parameters, whether asynchronous, user name, password.
Send (content)	Send a request to the server
setRequestHeader (' header ', ' value ')	b sets the specified header to the value provided. The open () must be called before any headers. Set the header and send it with the request ("post" method must be)

Five methods of Use:

1. Create a XMLHttpRequest Object

2. Use the Open method to set and server interaction information.

3. Set the data sent to start and server-side interaction.

4. Registering events

5. Update the interface

Example of Get request and POST request

　　　　GET request

Step One: Create an Asynchronous object
var ajax = new XMLHttpRequest ();
Step two: Set the URL parameters of the request, parameter one is the type of the request, parameter two is the URL of the request, can take parameters, dynamic transfer parameters starname to the server
Ajax.open (' Get ', ' getstar.php?starname= ' +name);
Step three: Send the request
Ajax.send ();
Step Four: Register the event onreadystatechange state changes will be called
Ajax.onreadystatechange = function () {
if (ajax.readystate==4 &&ajax.status==200) {
Step five if you can get into this judgment, the data is perfectly back, and the requested page is present.
Console.log (Ajax.responsetext);//Enter the appropriate content
}
}

　　　　　POST request

Creating an Asynchronous object
var xhr = new XMLHttpRequest ();
Set the type and URL of the request
The POST request must be added to the request header, or it will be an error.
Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xhr.open (' Post ', ' 02.post.php ');
Send Request
Xhr.send (' name=fox&age=18 ');
Xhr.onreadystatechange = function () {
This step is to determine if the server is responding correctly
if (xhr.readystate = = 4 && xhr.status = = 200) {
Console.log (Xhr.responsetext);
}
};

In order to be convenient and practical, we can encapsulate it into the method, when it is used, it can be called directly.

function Ajax_method (url,data,method,success) {
Asynchronous objects
var ajax = new XMLHttpRequest ();

Get and post need to write different code separately
if (method== ' get ') {
GET request
if (data) {
If there is a value
url+= '? ';
Url+=data;
}else{

}
Setting methods and URLs
Ajax.open (Method,url);

Send can
Ajax.send ();
}else{
POST request
Post request URL is not required to change
Ajax.open (Method,url);

Need to set up request message
Ajax.setrequestheader ("Content-type", "application/x-www-form-urlencoded");

Determine data send
if (data) {
If there is a value sent from send
Ajax.send (data);
}else{
The value of the wood can be sent directly
Ajax.send ();
}
}

Registering events
Ajax.onreadystatechange = function () {
Get the data in the event and modify the interface display
if (ajax.readystate==4&&ajax.status==200) {
Console.log (Ajax.responsetext);

Make the data available outside
return ajax.responsetext;

When onReadyStateChange called, the data came back.
Ajax.responsetext;

If the outside can pass in a function as a parameter, success
Success (Ajax.responsetext);
}
}

}

　　　　

The AJAX request of native JS