A Newbie Tutorial to AJAX

[Faun]

Here is a simple tutorial for AJAX aspirants who just want to know how ajax works wihout digging into server side programming.

Needed Tools:

• Text Editor (preferably Notepad++)

• IE 6+, Firefox 0.8+.

Needed Files:

• A html file (named as ajax.html)

• A text file (named as sample.txt)

Make the html file named anything.

• I hav named it "ajax.html"

<html>

<head>
​

<title>
​

A Simple Ajax Example
​

</title>
​

<script type="text/javascript">
​

<!-- Older browser hidden soce
​

function doAjax(fileToRead){
​

var request = null;
​

var str;
​

if(window.XMLHttpRequest)
​

{
​

str = "inside XMLHttpRequest"
​

document.getElementById("displayDiv").innerHTML= str;
​

request = new XMLHttpRequest();
​

}
​

else if(window.ActiveXObjexct)
​

{
​

str = "inside ActiveXObject"
​

document.getElementById("displayDiv").innerHTML= str;
​

request = new ActiveXObject("Miscrosoft.XMLHTTP");
​

}


​

if (request)
​

{
​

request.open("GET",fileToRead);
​

request.onreadystatechange = function()
​

{
​

if(request.readyState == 4)
​

{
​

str = str + " <br> yahoo ajax xompleted" + "<br> content of file sample.txt is:<br>" + request.responseText;
​

document.getElementById("displayDiv").innerHTML=str;
​

}
​

}
​

request.send(null);
​

}
​

else
​

{
​

alert("you must upgrade your browser!");
​

}
​

}
​

-->
​

</script>
​

</head>

<body>
​

<input type="button" value="make ajax request" onClick="doAjax('sample.txt');return true;">
​

<div id="displayDiv"></div>
​

</body>
​

</html>

Now make another file "sample.txt" from where the data will be fetched to html page.
Let the content be anything u want.

• Here are mine "sample.txt" contents:

u got the ajax request completed
with the data from this file named
sample.txt

Working:

• open "ajax.html" in browser

• when u click on "make a ajax request" button the content of file "sample.txt" will be fetched without a reload of webpage.

• thats it.

Explaination:
Will provide an in-detail explaination soon as am havin exams now

 

[krates]

well good one for newbie and ajax by it's name and work looks dificult but it is to o easy