With the native XMLHttpRequest Object we can make requests to some server and retrieve information. This is useful when we need to obtain some data on an app for example, making requests to a REST api, or when we need to send some data by a form without reloading an entire page. 

In performance, is very useful, because we can reduce the total amount of information we request to the server, but, for seo purposes, can be very bad, if you request new posts on homepage only when the user interacts on some button, for example.

Another possible implementation with this object is the real time data update. When you are seeing some page and the information keeps updated in real time, like a web trading platform. Or you can simple change the entire dom without change the actual page / url.


An example of a function with Get | Post | File methods and callback using the XMLHttpRequest :

function sdata( method, url, data, cb ){

var that = this;

if( ( typeof method == 'undefined' ) || ( typeof url == 'undefined' ) || ( typeof data == 'undefined' ) ) return false;

// Create a new instance of XMLHttpRequest

var xr = new XMLHttpRequest();

// Ajax onReady event - data

xr.onreadystatechange = function(){

if( xr.readyState == 4 )

( xr.status == 200 ) ? 

cb( this.responseText !== "" && this.responseText || false ) :

cb( { code: -2, message: 'Not connected' } );



switch ( method ){

case 'get': method, url + '?' + data, true );




case 'post': method, url, true );

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

xr.send( data );



case 'file': 'post', url, true );

xr.send( data );





How I can use this function?

// arguments: request method, url, data sent, callback function

sdata('post', 'engine/data/set/comment.php', 'u=' + u + '&c=' + comment, function( d ){

// All the data is on d object



Principal properties:


This event if fired when the state of XMLHttpRequest changes. It will be fired several times during a query until the readyState property is 4.  You can verify with readyState property the state of the query.



The values of readyState can be:

0 - Unset

1- Opened

2- Headers received

3- Loading

4- Done.

As you can see, I verify if the readyState is 4, done. Then I verify if the response is ok, looking for the request status code. If is 200 OK, then I call the callback function with the data.



Return the status code of the request.  If the status is 200 everything is ok on the server side.



Return a DomString with the data response.



Principal methods:


Start the request. Define the method, the url and if the request operates asynchronously.


Make the request. The data can be 'catched' with onreadystatechange property. ( See the example )

April 4, 2019, 07:58 am


Latest posts

Crowdstrike is a software used in many services running windows as a...
July 19, 2024, 02:34 pm
With DNF types we can use union and intersection types at some class...
July 12, 2024, 02:22 pm

With an interactive dashboard from "Center for systems Cience and E...

March 2, 2020, 11:22 pm
Quando um computador avaria e se encontra coberto pela garantia, dev...
16-02-2020 18:37
One day, I was driving in Porto, listening to the radio and thinking...
This javascript library simulates the hover effect on mobile devices...

Still using Windows XP? Sure you already experiencing some compatib...

June 21, 2019, 7:29 am

Os cookies não permitem armazenar mais do que 4096 bytes de ...

April 1, 2019, 11:58 am

No Ebay podemos encontrar vários cartões microSD com ...

November 24, 2018, 10:12 pm
A Black Friday está quase aí. É já no dia 23 de Novembro que as ...
October 21, 2018, 10:00 pm

Google isn't using the keywords meta tag in your algorithm.

Happy Programmers' Day! ...
September 13, 2018, 10:13 pm
Devido ao novo regulamento de proteção de dados da EU, que exige a t...
September 12, 2018, 8:15 pm

A Microsoft acaba de comprar o GitHub, a maior plataforma de reposi...

June 7, 2018, 1:11 am
Microsoft doesn't released the Spring Creators update due to higher pe...
April 12, 2018, 1:50 am
The new version of Microsoft Office - 2019 will only work on Windows 1...
April 5, 2018, 1:50 pm
The new Windows Update will be automatically downloaded from Windows ...
April 5, 2018, 1:37 pm
A Black Friday está quase aí à porta, no entanto, é preciso estar ...
November 22, 2017, 8:01 am
O está neste momento com problemas a enviar emails. Se te...
September 18, 2017, 2:22 pm
Erro a enviar ficheiro em Wordpress: "File is empty. Please upload som...
September 4, 2017, 08:12 am
Bem-vindo ao desastre da perda de dados. Já deve ter sofrido como eu....
February 8, 2017, 02:25 am
Se instalar o Windows 10 de raiz neste computador e aplicar os drivers...
October 24, 2016, 2:04 am
O Facebook tinha um problema. Precisava de criar grandes aplicações...
October 2, 2016, 10:36 pm
Nem sempre pretendemos criar um serviço de hosting para um site. Pode...
September 4, 2016, 11:29 pm

Os processadores Intel BayTrail, uma versão melhorada para r...

August 16, 2016, 02:39 am