In “AJAX Fast and Easy - part one“, we defined AJAX. We said the Asynchronous part could be compared to opening a link in a new window so that you don’t leave your current page. We said the Javascript part could be as simple as adding a call to the freely available Prototype Javascript framework. We decided that XML was pretty simple to understand because all it does is describe the data you put in it, and we even went as far as saying that XML is not necessary when writing AJAX.
The first thing we will do in part two is prove that last statement. XML is not necessary to write AJAX. So, without further ado, take out your notepads, or your favorite HTML editor and get ready to write some AJAX code. If you are running a web server, great, but if not, don’t worry about it. If you have Firefox installed, you can run all of this code without a web server.
Lets go about this step by step, so we can see how easy it really is.
- Create a new directory for our files, and name it ajaxHowTo (ex. C:\ajaxHowTo\).
- Create a new file in C:\ajaxHowTo\ named index.html.
- Open index.html for editing and enter the code below to create a simple web page.
<html>
<head>
<title>Ajax How To</title>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
</head>
<body>
<p>
<a href="javascript: void(0);" onclick="getSampleHTML();">call getSampleHTML()</a>
and display results in alert from sample code
</p>
<p>
<a href="javascript: void(0);" onclick="getHTML();">call getHTML()</a>
and display results in a div below
<a href="javascript: void(0);" onclick="clearNode('htmlResult');">clear</a>
</p>
<p>
<a href="javascript: void(0);" onclick="getXML();">call getXML()</a>
and display results in a div below
<a href="javascript: void(0);" onclick="clearNode('xmlResult');">clear</a>
</p>
<p>Display the AJAX results below:</p>
<div id="htmlResult">
</div>
<div id="xmlResult">
</div>
</body>
</html>
Feel free to open up your index.html file and view it in a web browser. The links won’t do much right now because we haven’t written the javascript functions yet, but it should look like this. For the very lazy, I have packed all the sample code in a zip file for download.
<html>
<head>
<title>Ajax How To</title>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<script>
</script>
</head>
<body>
function getSampleHTML() {
new Ajax.Request('backendHTML.html', {
method:'get',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
alert("Success! \n\n" + response);
},
onFailure: function(){
alert('Something went wrong...')
}
});
}
<html>
<head>
<title>Ajax How To</title>
</head>
<body>
Hey, you just wrote some AJAX!!
<br/>
Wasn't that EASY!!!!
</body>
</html>
We should now have 3 files inside of our new folder /ajaxHowTo/. We should have index.html, backendHTML.html, and prototype-1.6.0.2.js.
That is all we need. We just wrote our first AJAX code! Wasn’t that easy? Just two HTML files and one javascript function!
Now, go ahead and open index.html. Click on the first link labeled “call getSampleHTML()”. Clicking that link causes a call to our Javascript function named getSampleHTML(). That function calls a function built into Prototype called Ajax.Request(). Ajax.Request() gets passed the name of the file we want to call via AJAX, in this case “backendHTML.html”. In the onSuccess section of our function, we specified that we want an alert to appear with the words “Success!” followed by the content of the file we called through AJAX.
Thats all there is to it!
It’s as simple as 1,2,3!
Page A makes an AJAX call to page B, and page A displays the content of page B.
Thats AJAX!
That concludes “Ajax Fast and Easy - part two”. In part three, we will expand on these files by adding the ability to render the AJAX response on the current page as HTML, and we will make a call to an actual XML file, parse the XML and render the XML response on the page as well. Don’t worry, I promise it will be fast and easy.
UPDATE:
Ajax Fast and Easy - part three is now available
