Jan 04
A Newbie Tutorial to AJAX - The Web 2 Experience
Scribbled on Friday, January 4th, 2008Updated on: 03 August, 2008 at 12:33 AM IST
Here is a simple tutorial for AJAX aspirants who just want to know how Ajax works without 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)
DOWNLOAD the 2 files from these links ajax.html and sample.txt
Make the html file named anything.
- I hav named it “ajax.html“
Here is the source (CTRL+U):
<html> <head> <title> A Simple Ajax Example </title> <script type="text/javascript"> <!-- Older browser hidden source 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><font color='green'>" + request.responseText + "</font>"; 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:
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 web page.
- thats it.
Output:
Explanation:
Explanation coming soon 
Yeah its a bit lit but now am free so watch out !
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
1 Trackback(s)