This example will demonstrate a poll where a web page can get results without reloading.

Example Explained – The HTML page

The HTML page contains a link to an external JavaScript, an HTML form, and a div element:

The HTML form works like this:

1. An event is triggered when the user selects the "yes" or "no" option
2. When the event is triggered, the function getVote() is executed
3. The data returned from the getVote() function will replace the form, in the <div> tag

Example Explained – The JavaScript code

This is the JavaScript code stored in the file "poll.js":

The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter.

The getVote() Function

This function executes when "yes" or "no" is selected in the HTML form.

1. Calls the GetXmlHttpObject() function to create an XMLHTTP object
2. Defines the URL (filename) to send to the server
3. Adds a parameter (vote) to the URL with the content of the input field
4. Adds a random number to prevent the server from using a cached file
5. Each time the readyState property changes, the stateChanged() function will be executed
6. Opens the XMLHTTP object with the given url.
7. Sends an HTTP request to the server

The PHP Page

The server page called by the JavaScript code is a simple PHP file called "poll_vote.php".

The selected value is sent from the JavaScript and the following happens:

1. Get the content of the "poll_result.txt" file
2. Put the content of the file in variables and add one to the selected variable
3. Write the result to the "poll_result.txt" file
4. Output a graphical representation of the poll result

The Text File

The text file (poll_result.txt) is where we store the data from the poll.

It is stored like this:

The first number represents the "Yes" votes, the second number represents the "No" votes.

Note: Remember to allow your web server to edit the text file. Do NOT give everyone access, just the web server (PHP).

AJAX RSS Reader

In this example we will demonstrate an RSS reader, where the content from the RSS is loaded into a webpage without refreshing.

Example Explained – The HTML page

The HTML page contains a link to an external JavaScript, an HTML form, and a div element:

The HTML form works like this:

1. An event is triggered when a user selects an option in the drop-down box
2. When the event is triggered, the function showRSS() is executed
3. The <div id="rssOutput"> is a placeholder for the data returned from the showRSS() function

Example Explained – The JavaScript code

This is the JavaScript code stored in the file "getrss.js":

The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter.

The showRSS() Function

Every time an option is selected in the input field, this function executes the following:

1. Calls the GetXmlHttpObject() function to create an XMLHTTP object
2. Defines the URL (filename) to send to the server
3. Adds a parameter (q) to the URL with the selected option from the drop-down list
4. Adds a random number to prevent the server from using a cached file
5. Each time the readyState property changes, the stateChanged() function will be executed
6. Opens the XMLHTTP object with the given URL
7. Sends an HTTP request to the server

Example Explained – The PHP page

The PHP page called by the JavaScript code is called "getrss.php":

When an option is sent from the JavaScript, the following happens:

1. PHP finds out which RSS feed was selected
2. An XML DOM object is created for the selected RSS feed
3. The elements from the RSS channel are found and outputted
4. Loops through the first three elements and output result

AJAX Live Search

In this example we will demonstrate a live search, where you get search results while you type.

Live search has many benefits compared to traditional searching:

• Results are shown as you type
• Results narrow as you continue typing
• If results become too narrow, remove characters to see a broader result

Search for a W3Schools page in the input field below:

In the example above, the results are found in an XML document (links.xml). To make this example small and simple, only eight results are available.

Example Explained – The HTML page

The HTML page contains a link to an external JavaScript, some style definitions, an HTML form, and a div element:

The HTML form works like this:

1. An event is triggered when the user presses, and releases a key in the input field
2. When the event is triggered, the function showResult() is executed
3. The <div id="livesearch"> is a placeholder for the data returned from the showResult() function

Example Explained – The JavaScript code

This is the JavaScript code stored in the file "livesearch.js":

The GetXmlHttpObject() function is the same as in the PHP AJAX Suggest chapter.

The showResult() Function

This function executes every time a character is entered in the input field. If there is no input in the text field (str.length == 0), the function sets the return field to empty and removes the border around it. However, if there is any input in the text field, the function executes the following:

1. Calls the GetXmlHttpObject() function to create an XMLHTTP object
2. Defines the URL (filename) to send to the server
3. Adds a parameter (q) to the URL with the content of the input field
4. Adds a random number to prevent the server from using a cached file
5. Each time the readyState property changes, the stateChanged() function will be executed
6. Opens the XMLHTTP object with the given URL
7. Sends an HTTP request to the server

The stateChanged() Function

This function executes every time the state of the XMLHTTP object changes. When the state changes to 4 ("complete"), the content of the txtHint placeholder is filled with the response text, and a border is set around the field.

Example Explained – The PHP page

