Data transfer and AJAX requests

The traditional request method is to send the request to the server through the table forms, such request will inevitably cause the page to jump or refresh, which makes the bandwidth a lot of waste. In order to solve this problem, a new technology can not be completely called the new technology emerged, that is Ajax technology, it is a good solution to this problem, make local refresh possible.

Ajax is essentially an object of JS, which sends requests through this object. This is the XMLHttpRequest object. So, the study of Ajax is actually learning about the properties and methods of XMLHttpRequest objects. It can also be said that Ajax is the JS simulation form form to request the process.

Steps for Ajax to send a request:

Create an Ajax object that is a XMLHttpRequest object

var xhr = new XMLHttpRequest ();
var info= "Id=1&name=shu";
Create a listener response status event

Xhr.onreadystatechange=function () {
To determine the response status is to determine whether the background server response data has been received
if (readyState = = 4) {
The receipt of the response back data is stored in the format text format or in the XML format responsetext/responsexml
Console.log (ResponseText);
}
}

Create a request
Xhr.open ("Get", ' filename.php?id=1 ');
Send request, get form directly after the URL with the information to be requested, do not need to send via send parameter, so write null directly.
If it is post, you need to write the requested information in send
Xhr.open (' Post ', ' filename.php ');
Xhr.send ("Id=1&name=shu");/xhr.send (info);
And if you pass data through post, like the form form, you need to use setRequestHeader () to add an HTTP header (the request header). Then specify the data you want to send in the Send () method: (You can write directly or through variables)
Xhr.send (NULL);


Note: It should be clear here that the XMLHttpRequest object's request method defaults to an asynchronous request, which means that the JS will not wait until the server responds to the request to continue executing the conditional statement when it is running.
He doesn't care about the state of another process, which means it's likely that the server's response is still on the way when the program runs to the data that needs to be answered. This will cause an error or no results. So it is necessary to let this side until the passing process, which is also the role of readystate, it records the entire request state from 0 to 4, 0 represents just created, 1 for the request to send, 2 for the request, 3 for the transmission, 4 for the response data sent complete.
But if is only a simple sequential structure, he will continue to execute the program sequentially, so it is necessary to bind an event as a listener to report the transmission of the data to this side.
And XMLHttpRequest just provides the object, which is onreadystatechange, which represents the handler that triggers the event whenever the readystate state changes.

In fact, if you don't want to use this, you can just add the third argument to open, which translates the asynchronous request into a synchronous request

Xhr.open (' Get ', ' file_upload.php ', false);//The default is true, which is the asynchronous request, but you need to put the conditional statement back

var xhr=new xmlhttprequest ();

Xhr.open (' Get ', ' file_upload.php ', false);
Xhr.send (NULL);
if (xhr.readystate==4) {
alert (Xhr.responsetext);
}

Post Pass value:

var xhr=new xmlhttprequest ();
var info= "name=jon&id=1";
Xhr.open (' Post ', ' file_upload.php ', false);
The default is application/x-www-form-urlencoded in the form table only son value, and one is the enctype= "Multipart/form-data" that is used when the file is uploaded; otherwise, the value cannot be passed.
Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xhr.send (info);
alert (xhr.responsetext); The direct popup is exactly the same.
if (xhr.readystate==4) {
alert (Xhr.responsetext);
}

In addition to the above approach: You can also use JS in the window's onload to achieve this effect
OnLoad is an event of the Window object that represents the event handler that executes its bindings when the page is loaded, and the so-called loading is done, and it can be understood that when the page is refreshed, it also represents the beginning of the page loading data. And Ajax, once a refresh, means that the data is responding to the load, which proves from the side that Ajax is really a reload of the page.

var xhr=new xmlhttprequest ();
var info= "name=jon&id=1";

Window.onload=function () {
alert (Xhr.responsetext);
}

Xhr.open (' Post ', ' file_upload.php ', false);
Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xhr.send (info);

Data transfer and AJAX requests