2mx
internet database design

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

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.
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: 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`