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++)
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"
Quote:
<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=st r;
}
}
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:
Quote:
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.
Explaination:
Will provide an in-detail explaination soon
as am havin exams now
A Newbie Tutorial to AJAX
Linear Mode
