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 : https://www.w3schools.com.

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 : https://www.w3schools.com/xml/ajax_intro.asp. 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;
}
}
xmlhttp.open("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 `https://2mx.co.uk/ajax`


< !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>





[ -- link to Execute the Ajax Test Scripts Part 1 ]



Related Stories