GABRIEL CONCEIÇÃO

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':

xr.open( method, url + '?' + data, true );

xr.send();

break;

 

case 'post':

xr.open( method, url, true );

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

xr.send( data );

break;

 

case 'file':

xr.open( 'post', url, true );

xr.send( data );

break;

}

}

 

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:

.onreadystatechange

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.

 

.readystate

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.

 

.status

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

 

.responseText

Return a DomString with the data response.

 

 

Principal methods:

.open

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

.send

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

April 4, 2019, 07:58 am

Comments

Latest posts

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

March 2, 2020, 11:22 pm

Everyone likes security. Everyone likes the feel that the informati...

Quando um computador avaria e se encontra coberto pela garantia, dev...
16-02-2020 18:37
One day, I'm driving in Porto. Listening to a radio and thinking on ...
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.

Hoje a maioria das pessoas têm ou já tiveram contacto com dispositiv...
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
Enquanto verificamos o mercado na procura por novas ofertas, podemos n...
November 1, 2017, 6:40 pm
O Outlook.com 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

Trabalhar em TI pode ser a área mais stressante que pode enc...

August 31, 2017, 8:37 pm
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