Open Menu dzosoft
Close Menu dzosoft



Publish perfectly-optimized content in 1-click


How to make Ajax calls with XMLHTTPRequest

How to make Ajax calls with XMLHTTPRequest

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.

	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:

xhr_object = new XMLHttpRequest();"GET", "dzosoft.txt", true);
xhr_object.onreadystatechange = function() { if(xhr_object.readyState == 4) alert(xhr_object.responseText); }


How it works ?


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:

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

100keep on going
101Switching protocols
203Non-Authoritative Information
204No Content
205Reset Content
206Partial Content
300Multiple Choices
301Moved Permanently
303See Other
304Not Modified
305Use Proxy
307Temporary Redirect
400bad request
402Payment Required
404Not Found
405Method Not Allowed
406Not Acceptable
407Proxy Authentication Required
408Request Timeout
411Length Required
412Precondition Failed
413Request Entity Too Large
414Request-URI Too Long
415Unsupported Media Type
416Requested Range Not Suitable
417Expectation Failed
500Internal Server Error
501Not Implemented
502Bad Gateway
503Service Unavailable
504Gateway Timeout
505HTTP 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”.

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; }, 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"); }

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




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 .


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.

It might also interest you

How to make Drag and Drop in HTML 5 and JavaScript API

How to copy text to clipboard using html, css and javascript

How to create a responsive slideshow with CSS and JavaScript

How to Capture Photo From Camera using Javascript

How to draw in the browser with JavaScript

Leave comment

Save nickname and email in this browser for the next time.

close publicity