Feb 28
In AJAX Fast and Easy - part one, we defined AJAX and decided it wasn’t really that complicated.
In AJAX Fast and Easy - part two,
we created an index.html file, a backendHTML.html file and we downloaded the
Prototype Javascript framework. We put them all together and made some
ajax magic happen. However, in part 2 we left out all the junk about XML, and all we really did was display
the ajax results as an alert. Not too useful, but it proved the point and it was pretty fun.
Today we are going to kick some ajax ass. We are going to get it to do all kinds of useful junk for us. First
we will make an ajax call to our backend page and stuff that response into our index page. Then we will
make an actual XML file, call it with ajax, parse the XML and render the data on our index page. By the time we
are done, you will have some pretty functional code that you will be able to use on your own projects.
Ready to get going? Ok, make sure you got all your files from part one and two in C:\ajaxHowTo\. If you lost them,
or you didn’t do part one or two, or you’re just lazy, you can
download a zip file
with all of the source code already written for you.
Just like we did in part two, we are going to take this step by step.
Open index.html for editing. We are going to start by writing a new function for another ajax call. Add the code from the codebox below inside the script section of index.html, just below our getSampleHTML function.
function getHTML() {
new Ajax.Request('backendHTML.html', {
method:'get',
onSuccess: getHTMLSuccess,
onFailure: getHTMLFailure
});
}
You’ll notice that the only difference between this function and our first function, getSampleHTML, are the onSuccess
and onFailure pieces. What we are doing here is telling the ajax call to call two new functions,
that we haven’t written yet, on a success or failure.
Now create two new functions called getHTMLSuccess and getHTMLFailure as shown in the code below.
function getHTMLSuccess(originalRequest) {
var response = originalRequest.responseText;
$('htmlResult').innerHTML = response;
}
function getHTMLFailure() {
alert('woops, what happened?');
}
Lets take a minute to figure out what it is we are trying to do here.
We wrote the new ajax call and named it getHTML, nothing new, we only changed the onSuccess and onFailure calls.
Then we created the getHTMLSuccess function. What this function does is, it accepts the ajax response as originalRequest as you can see in getHTMLSuccess(originalRequest). We create a variable named response and set
it equal to the response text. The response text will be the html that gets sent back, just like in our alert from
part two. The difference here is instead of displaying the response in a javascript alert, we are assigning it
to a variable and stuffing the html response into our ‘htmlResult’ div further below in the body of our html.
Are you asking “where the hell did we do that?” No problem, I kind of snuck it in there. The prototype
framework has some cool special shortcuts for doing everyday javascript junk. In this case, we have the $ sign.
The $ sign with prototype is used as a shortcut for “document.getElementById(’htmlResult’)”. If it still doesn’t
make sense, just take my word for it. The $(’htmlResult’).innerHTML = response; line will insert the ajax
response into our htmlResult div and the content on the page will be magically updated.
The second function we wrote is getHTMLFailure. As you can tell, its only job is to show an alert if a failure occurs.
Normally, under these circumstances, the only time you can get a failure is if the backendHTML.html file can’t be found.
So, what’s next? Well, nothing really, we just wrote some kick ass ajax code that will go get the contents of any
file we decide to put in the Ajax.Request(’backednHTML.html’) section of our function. If we open up index.html and
click on ‘call getHTML()’ we should see the text on the page change and the contents of backendHTML.html should
magically appear at the bottom of the page.
That’s ajax man! That’s really all there is to it. Just like in part two, we use prototype to
make an ajax call to our backend page, but instead of showing the response in an alert, we display it on the page.
Much more useful if you ask me.
Now it’s time for us to put it in high gear and see what this ajax stuff is really all about and how it got its name.
Open your favorite text editor and make a new document. Enter the code displayed in the code block below, and save the
file as backendXML.xml in your ajaxHowTo folder.
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<title>The Shining</title>
<author>Stephen King</author>
<ISBN>0743437497</ISBN>
</book>
<book>
<title>Fahrenheit 451</title>
<author>Ray Bradbury</author>
<ISBN>9506440298</ISBN>
</book>
</books>
We will create a new ajax function to call this new file. Open up index.html and create a new function just like the one
in the code box below. This function is the same as the getHTML function we just wrote, we only change the URL we call,
and the onSuccess function name.
function getXML() {
new Ajax.Request('backendXML.xml', {
method:'get',
onSuccess: getXMLSuccess,
onFailure: getHTMLFailure
});
}
Next we write our most complicated function of the entire project. Add the function in the code box below to index.html,
and we will walk through what it’s doing line by line. Don’t worry, it will make sense, but it is some pretty complicated
stuff. Javascript is like ice skating, when it’s done well, it looks easy. And, I think it should be.
function getXMLSuccess(originalRequest) {
var response = originalRequest.responseXML;
var numberOfBooks = response.getElementsByTagName('book').length;
var titles = response.getElementsByTagName('title');
var authors = response.getElementsByTagName('author');
var isbns = response.getElementsByTagName('ISBN');
var resultText = "";
resultText = "Total number of books = " + numberOfBooks;
for( i=0; i<numberOfBooks; i++ ) {
currentTitle = titles[i].firstChild.nodeValue;
currentAuthor = authors[i].firstChild.nodeValue;
currentIsbn = isbns[i].firstChild.nodeValue;
resultText = resultText + "<p>";
resultText = resultText + "<br/> Book " + (i+1);
resultText = resultText + "<br/> Title = " + currentTitle;
resultText = resultText + "<br/> Author = " + currentAuthor;
resultText = resultText + "<br/> ISBN = " + currentIsbn;
resultText = resultText + "</p>";
}
$('xmlResult').innerHTML = resultText;
}
Just like the earlier function we wrote, getHTMLSuccess, this new function accepts originalRequest as the ajax response.
We assign the response to a variable named response, but this time we use originalRequest.responseXML instead of
responseText. That part is important and you must use responseXML if we are going to parse the XML file to extract the
data we want from it.
The reason we would do this is because, unlike making an ajax call to an HTML file and displaying the entire file,
we want to call an XML file and only extract the specific data that we want from it. Remember in part one, we said that
the XML nodes only define what the data means? Well, the tag doesn’t mean anything to an HTML file, so why would
we want to render that on our HTML file? We wouldn’t, but we would probably want to render the book name and that’s
what we are about to do.
First we need to find out how many books we have, so take a look at the numberOfBooks variable. This variable counts the
book nodes. In this case there are two. The next variable is titles, this variable gets all the nodes named title from
the XML. The same goes for authors, and isbns.
We define an empty string called resultText that will be a place holder for some HTML we will build in a minute. We then
start adding text to the new resultText string to display the total number of books found on the XML file.
Next we create a loop to repeat the same procedures for each book, in this case we will loop twice. Our loop creates
three variables and assigns the node values to them. I’ll give one example of how it works and the rest should be self-explanatory. currentTitle = titles[i].firstChild.nodeValue means that on the first round of the loop we are looking
for titles[0].firstChild.nodeValue, which means… Give me the nodeValue, in this case ‘The Shining’ of the first item
in the XML file named title (<title>The Shining</title>).
The rest of the script just does the same thing over and over again for as many books as we have in the XML file. We get
the values from the XML, we assign them to variables, we attach the values to the resultText variable, we add some
normal HTML junk around them to make them look pretty, then we do the prototype magic again.
We use the $ sign to update the div xmlResult with the text we just created in our resultText variable. Again, this is
nothing new, its simply document.getElementById(’xmlResult’).innerHTML = “the junk we just looped through”.
Open your index.html file in the browser and click on ‘call getXML()’. You should see the ajax magic happen before your
eyes and text should magically appear on the page. Again, if you don’t feel like doing any of this, just view the
sample page that I made and click the link.
That example took a little longer to explain, but that is pretty much everything you need to know about ajax.
Page A makes an AJAX call to page B, and page A displays the content of page B.
If you want to call an HTML page, fine. If you want to call an XML file to extract data from, fine. Either way, you
have a page that makes a call to a backend page. Normally you will have some sort of server side technology on the
backend page like PHP or java that runs database queries and gets dynamic content, but that has nothing to do with
ajax itself.
I am a huge fan of the Prototype Javascript framework, and
there are ton of other shortcuts like the $ sign built into it. There are also other ways to make ajax calls with prototype
that actually make the job we just worked even easier, but for the sake of the explanation, we didn’t use them. I
will try to put together another post that goes over some of the most useful things you can do with prototype in the future.
Here is a cheat sheet for prototype
that you will probably find useful.
Well, that’s it. Now you know ajax. It’s no big secret, it’s not complicated, and it’s pretty fun.
What would you like the hear about next?
Anyway, I thought it would be cool to make a family tree website but put more of a web2.0 social networking kind of spin on it. Try to make it sort of viral so that family members could pass it around and have other family members fill in blanks for their parts of the family. It could show how everyone is connected, or just how a specific family is connected, or show a three dimensional tree structure, and on and on.