The PHP page called by the JavaScript code is called "livesearch.php".

The code searches an XML file for titles matching the search string and returns the result as HTML:

If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:

1. PHP creates an XML DOM object of the "links.xml" file
2. Loops through all  <title> elements to find titles that match the text sent from the JavaScript
3. Sets the correct link and title in the "$response" variable. If more than one match is found, all matches are added to the variable
4. If no matches are found, the $response variable is set to "no suggestion"
5. Output the $respone variable to the "livesearch" placeholder

responseXML returns the response as XML.

AJAX ResponseXML example

The ResponseXML property returns an XML document object, which can be examined and parsed using the DOM.

The following example will demonstrate how a web page can fetch information from a database with AJAX technology. The selected data from the database will this time be converted to an XML document, and then we will use the DOM to extract the values to be displayed.

This example might look equal to the "PHP AJAX and MySQL" example in the previous chapter. However, there is a big difference: this time we get the data from the PHP page as XML, with the responseXML function.

Receiving the response as an XML document allows us to update this page several places, instead of just receiving an HTML output, and displaying it.

In this example we will update several <span> elements with the information we receive from the database.

Example explained – The MySQL Database

The database table we use in this example looks like this:

Example explained – The HTML page

The HTML page contains a link to an external JavaScript, an HTML form, and several <span> elements:

• The HTML form contains a drop-down box called "users", with id and names from the database table, as options
• The <span> elements are placeholders for the values we will receive
• When a user is selected, a function called "showUser()" is executed (triggered by the "onchange" event)

In other words: Each time a user changes the value in the drop-down box, the function showUser() is called, and outputs the result in the <span> elements.

Example explained – The JavaScript code

This is the JavaScript code stored in the file "responsexml.js":

The showUser() and GetXmlHttpObject functions are the same as in the PHP AJAX and MySQL chapter, you can go to there for an explanation of those.

The stateChanged() Function

When an option in the drop-down box is selected, the function executes the following:

1. Sets xmlDoc variable as an XML document, using the responseXML function
2. Retrieves data from the XML document, and place it in the correct <span> element

Example explained – The PHP Page

The PHP page called by the JavaScript, is called "responsexml.php".

The PHP script runs an SQL query against a MySQL database, and returns the result an XML document:

When the query is sent from the JavaScript to the PHP page, the following happens:

1. Set the $q variable to the data sent in the q parameter
2. Open a connection to a MySQL server
3. The "user" with the specified id is found
4. The data is outputted as an XML document

AJAX database example

The following example will demonstrate how a web page can fetch information from a database with AJAX technology.

Example explained – The MySQL Database

The database table we use in this example looks like this:

Example explained – The HTML page

The HTML page contains a link to an external JavaScript, an HTML form, and a div element:

As you can see it is just a simple HTML form with a drop down box called "customers".

The <div> below the form will be used as a placeholder for info retrieved from the web server.

When the user selects data, a function called "showUser()" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showUser() is called.

Example explained – The JavaScript code

This is the JavaScript code stored in the file "selectuser.js":

The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter, you can go to there for an explanation of those.

The showUser() Function

When a person in the drop-down box is selected, the showUser() function executes the following:

1. Calls the GetXmlHttpObject() function to create an XMLHTTP object
2. Defines an URL (filename) to send to the server
3. Adds a parameter (q) to the URL with the content of the drop-down box
4. Adds a random number to prevent the server from using a cached file
5. Each time the readyState property changes, the stateChanged() function will be executed
6. Opens the XMLHTTP object with the given URL
7. Sends an HTTP request to the server

Example explained – The PHP Page

The PHP page called by the JavaScript, is called "getuser.php".

The PHP script runs an SQL query against a MySQL database, and returns the result as HTML:

When the query is sent from the JavaScript to the PHP page, the following happens:

1. PHP opens a connection to a MySQL server
2. The correct person is found
3. An HTML table is created, and filled with data, and sent back to the "txtHint" placeholder

AJAX XML example

The following example will demonstrate how a web page can fetch information from an XML file with AJAX technology.

Example explained – The HTML page

The HTML page contains a link to an external JavaScript, an HTML form, and a div element:

As you can see it is just a simple HTML form  with a simple drop down box called "cds".

The <div> below the form will be used as a placeholder for info retrieved from the web server.

When the user selects data, a function called "showCD" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCD is called.

Example explained – The JavaScript code

This is the JavaScript code stored in the file "selectcd.js":

The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter, you can go to there for an explanation of those.

The showCD() Function

When a CD in the drop-down box is selected, the showCD() function executes the following:

