The Art & Science of JavaScript ($29 Value FREE For a Limited Time)
|
|
 
One of the newest things to take the web development industry by storm is the
use of
AJAX (Asynchronous Javascript And XML), which
uses the XMLHttpRequest object. The beauty of this new
technology is it allows designers and developers
to add interactive or live parts to their
website without have to reload the page. This can
include live information such as stock market values (the FTSE 100 is a great
example as its value can change as quickly as every minute) and the number of
posts on a forum. All these values could change on a page without having to
refresh to page every minute.
This tutorial will hopefully give you some idea on how to use the
XMLHttpRequest object in your website apps to improve user interactivity and
the general functionality of your website. It is advised that you have some
background knowledge of JavaScript, and for this example, PHP (or some other
server-side scripting language such as Perl or
ASP).
Below is the entire code of the script, so you can see what it will look like
at the end. I will go through each part in turn through the tutorial:
function
createRequestObject()
{
var req;
if(window.XMLHttpRequest){
//
Firefox, Safari, Opera...
req
= new XMLHttpRequest();
} else if(window.ActiveXObject)
{
// Internet Explorer 5+
req = new
ActiveXObject("Microsoft.XMLHTTP");
} else {
// There is an error creating the object,
// just as an old browser is being used.
alert('Problem
creating the XMLHttpRequest object');
}
return req;
}
// Make the XMLHttpRequest object
var http
= createRequestObject();
function sendRequest(act)
{
// Open PHP script for requests
http.open('get',
'myphpscript.php?act='+act);
http.onreadystatechange
= handleResponse;
http.send(null);
}
function handleResponse()
{
if(http.readyState
== 4
&& http.status
== 200){
// Text returned FROM the PHP script
var response
= http.responseText;
if(response)
{
// UPDATE ajaxTest content
document.getElementById("ajaxTest").innerHTML
= response;
}
}
|
|
|
Ajax shorthand for Asynchronous JavaScript and XML) is a group of interrelated
web development methods used on the client-side to create interactive web
applications. With Ajax, web applications can retrieve data from the server
asynchronously in the background without interfering with the display and
behavior of the existing page. Data is usually retrieved using the
XMLHttpRequest object. Despite the name, the use of XML is not needed, and the
requests need not be asynchronous. Like DHTML and LAMP, Ajax is not one
technology, but a group of technologies. Ajax uses a combination of HTML and
CSS to mark up and style information. The DOM is accessed with JavaScript to
dynamically display, and to allow the user to interact with, the information
presented. JavaScript and the XMLHttpRequest object provide a method for
exchanging data asynchronously between browser and server to avoid full page
reloads.
|
|
