SoftXML
                  Programming Books
                Open Web Directory
           SoftXMLLib | SoftEcartJS
Web Tutorials

The Art & Science of JavaScript ($29 Value FREE For a Limited Time)
The Art & Science of JavaScript ($29 Value FREE For a Limited Time)


Today's Tutorials





Online Income Kickstart


Ajax in Action 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:

Code Example: (!)
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.




™SoftXML.   Privacy Statement  |  Article Archive  |  Popular Web Development Books
^Top