1. Calls the GetXmlHttpObject() function to create an XMLHTTP object
2. Defines an URL (filename) to send to the server
3. Adds a parameter (q) to the URL with the content of the drop-down box
4. Adds a random number to prevent the server from using a cached file
5. Each time the readyState property changes, the stateChanged() function will be executed
6. Opens the XMLHTTP object with the given URL
7. Sends an HTTP request to the server

Example explained – The PHP Page

The server paged called by the JavaScript, is a PHP file called "getcd.php".

The PHP script loads an XML document, "cd_catalog.xml", runs a query against the XML file, and returns the result as HTML:

When the CD query is sent from the JavaScript to the PHP page, the following happens:

1. PHP creates an XML DOM object
2. Find all <artist> elements that matches the name sent from the JavaScript
3. Output the album information (send to the "txtHint" placeholder)

AJAX Suggest example

The following AJAX example will demonstrate how a web page can communicate with a web server while a user enters data into an HTML form.

Type a name in the input field below:

Suggestions:

Example explained – The HTML page

The HTML page contains a link to an external JavaScript, a simple HTML form, and a span element:

The HTML form above has an input field called "txt1". An event attribute for this field defines a function to be triggered by the onkeyup event.

The paragraph below the form contains a span called "txtHint". The span is used as a placeholder for data retrieved from the web server.

When a user inputs data, the function called "showHint()" is executed. The execution of the function is triggered by the "onkeyup" event. In other words: Each time a user moves the finger away from a keyboard key inside the input field, the function showHint is called.

Example explained – The JavaScript code

This is the JavaScript code, stored in the file "clienthint.js":

The showHint() function

The showHint() function above is executed every time a character is entered in the "txt1" input field.

If there is input in the input field (str.length > 0), the showHint() function executes the following:

• Calls the GetXmlHttpObject() function to create an XMLHTTP object
• Defines the URL (filename) to send to the server
• Adds a parameter (q) to the URL with the content of the input field
• Adds a random number to prevent the server from using a cached file
• Each time the readyState property changes, the stateChanged() function will be executed
• Opens the XMLHTTP object with the given URL
• Sends an HTTP request to the server

If the input field is empty, the function simply clears the content of the txtHint placeholder.

The GetXmlHttpObject() function

The showHint() function above calls a function named GetXmlHttpObject().

The purpose of the GetXmlHttpObject() function is to solve the problem of creating different XMLHTTP objects for different browsers.

The stateChanged() function

The stateChanged() function executes every time the state of the XMLHTTP object changes.

When the state changes to 4 ("complete"), the content of the txtHint placeholder is filled with the response text.

Example explained – The PHP page

The code in the "gethint.php" checks an array of names and returns the corresponding names to the client:

If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:

1. Find a name matching the characters sent from the JavaScript
2. If no match were found, set the response string to "no suggestion"
3. If one or more matching names were found, set the response string to all these names
4. The response is sent to the "txtHint" placeholder

AJAX uses the XMLHttpRequest object

To get or send information from/to a database or a file on the server with traditional JavaScript, you will have to make an HTML form, and a user will have to click the "Submit" button to send/get the information, wait for the server to respond, then a new page will load with the results. Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.

With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.

With the XMLHttpRequest object, a web page can make a request to, and get a response from a web server – without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.

The XMLHttpRequest object is supported in all major browsers (Internet Explorer, Firefox, Chrome, Opera, and Safari).

AJAX – Browser support

All new browsers use the built-in JavaScript XMLHttpRequest object to create an XMLHttpRequest object (IE5 and IE6 uses an ActiveXObject).

The JavaScript code for creating an XMLHttpRequest object:

The next chapter shows how to use the XMLHttpRequest object to communicate with a PHP server.

AJAX is not a new programming language, but a new technique for creating better, faster, and more interactive web applications.

With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

The AJAX technique makes Internet applications smaller, faster and more user-friendly.

AJAX is based on Internet standards

AJAX is based on the following web standards:

• JavaScript
• XML
• HTML
• CSS

AJAX applications are browser- and platform-independent.

AJAX is about better Internet-applications

Internet-applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop.

However, Internet-applications are not always as "rich" and user-friendly as traditional desktop applications.

With AJAX, Internet applications can be made richer and more user-friendly.

Start using AJAX today

There is nothing new to learn.

AJAX is based on existing standards. These standards have been used by developers for several years.

PHP and AJAX

There is no such thing as an AJAX server. AJAX runs in your browser. AJAX uses HTTP requests to request small pieces of information from the server, instead of whole pages.

In our PHP tutorial we will demonstrate how a web page can communicate with a PHP web server online.