AJAX Basics

A stands for Achronymous Javascript and XML; it is the latest technology which is taking the Web 2.0 world by storm. AJAX can’t really be considered a new technology as it utilizes existing technologies - those being Javascript and XML. The main use of AJAX is ton query a database or to submit a form without the need to do a postback or to reload the page concerned. Although AJAX may seem to be just a thing to use if you want to make sure site all cool and fancy, it has advantages for developers as well; by using less postbacks within a website, less bandwidth is used which keeps costs down for the developer.

Creating Your First AJAX Page

To begin with, your ‘front-end’ page can be in any scripting language - it can even be just a basic HTML file. However, your ‘back-end’ page needs to be written in a dynamic scripting language which is able to query a database, accept querystring data - basically anything which requires access to a server or needs to fetch client-side data; examples of these kind of languages include PHP and ASP. If you are new to the concept of server side scripting then I recommend that you start at somewhere like http://www.w3schools.com/ where you will be able to pick up the basics of several server-side scripting languages.

You will need a Javascript written which is able to create XML objects within a browser and must be then able to post information back to your ‘back-end’ page. For this article I have created a Javascript which the rest of the article will be based on; click here to download it.

The Javascript Function

The main AJAX script itself is made up of 2 different functions: fetchData() and filterData(). The hard work is done by the fetchData() function becuase as you can see the XMLHttpRequests are created within the function - also the code used to send the data is located within this function - this code being located within the ‘if (dataToSend)’ segment of the function.

The fetchData() function is made up of three variables which must be defined: url, dataToSend and objectID; the url variable is the path to your ‘back-end’ page where all the hard work is done, the ‘dataToSend’ variable is the data that you want to be sent to the ‘back-end’ page - this will be sent over a query string, and the objectID is the div or table cell on the ‘front-end’ page which you want to be filled with the data/response from the back-end page.

The Back-End Page

For an AJAX post back to work, you need to create a ‘back-end’ page in a dynamic scripting language. This page can be created in any dynamicscripting language as long as it supports fetching data from querystrings. Any data posted back to the page will be located within the ’sendData’ query string element.

The Front-End Page

To initiate an AJAX post back, you need to create a basic link element, but the hyperlink reference needs to be in the following form: ‘javascript: fetchData(url, dataToSend, objectID)’. The variables of the function are described within the ‘Javascript Function’ paragraph above here. If you create a normal link with the hyperlink reference taking the form of the example given then you should have a working AJAX post-back link.
Customizing the Fetch Response

You may want to customize the response received whilse the data is being fetched. The code which determines the response is located within the filterData() function. The response received could be replaced with something like ‘Loading…’ or similar - the text or image displayed is completely up to you.

The lines which determine the responses are located within the segments of the script which determine the status code received (pageRequest.readyState == 0,1,2,3,4 - the numbers go up in stages). Each of those segments contain the line ‘objectID.innerHTML’; this shows that the response changes the HTML within the desired object, meaning that you have the freedom to change the response as much as you would like.

Bookmark This Post: