AJAX at work - Sample program demonstrating AJAX

//Select this following code, paste in dreamweaver or any text editor.
// save them in any web server root directory. I saved in wwwroot of
// Inetpub. execute the program using "http" protocol for instance //"http://localhost/ajaxprograms/Index.html" .

//Index.html


<html>

<head>
<title> Ajax at work <⁄title>

<script language = "javascript">
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}

XMLHttpRequestObject.send(null);
}
}
<⁄script>
<⁄head>

<body>

<h1> Fetching data with Ajax <⁄h1>

<form<
<input type = "button" value = "Display Message"
onclick = "getData('data.txt', 'targetDiv')">
<⁄form>

<div id="targetDiv">
<p>The fetched data will go here.<⁄p>
<⁄div>

<⁄body>
<⁄html>

//data.txt
This text was fetched using Ajax.

Let us revise some key points about AJAX step by step:

The XMLHttpRequest object is the heart and soul of Ajax. Its methods and properties drive the asynchronous requests that make Ajax applications feel so responsive.

In this sample AJAX program, we’ve seen how to use the XMLHttpRequest object in three steps:

1. Create an instance of the object that will work across different browser implementations.
2. Prepare a request using the onreadystatechange event handler, the open method, and the send method.
3. Process the response from the server through the properties readyState, status, responseText, and sometimes responseXML.

This basic model will remain unchanged for all the AJAX programs.


XMLHttpRequest Object readyState property

Now we've been introduced to XMLHttpRequest object, their are two properties you should get to know this object and object supports. first is the readyState property of XMLHttpRequest object. the ready state property tells you what's going on XMLHttpRequest object as it is downloading data .
we will be using this ready state property and the ajax enabled web application since you can see hear index.html example we have XMLHttpRequest object. readyState propery, which is the value 4.
So before continuing what is that, take a look at possible values of XMLHttpRequest object 's readySstate property.

the possible values of readyState property are:

0 - Uninitialized
zero means XMLHttpRequest object hasnot been initialized and not ready for been used. Not ready for work and so if the readystate property is zero and you are not going to work out XMLHttpRequest object and hence it is properly initialized.

1 - Loading
one means xmlHttpRequest object is loading the data that you have requested from the server.

2 - Loaded
two means your data has been loaded the requested data that if you acquired of the server that is been loaded and its not yet complete but it been loaded the processing almost has finished

3 - Interactive
Three means that the XMLHttpRequest object it is so called in interactive state which means that the data has been downloaded by the which still you can interact with it and ask it what s type of the readystate property is. So the interactive state means the data has not yet been downloaded it is in processing in downloading so you can interact with XMLHttpRequest object

4 - Complete
Four means the download is complete and we remembered that ajax is for the asynchronous javascript and xml. Asynchronized part means that we are going to use XMLHttpRequest object to ask server send data to us and we are going to wait untill that data is complete we are not pause the browser so this is the way you check data request is complete in XMLHttpRequest object readyState property and when the property value holds for 4 that means asynchronous download of your data is complete

so that introduces the readyState property XMLHttpRequest object and you just see the following javascript code :

function doThis() {
if (request.readyState == 4) {
// do something with the response
}
}

Ajax at work - Create XMLHttpRequest object for Microsoft and Non Microsoft Browsers

The actual AJAX stands for Asynchronous Javascript and XML. Asynchronous means that you can interact with the server in asynchronous manner. Which means you don’t have to pause the browser, the browser don’t have to wait for the data have to return before preceding what happens is browser ask for data and data sent back to the browser, and when browser notified, continue in the meantime waiting for data continue processing and performing actions for the user. But when the data downloaded browser notified and the data is used by javascript inside the browser. That’s the javascript part of Ajax is javascript and make everything work in browser allows you to connect the server.

So Asynchronous Javascript and XML, now there’s actually two ways working with data from the browser either plain text or XML. We’re going to work with plain text originally, because it’s easier to work with text and Javascript than XML. But you can also work with XML, XML plays crucial role on the web for data handling. It is the preferred technique for passing data backend and forth on the internet because XML data is in pure text form, and Internet World Wide Web set up to handle text sent back and forth in HTML format, you can send in XML format. So data being sent around in internet using XML, and going to work with XML a little bit. However text data being downloaded from internet.

the example Index.html, This is our first Ajax example shows us how to work with AJAX. Using AJAX techniques, this web application fetch data from server and replace this text with fetch data is goes here data fetches from server, see here, when you click the “display message” button, the text is fetched using AJAX.

This is first AJAX example, start look at how this works in Javascript. This is important part, is for this particular example in Javascript, what happens here is the element The first thing that this example does is creating an XMLHttpRquest Object.

XMLHttpRquest Object are what makes AJAX possible. These special objects built in all modern browsers allows you to connect to web server behind the scenes without causing page refresh. This is crucial part in AJAX, It’s XMLHttpRequest Object what makes AJAX possible, because using this object allow you to connect to the server behind the scenes and download data. So the first order in any Ajax application is to create XMLHttpRequest Object with which connect to the server.

So this Javascript, in this application starts by executing this code which creates javascript variable called XMLHttpRequestObject set to false so there’s nothing in the variable first.

var XMLHttpRequestObject = false;

Idea is now we have to create an XMLHttpRequest Object in order to proceed the rest of the Ajax application. So the way you create an XMLHttpRequest objects varies by browsers. So first work with non-microsoft browsers, we say

if (window.XMLHttpRequest)

This is the way we are checking, we’re working with non-microsoft browsers and if the window object supports XMLHttpRequest object creation. If so, this expression returns true. Then you can create XMLHttpRequst object like this

Set the variable

XMLHttpRequestObject = new XMLHttpRequest( );

And that creates new XMLHttpRequest object for you for ready to use Ajax in non Microsoft browser.

What if in Microsoft objects, in that case you check for the presence of window's ActiveX Object

if (window.ActiveXObject)

So this expression returns true then you have working in Microsoft Objects allow you to create XMLHttpRequest Objects. Then this is the way we do it, you set the XMLHttpRequestObject variable which was originally set to false. So new ActiveXObject(“Microsoft.XMLHttp”) ;

XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

That is the way the Javascript statement we need in Microsoft browsers in order to create a new XMLHttpRequestObject which you need for AJAX.

Just recap, when the page first loads, this javascript executed.

Creates XMLHttpRequestObject set to false.

If not working in Microsoft objects then window.XMLHttpRequest returns true, if you create XMLHttpRequestObject in this way:

XMLHttpRequestObject = new XMLHttpRequest( );

Otherwise, if you are working in Microsoft browsers that supports creation of XMLHttpRequest object then create XMLHttpRequestObject in this way:

XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);


So after this script executed, you have XMLHttpRequest object, which is focus of all Ajax operations.

Examine this JavaScript code here :

var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}



Useful Links on Adobe Flex

Your Ad Here

Latest Books on Adobe Flex