JAVASCRIPT - HOW TO PROPERLY USE AJAX HTTP REQUEST OBJECT - Javascript Source Code

JAVASCRIPT - HOW TO PROPERLY USE THE AJAX HTTP REQUEST OBJECT INCLUDING THE VARIOUS EVENTS OF THE AJAX OBJECT

The Ajax object is a very powerful tool that allows us to communicate with the web server, in the background. The Ajax object is repleat with multiple events so we can continually be updated as the what is going on with the Ajax object while it is working.

Step #1 - Create the Ajax Object

While quite often, code for creating the Ajax object is a simple one line var ajaxRequest = new XMLHttpRequest();, while in most cases this will work, in some Javascript environments, this method of creating the Ajax object will fail and so will any of your resulting code.

A more complete and safe way to create the Ajax object and ensure that it is created is to create a variable that calls a function that creates the Ajax object taking into account other possible various Javascript environments is to create a variable that calls the function that creates the Ajax object and then the funtion returns the successfully created Ajax object ...

// CREATE VARIABLE THE CALLS THE FUNCTION THAT RETURNS THE SUCCESSFULLY CREATED AJAX OBJECT var ajaxRequest = funcCreatedAjaxObject(); // TEST FOR SUCCESSFUL CREATION OF AJAX OBJECT & CONTINUE WITH CODE if(ajaxRequest !== null){ // IN CASE ERROR CREATING AJAX OBJECT }else{ }

This is the function that actually creates the Ajax object, taking into account most all possible Javascript environments.

/////////// CREATE AJAX OBJECT ///////////// function funcCreatedAjaxObject(){ var aj; try{ // IN MOST CASES, THIS WILL SUCCESSFULLY CREATE THE AJAX OBJECT aj = new XMLHttpRequest(); } catch (e){ try{ // IF THE COMMON WAY TO CREATE AJAX OBJECT FAILS ... aj = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e2){ try{ // IF THE SECOND METHOD OF CREATING AJAX OBJECT FAILS ... aj = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e3){ // IF ALL METHODS OF CREATING AJAX OBJECT FAILS return false; } } } // RETURN THE AJAX OBJECT TO THE VARIABLE THAT CALLED THIS FUNCTION return aj; }

Step #2 - Ask the Ajax Object to Communicate with the Web Server

Once the Ajax object has been successfully created, you can then use it to communicate with a script usually php that processes the data you send it. The data you send the php script is usually in the form of the query string part of the url where the php script resides.

ajaxRequest.open("GET","url-path-of-the-php-file-that-will-calculate-and-return-data.php?q=data-you-are-sending-to-php-script", true); ajaxRequest.send(null);

Step #3 - Events of the Ajax Object so you can Monitor the Ajax Objects Communication and Progress

Since you have used the Ajax object to send data to the php script on the web server, at this point you want to monitor various events of the Ajax object. These events either keep you updated as to the progress of the communication between the Ajax object and your web server or notify you when the data returned by the php script is ready for you to process and do stuff with.

The onreadystatechange event of the Ajax object keeps you updated as to the current state or progress of communications between the web server and the Ajax object.

/////////// PROGRESS OF THE AJAX COMMUNICATIONS ///////////// ajaxRequest.onreadystatechange = function() { if (ajaxRequest.readyState == 1) { // COMMUNICATION CHANNEL STARTED AND OPENED } else if (ajaxRequest.readyState == 2) { // RESPONSE HEADER RECEIVED } else if (ajaxRequest.readyState == 3) { // AJAX DATA LOADING } else if (ajaxRequest.readyState == 4) { // AJAX HAS FINISH PROCESSING } };

The error event of the Ajax object notifies you if there is an error with the Ajax object so if code does not run as expected, because of an error, you will be given notification of the trouble via this event of the Ajax object.

/////////// AJAX ERROR ///////////// ajaxRequest.onerror = function() { alert("Request failed"); };

Step #4 - Ajax Object Event that Successfully Returns your Data Retrieved by Ajax Communications

The onload event of the Ajax object occurs when the Ajax object has return the result of the code that was processed on the server. In this event you take the data returned by the Ajax object and process it to do what you want it to do.

/////////// AJAX RESPONSE RECEIVED & COMPLETE ///////////// ajaxRequest.onload = function() { // SUCCESSFULLY RECEIVED AJAX RESPONSE & DATA if (ajaxRequest.status == 200) { var varResponse = ajaxRequest.responseText.trim(); // AJAX STATUS ERROR } else { // ERROR PROCESSING CODE } };

Putting it All Together

The entire code required to use the Ajax object succesfully is all put together in the textbox below.

// CREATE VARIABLE THE CALLS THE FUNCTION THAT RETURNS THE SUCCESSFULLY CREATED AJAX OBJECT var ajaxRequest = funcCreatedAjaxObject(); // TEST FOR SUCCESSFUL CREATION OF AJAX OBJECT & CONTINUE WITH CODE if(ajaxRequest !== null){ ajaxRequest.open("GET","url-path-of-the-php-file-that-will-calculate-and-return-data.php?q=data-you-are-sending-to-php-script", true); ajaxRequest.send(null); // IN CASE ERROR CREATING AJAX OBJECT }else{ } /////////// AJAX RESPONSE RECEIVED & COMPLETE ///////////// ajaxRequest.onload = function() { // SUCCESSFULLY RECEIVED AJAX RESPONSE & DATA if (ajaxRequest.status == 200) { var varResponse = ajaxRequest.responseText.trim(); // AJAX STATUS ERROR } else { // ERROR PROCESSING CODE } }; /////////// PROGRESS OF THE AJAX COMMUNICATIONS ///////////// ajaxRequest.onreadystatechange = function() { if (ajaxRequest.readyState == 1) { // COMMUNICATION CHANNEL STARTED AND OPENED } else if (ajaxRequest.readyState == 2) { // RESPONSE HEADER RECEIVED } else if (ajaxRequest.readyState == 3) { // AJAX DATA LOADING } else if (ajaxRequest.readyState == 4) { // AJAX HAS FINISH PROCESSING } }; /////////// AJAX ERROR ///////////// ajaxRequest.onerror = function() { alert("Request failed"); }; /////////// CREATE AJAX OBJECT ///////////// function funcCreatedAjaxObject(){ var aj; try{ // IN MOST CASES, THIS WILL SUCCESSFULLY CREATE THE AJAX OBJECT aj = new XMLHttpRequest(); } catch (e){ try{ // IF THE COMMON WAY TO CREATE AJAX OBJECT FAILS ... aj = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e2){ try{ // IF THE SECOND METHOD OF CREATING AJAX OBJECT FAILS ... aj = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e3){ // IF ALL METHODS OF CREATING AJAX OBJECT FAILS return false; } } } // RETURN THE AJAX OBJECT TO THE VARIABLE THAT CALLED THIS FUNCTION return aj; }