Components of Ajax

AJAX functions fetch new data without having to refresh a Web page.

Developers use AJAX functions to make websites more interactive and dynamic. AJAX processing involves a range of technologies, including HTML markup for Web page content, JavaScript processing, server technologies such as the PHP scripting language, XML markup data and database processing in SQL. Any particular AJAX function may involve a selection of these technologies. Implementing AJAX functions requires an understanding of how the component parts interact with one another.

HTML

The Web page content associated with an AJAX function is typically modeled in HTML markup code. HTML elements include event attributes to call AJAX functions on user interaction. The following sample code demonstrates:
<input type="button" value="Call AJAX" onclick="getMoreData()" />

This button calls a JavaScript function named "getMoreData" when the user clicks it. The JavaScript function may be included in a script section in the HTML page head element. When the user clicks the button, the JavaScript function will fetch new data from the Web server and write it into the HTML structures within the page.

JavaScript

JavaScript is involved at the start and end of the AJAX processing cycle. When a browser event initially calls a JavaScript function, this function calls a server-side script in a language such as PHP. The JavaScript function can optionally pass data to the server-side script. The JavaScript function also listens for the server response, retrieving the data sent back by the server. The JavaScript code can then process the server response, often writing it into the page HTML, as in the following example:
document.getElementById("data").innerHTML=serverResponse;

In this case, the server response is saved in a variable named "serverResponse" that may contain data such as numbers and text. The function writes the variable content into a particular HTML element in the page.

Server-Side Scripts

AJAX functions typically involve server-side scripts in PHP or ASP. When the JavaScript function for a page calls a server-side script, it can pass data to it. The server-side script may carry out processing, such as querying a data source. The end result of the server-side scripting is to output response data to send back to the user's browser, where the JavaScript code is ready to receive and process it. The echo command allows a PHP script to respond to the browser as follows:
echo "<item>".$data_item."</item>";

In this case, the PHP script sends back an item of data formatted in XML code.

Data

AJAX functions generally aim to fetch new server data to include in a Web page. This data may be stored in a database, using a system such as MySQL and with server-side scripts using SQL commands to retrieve specific items of data. The data may alternatively be modeled within XML files. The server-side code often also formats the data response in XML markup, which the JavaScript function can process when it receives it.

References

• W3Schools: AJAX Introduction
• W3Schools: AJAX ASP/PHP Example
• W3Schools: AJAX Database Example
• W3Schools: AJAX XML Example

Resources

• Tizag: AJAX Tutorial
• W3Schools: AJAX Example
• Google Code: AJAX Tutorial