Ajax - one of the most important web technology in 2005. Ajax has changed not only the web development industry but also the software development industry. This new technology mades the gap between desktop application and web application smaller. Go here for more information about Ajax
In this tutorial, you will learn the basic principle of Ajax. You will see that it is not too much difficult.
Requirements for this tutorial:
1. Tomcat server (Download)
Step 1: Create a HTML file (C:\tomcat\webapps\ajax1.html)
<HTML>
<HEAD>
<script>
function loadurl(dest) {
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
xmlhttp.onreadystatechange = myHandler;
xmlhttp.open("GET", dest);
xmlhttp.send(null);
}
function myHandler(){
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
{
document.getElementById("output").innerHTML = xmlhttp.responseText;
}
}
</script>
</HEAD>
<body>
<input type="button" value="Load from server"/ onclick="javascript:loadurl('/sample.txt')">
<div id="output"></div>
</body>
</HTML>
Step 2: Create a sample resource
In real applications, a servlet or something else :) gets data from database and sends them back to the client.
To make it simple, I create a simple resource, just a simple text file located in the server:
Content of C:\tomcat\webapps\ROOT\sample.txt
Step 3: Test your result
- Start your server (C:\tomcat\bin\startup.bat)
- Open IE, type in address bar: http://localhost:8080/ajax1.html
- Click the button "Load from server"
That's all !
Review
Now look again what is under the hook. When you click the button, the javascript function loadurl will be called.
What happens in loadurl ?
1. create XMLHttpRequest object
2. Assign the listener for the event onreadystatechange
3. XMLHttpRequest object send request to server by executing the method: open("GET",dest)
4. Server receive the request, get content in the sample.txt, send back to the client. The browser will listen and invoke the listener myHandler() everytime the readyState of XMLHttpRequest object is changed.
5. myHandler need to check if the received data is ready or not. When the receiving is completed, the value of DOM object with id="output" will be changed to the response text
6. Maybe you wonder why we use xmlhttp.send(null) in this case. The reason is when we call the send method, the browser will wait for the response from the server. This is the Synchronous model. But Ajax is asynchronous, we will send null to the server, so the client will not wait. We send request by open("GET",dest);
December 18, 2006
Ajax - Hello World
Tags:
Ajax
Subscribe to:
Post Comments (Atom)
3 responses:
When I initially commented I clicked the "Notify me when new comments are added" checkbox and now each time a comment is added I get several
e-mails with the same comment. Is there any way you can
remove people from that service? Thanks a lot!
My web-site ... LeParfait Review
I like the valuable info you provide on your articles. I will bookmark your blog and
test again here regularly. I am moderately sure I'll be informed a lot of new stuff right right here! Best of luck for the next!
my blog; Garcinia Cambogia Diet
I almost never write comments, but I read a few of the comments
here "Ajax - Hello World". I actually do have some questions for you if you don't mind. Could it be only me or do some of these responses come across like they are coming from brain dead folks? :-P And, if you are writing at additional online social sites, I'd like to follow you.
Could you list of every one of all your public pages like your twitter feed, Facebook page
or linkedin profile?
Here is my web page :: Saphire Ecigs
Post a Comment