AJAX 101 - A beginners guide to how AJAX really works! Part 1.

tobyonline's picture

AJAX is one of the newer buzz words floating around these days and sites with fancy AJAX scripts for you to cut and paste are springing up all the time. So what are the basics of AJAX? How does it work? And is it easy to write your own simple AJAX scripts?
Follow this short AJAX guide and with nothing more than a text editor and a browser you'll grasp the basics in no time.

AJAX is an acronym for Asynchronous Javascript And XML
It is a web programming technique that uses a combination of several technologies working together to provide interaction and updates within a web page. These include: JavaScript, XML, HTML, Standard HTTP requests and the XMLHTTPRequest JavaScript object - which I'll explain later!

The main characteristic of AJAX is dynamic content. The content loads and changes without refreshing the entire page and user input can be processed without a page refresh.

Why Asynchronous?
Traditional web applications are synchronous, that means they are synchronised or closely linked together. Click a link and the web server is sent a request, the browser waits for the response and then reacts by refreshing the page to display the result.

AJAX is asynchronous. The browser and the server are more loosely linked than a traditional web page. Click a link on an AJAX page and the server responds, however... this time the browser will still be interactive while it waits for the response from the server. When the new data is sent to the browser it slots it into the same page without reloading! This eliminates the start-stop-start-stop nature of traditional web interaction.

Question: What is the Secret to this amazing AJAX?
Answer: The XMLHttpRequest Object
The XMLHttpRequest object is an ordinary JavaScript object that can retrieve information from the server without using a page refresh (asynchronous). This object supports any text based format, including XML (but it doesn't have to use XML). It can be used to make requests over both HTTP and HTTPS.

Basic AJAX Steps
1. Create and configure the XMLHttpRequest object using JavaScript
2. Handle the response from the server (text or XML data)
3. Process the response
4. Update the HTML by using the DOM(Document Object Model) of the current HTML document

Programming AJAX
Basic programming in AJAX requires that you have a general knowledge of HTML and JavaScript. Some idea about XML and DOM are helpful, but not essential.

With the basic ideas behind us we can go on to Part 2. and start coding
tobyonline