AJAX is a type of programming made popular in 2005 by Google (with Google Suggest)
AJAX is not a new programming language, but a new way to use existing standards
AJAX is good for creating better, faster, and more user-friendly web applications
HTML / XHTML
Knowledge of XML and CSS useful too
How AJAX works
AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.
The AJAX technique makes Internet applications smaller, faster and more user-friendly.
AJAX is a browser technology independent of web server software
‘Old’ way of getting/ sending data
User clicks "Submit" button to send/get the information, waits for the server to respond, then a complete new page loads with results
Since server returns a new page each time user submits input, traditional web apps can run slowly and tend to be less user-friendly
AJAX Uses HTTP Requests
With an HTTP request, web page can make a request to, and get a response from a web server - without reloading the entire page
The user remains on same page
Does not notice that scripts request pages, or send data to a server in the background
Greater transparency – better user experience
The XMLHttpRequest Object
By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has loaded
AJAX was made popular in 2005 by Google (with Google Suggest).
The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.
Your First AJAX Application
To understand how AJAX works, we will create a small AJAX application
First, we are going to create a standard HTML form with two text fields: username and time
The username field will be filled in by the user and the time field will be filled in using AJAX.
Different browsers use different methods to create the XMLHttpRequest object
We don’t know which browser any user may use
To create this object, and deal with different browsers, we are going to use a "try and catch" statement
Code needed to make AJAX run
Tries to create the XMLHttpRequest object
Check non-IE browsers first
If the test fails, code first tries newer then older IE versions
Returns error message for very old browsers
Can be cut and paste into your AJAX page
The XMLHttpRequest object
Has 3 important properties
The onreadystatechange property stores the function that will process the response from a server
The readyState property holds the status of the server's response. We can use this to execute the onreadystatechange function
Possible values for the readyState property:
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete
The data sent back from the server can be retrieved with the responseText property.
In our code, we will set the value of our "time" input field equal to responseText