AJAX, Applications:

1. Definitions

AJAX stands for Asynchronous JavaScript And XML. It uses asynchronous data transfer (HTTP requests) between the browser and the web server. Based on JavaScript and HTTP requests, It is not a new programming languag, but a technique to get responses inside the web quicly by usig JavaScript XMLHttpRequest object. Web applications are made dynamically and interactively with the server using Javascript. The object XMLHttpRequest exchange data with a web server without reloading the page. It is originated from Google since 2005 by the Google Suggest .

2. Properties of the XMLHttpRequest object

To create the XMLHttpRequest object, Internet Explorer uses ActiveXObject; other browsers use XMLHttpRequest. We will then make a test by using the Javascript (try, catch) statement

First: create a variable xmlHttp to hold the XMLHttpRequest object,
Next: create an object with xMLHttp = new XMLHttpRequest(),
Finally: use this object by applying methods on it.

2.1. The property onreadystatechange is the function that receives and stores the data returned by the server after a request to this server. Its code is:

xmlHttp.onreadystatechange=function(){
// some code goes here ....
}

2.2. The readyState property processes the status of the server's response. The onreadystatechange function is executed each time the readyState changes. The state of the XMLHttpRequest object is 0 if the request is not initialized, 1 if it has been set, 2 if it has been sent, 3 if it is in process, and 4 if the request is complete. We can write a code like this:

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState == 4){
// ... get the data from the server's response
}
}

2.3. The responseText property retrieves the data sent back from the server. The related code can be written as:

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.TheForm.INPUT.value=xmlHttp.responseText;
}
}

This code sets the value of the input "INPUT" field equal to responseText.

3. Methods to send a request to the Server

To send a request to the server, we use the two methods open() and send(). The open() method takes three arguments: The first argument specifies the method to use (GET or POST), the second specifies the URL of the server, the third argument specifies that the request should be handled asynchronously. For example:

xmlHttp.open("GET","URL",true);
xmlHttp.send(null);

4. Examples

4.1. Example 1 : date() at the background

Let's consider the following file that we call ajaxExample.html

<html>
<body>

<script type="text/javascript">
tryCatch();//stored in the link ajax.js
</script>

We want that a function could be executed in the background, without reloading the page. When writing someting in the name text area, this function, running in the background, will use the XMLHttpRequest object and write the response in the second text area. This function, for this example, will just request the date from the server. This function, that we call ajaxBackground() can be written as:

The whole ajaxExample.html file can then take the final form: written as:

<html>
<body>
<script type="text/javascript">
function ajaxBackground();
</script>

Name : <input type="text" onkeyup="ajaxBackground();" name="name" />
Date: <input type="text" name="date" />
</form>

</body>
</html>

Fot the INPUT, we take the example of date. We will use PHP for this URL. In the directory (server-side) where PHP is running (here C:\www), create a directory (here Ajax), and place there ajax.js, ajaxExample.html and URL: date.php. the file date.php takes the following form:

<?php
echo ' Today is :'. date('Y-m-d') ."\n";
?>

Running this AJAX Application by typing some text in the name text field, and cklicking inside the time text box, gives: this result .

We can run the application on the localhost server.
The date text box gets the server's date from "date.php" file without reloading the page. The file ajaxExample without linking to ajax.js is written as ajaxExample.html

4.2. Example 2 : suggest a value from an array

Here, we will use this form to get suggestions. The only input field is called "txt". Once we enter the first character, a list of word appears. The used executed function responsible for this is suggest(this.value) triggered by the onkeyup event. The element span called "txtHint" is used to retreive data from the web server. The fuction suggest() is placed in suggest.js link, (we can also place it between heads of the example.html file).

The suggest.js link refers to the url atoms_list.php, that contains the array of words to suggest. In the PHP server, example.html gives example.jpg. We can also run this file to display example.html at localhost.

4.3. Using database and PHP

We create a molecules database and hydrocarbons table. Then we use AJAX to interact with this database to fetch information from it. The first file to select an item is hydrocarbons.html. The file to link at is hydrocarbons.js, and the to connect and retreive values, the related file is hydrocarbons.php. In the PHP server, hydrocarbons.html gives hydrocarbons.jpg. We can also run this file to display hydrocarbons.php at localhost.

4.4. Example3: Using XML and PHP

With XML, we will use noble_gases.xml file to retreive information. When we selects data, in the file noble_gases.html, the "onchange" event triggers the function selectGas() to be is executed. Placed in the file noble_gases.js, this function selectGas() executes the following tasks:

function selectGas(str)
{
// 1. Calls on the GetXmlHttpObject function to create an XMLHTTP object
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert (" The browser does not support HTTP Request")
return
}
// 2. Defines the url (filename) to send to the server
var url="display_noble_gas.php"
// 3. Adds a parameter (q) to the url with the content of the input field
url=url+"?q="+str
// 4. Adds a random number to prevent the server from using a cached file
url=url+"&sid="+Math.random()
// 5. Call stateChanged when a change occurs
xmlHttp.onreadystatechange=stateChanged
// 6. Opens the XMLHTTP object with the given url
xmlHttp.open("GET",url,true)
// 7. Sends an HTTP request to the server
xmlHttp.send(null)
}

Once a query is sent from the JavaScript file noble_gases.js to the display_noble_gas.php PHP page; in the file display_noble_gas.php. PHP creates the XML DOM object to load the XML document "noble_gases.xml" on the server. Then all "NAME" elements (nodetypes = 1) are looped through to find a name matching the one sent from the JavaScript, the information is output and sent to the "txtHint" placeholder. The output looks like this: noble_gases.jpg, that we can run at localhost.

4.5. Example4: Calculator

In this example, we will first use php scripts only to set a calculator program. Secondly, we will use php and ajax:

1. PHP Calculator:

The related code source: Calculator_php.txt.
The related css stylesheet code source: php_styles.css.
Running the program on the machine, gives: Calculator.php.

2. PHP-AJAX Calculator:

The related code source: operations_html.txt.
The related css stylesheet code source: ajax_styles.css.
The related browsers-check file code source: ajax.js.
Running the program on the machine, gives: operations.html.