The XMLHTTPRequest object is used to make calls to the server from the HTML page. These are AJAX (Asynchronous JAvascript XML) calls.
Today, all browsers accept this mode of operation, without any particular incompatibility.
AJAX has allowed the emergence of real web applications and has greatly contributed to the development of javascript, which has even become a server language with Node.js!
As their name does not indicate, XMLHTTPRequest objects can retrieve all kinds of data, not just XML files . To perform a query, you must first declare a certain variable. Then, we send the request and finally, we wait for the response. Below you can see a very basic example querying the current page ( location.href ). Once the response is obtained, an alert box is displayed.
Javascript
var xhr_object = new XMLHttpRequest ();
xhr_object. open ( "GET" , location.href, false );
xhr_object. send ( null );
if (xhr_object. readyState == 4) alert ( "Request completed!" );
How it works ?
.line 1: We create an instance of the XMLHTTPRequest object
.line 2: We specify the data transmission method, the URL and the mode of transmission of the request;
.line 3: The query itself is executed;
.line 4: An alert box is displayed as soon as the request is finished.
What can this be used for?
In the previous example, the query just asks for a certain file without caring about the result.
But in fact, when the request ends, we receive information from the server.
This information is contained in the xhr_object.response variable .
Let's simply replace the alert from the previous example with alert(xhr_object.response) and see the result:
As you have seen, all the code of this HTML page was displayed. In fact, during such a request, everything happens exactly as if you had typed the URL in the address bar of your browser.
Which means that if you request a PHP file , it will be executed and the result of its execution will end up in xhr_object.response .
From there, we quickly realize that there is no limit to the use of this type of request. We can simply display the result received with an alert, but you can just as easily retrieve and execute JS code using eval .
Synchronous Vs. Asynchronous
In the example we have seen so far, synchronous mode was used. This means that until the result of the query reaches us, the script is paused and the browser is blocked. With a good speed and/or little data to transmit, we could be satisfied with it but that can quickly prove to be annoying for the user who sees his browser frozen. This mode of transmission is therefore to be avoided. Fortunately, there is the asynchronous mode .
In this mode, after sending the request via send , the script continues its execution, without blocking the browser. Obviously, in this mode, we must provide something to notify us when the request has succeeded. This is the role of the onreadystatechange function(in fact, onreadystatechange is a property and not a function, but since it is assigned a pointer to a function, we can afford this abuse of language).
Let's take as a new example a query on a simple text file:
It is the third argument of the open function which specifies that the mode must be asynchronous.
The xhr_object object has a readyState property which successively takes 5 values summarized in the following table:
Value
Description
0 ( uninitialized )
Object not initialized
1 ( loading )
Start of data transfer
2 ( loaded )
Data transferred
3 ( interactive )
Data received are partially accessible
4 ( complete )
Data is completely accessible
And on each state change of readyState , the onreadystatechange function is called. We can thus make it do what we want depending on the progress of the request. But in any event, it is state 4 that interests us and it is generally reached very quickly. There is another interesting property which is status and which represents the HTTP code returned by the request. It's good to know that Firefox throws an error if you try to access this property before readyState is 4 .
To see all the values that status can take.
See all HTTP code values
Coded
Description
100
keep on going
101
Switching protocols
200
OK
201
Created
202
Accepted
203
Non-Authoritative Information
204
No Content
205
Reset Content
206
Partial Content
300
Multiple Choices
301
Moved Permanently
302
Found
303
See Other
304
Not Modified
305
Use Proxy
307
Temporary Redirect
400
bad request
401
Unauthorized
402
Payment Required
403
Forbidden
404
Not Found
405
Method Not Allowed
406
Not Acceptable
407
Proxy Authentication Required
408
Request Timeout
409
conflict
410
Gone
411
Length Required
412
Precondition Failed
413
Request Entity Too Large
414
Request-URI Too Long
415
Unsupported Media Type
416
Requested Range Not Suitable
417
Expectation Failed
500
Internal Server Error
501
Not Implemented
502
Bad Gateway
503
Service Unavailable
504
Gateway Timeout
505
HTTP Version Not Supported
Transmit data
Performing a request and receiving a result is good. But making a request by transmitting data is better. The data is transmitted in the same way as when submitting a form, i.e. via one of the two methods GET or POST . Obviously, if data is transmitted, the request must relate to a file capable of interpreting it correctly. In the following example, we are going to send two character strings to the file action.php and this one will return them to us “inverted”.
Javascript
var xhr_object = new XMLHttpRequest();
var method = f.elements["method"][0].checked ? "GET" : "POST";
var filename = "action.php";
var s1 = f.elements["string1"].value;
var s2 = f.elements["string2"].value;
var data = null;
if (s1 != "" && s2 != "") {
data = "s1="+s1+"&s2="+s2;
}
if (method == "GET" && data != null) {
filename += "?"+data;
data = null;
}
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) {
var tmp = xhr_object.responseText.split(":");
if(typeof(tmp[1]) != "undefined") {
f.elements["string1_r"].value = tmp[1];
f.elements["string2_r"].value = tmp[2];
}
alert(tmp[0]);
}
}
if (method == "POST") {
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
xhr_object.send(data);
Il file action.php
header('Content-type: text/html; charset=iso-8859-1');
if(count($_POST) > 0) {
echo "Data received in POST:";
foreach($_POST as $v)
echo strrev(utf8_decode($v)).":";
}
elseif(count($_GET) > 0) {
echo "Data received in GET:";
foreach($_GET as $v)
echo strrev($v).":";
}
if(count($_POST) == 0 && count($_GET) == 0)
echo 'No data was received by "'.basename($_SERVER["PHP_SELF"]).'"...';
How it works ?
It all starts in JS . If the selected method is get , the data to be transmitted is concatenated with the URL and if the method is post , it is sent via the send function. In the latter case, you must also specify the encoding by specifying the appropriate header with setRequestHeader.
Then, on the PHP side , the data is received, regardless of the transmission method, and the strings are reversed using strrev. Data received via the POST method is decoded using utf8_decode otherwise accented characters are misinterpreted. The string displayed by the PHP code (and therefore returned) is of the form Data received in XXX:STRING1:STRING2: where XXX is either GET or POST and where STRING1 and STRING2 are the reversed strings. We also specify, thanks to the header functionthe type of data that will be transferred from the server (here, text using the iso-8859-1 character set ).
Finally, on the JS side , all that remains is to separate the data, with split and to put the strings in the corresponding fields.
Properties and methods
Properties
onreadystatechange : Specifies the function to call when the readyState property changes. read / write .
readyState : Represents the progress status of the request. read only .
response : Character string containing the response to the request. read only .
responseXML : XML object containing the response to the request. read only .
status Represents the HTTP code returned by the request. read only .
Methods
abort() : Cancels the current request.
getAllResponseHeaders() : Returns the names and values of all HTTP headers as a string.
getResponseHeader( headerName ) : Retrieves the value of a certain HTTP header ( headerName ) as a string.
open( method , url [, asynchronous [, user [, password ]]]) : Initializes a request by specifying the method ( method ), the URL ( url ), if the mode is asynchronous ( asyncFlag is true or false ) and indicating any credentials ( user and password ).
send( data ) : Sends the HTTP request to the server, possibly transmitting data ( data must then be different from null ) in the form of a "postable string" (I'm interested in a translation) or in the form of a DOM object .
setTimeout( timeout ) : Specifies the maximum duration ( timeout ) granted to a request for which it is carried out completely.
setRequestHeader( headerName , headerValue ) : Specifies an HTTP header ( headerName and headerValue ) to send with the request.
EN 
Español - ES 
Français - FR 
