Blog | Tutorial

What is AJAX ? a simple tutorial - Part 1

Ajax is [A]synchronous [J]avaScript [A]nd [X]ML.
Ajax allows you to update a section on your page without having to reload the complete page. You can dynamically check data with a simple set of functions. These functions send data to the server, get a response back and update the page with that information.

I have a test page setup that shows the effects of dynamic updates with data from the server without re-loading the whole page. [ click here for the Online form sample ]

A pre-requisite for these tutorials is some basic understanding of a web page, its format and the objects on a page. These will not be covered in depth here. For example CSS, Input text boxes and buttons. I find this link very useful : The basic code for this was taken from the book : SAMS Teach Yourself Ajax, Javascrip and PHP. This book was first printed 10 years ago and I have been using it for 8 years. I used a very basic set of functions to get Ajax working. I will use a basic set of examples working in this tutorial.

You can also get further information here : I have attempted to take a slightly different approach. There are also many libraries that you could also use.

The first step is to setup a function that will pass the request from your page, whether it be a key press or a button click, and then deal with the response data. Typically the response data may be a message indicating success or failure of the operation. The response can also be further css, java, php or ajax code itself.

The function [AjaxCall] below handles the sending and receiving of the responses from the page to and from the server. The function call [ajax_function.php] will be called when the AjaxCall function is requested. Its not too important just now to know what this does, except that an event on a page will call the [AjaxCall] function which in turn calls the [ajax_function.php] file.
function AjaxCall ( name ) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if ( (xmlhttp.readyState==4) && (xmlhttp.status==200) ) { document.getElementById(name).innerHTML=xmlhttp.responseText; } }"GET","ajax_function.php", true ) ; xmlhttp.send(); }
The second step then is to create the page with the function call. In this instance we will ask the user to press a button (which will return the current date/time and display on the page.
< form id="form1" value="form1" action="" method="POST" onsubmit="AjaxCall ( `response_id`); return false;" > < input name="button" value=" Click Here " type="submit" /> < /form >

We also need a placeholder where the response data can be placed. For this we will place an object on the page underneath the button. I have added text "(updated data will go here)" so you can see the object being updated. Typically you might leave that blank.
< span id="response_id"> (updated data will go here) < /span>
The third step is then to create a function to performa task when the button is pressed. The AjaxCall then calls the ajax_function.php function, shown here:
echo " Button pressed at : ".date ("D, jS M Y H:m:s" ) ;
The full example is shown on this page: click to view. You can view the full source on this link as well as copied below. The information below is placed in a php file which I use as `index.php` and placed at the location ``
< !DOCTYPE HTML> < html lang="en"> < head> < title>Ajax Test Scripts 1 < script type="text/javascript" src="js/AjaxCall.js"> < /head> < body> < h1>Ajax Test Scripts 1 < ? php print "Full page loaded at : ".date ("D, jS M Y H:m:s" ) ; ? > < form id="form1" value="form1" action="" method="POST" onsubmit="AjaxCall ( `response_id`); return false;" > < input name="button" value=" Click Here " type="submit" /> < /form> < span id="response_id">(updated data will go here)< /span> < /body> < /html>