This is a really neat tutorial that I enjoy using because it uses AJAX. Basically I want to call data into a web site, but I hate having to reload a new page every time for that. What we are going to do is store some data in a separate text file then call that data from our HTML page using AJAX (really just JavaScript in this case).
Line by Line
Let's first dive right into and view the code of test.html. I'll put comments below to explain as we go along.
Ok this part is easy enough just some standard HTML code to get the page going, so far so good.
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=iso-8859-1">
</head>
<body>
<title>CCE's AJAX Simple Tutorial
</title>
Ok so here we have our JavaScript code. This starts creates a function called createRequestObject. This will be the object that will go get our data for us, very simple. There is some quick version detection to satisfy both Internet Explorer and other web browsers.
<script type="text/javascript"
language="javascript">
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet
Explorer"){
ro = new
ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http =
createRequestObject();
Ok so now we have the object http with our request function built in. Now we have to tell it to do something, this happens next.
function sendRequest() {
http.open('get', 'tom.txt');
http.onreadystatechange =
handleResponse;
http.send(null);
}
We made a new function called sendRequest. You can see it uses our previous object http. The first line in the function uses the get command to get a file, in this case it is statically assigned the text file tom.txt.
NOTE: Dynamic data can be used as well very easily, see our other tutorials for both PHP and Coldfusion on this subject.
Ok so now the object is told to watch for the response ( to find out the status ) and then told to actually get the file.
function handleResponse() {
if(http.readyState == 4){
var response =
http.responseText;
var update = new Array();
Ok now this function handles the response of our last function. So let's see; it checks our http object for the readyState variable (the status) and checks to see if it is a 4 ( 4 means it worked). If it is a 4 then we assume the variable http.responseText holds the contents of the file, storing it to our new variable response.
Putting it all together - AJAX text into specfic tags
So now we have the contents of the file. We could stop here but I wanted just a little more than reading one file and then outputting it to the screen. I wanted this tutorial to grow with you. So what I did is made it so the text file can contain multiple lines of text and we access a specific line easily to put our site where we want it. To explain further let's look at the text file itself.
title|hi this is a message from tom
You will notice I have the word title followed by a | (shift + \ ) then the text I want to display. Title refers to the <div> where I want the text. I could have several of these if I chose, for example I could have.
header|this text goes into a div named header
footer|this text goes into a div named footer
So I can define several different places using <div> and access them. Now let's explain that a little bit more by looking at the next few lines of code. First I check to make sure the | symbol is there so I can tell what <div> I want it in and what is the text I want to display.
I then use the split function to split the variable at the | symbol, then storing it into a variable. I know have the div name in update[0] and the text itself in update[1].
if(response.indexOf('|' != -1))
{
update = response.split('|');
document.getElementById(update[0]).innerHTML
= update[1];
}
}
}
</script>
Ok now this should all come together. I have a <div id="title"></div> which is empty. You'll remember the title from above in our text file. Now look at the function called in our JavaScript link, sendRequest(title). That means to put the data from the text file we defined but ONLY the line that starts with title| and then put it between the <DIV> tags labeled title. See how cool that is? Now we can use that text file to put as much text as we want. And then call that text and put it exactly where we want it.
<a
href="javascript:sendRequest(title)"
mce_href="javascript:sendRequest(title)">Load
data into Title DIV below </a>
<div id="title">
</div>
</body>
</html>
Best uses for AJAX
Some cool things you can do with AJAX include, perhaps pulling a Coldfusion Blog Feed from a HTML page? That's something I'll work on in an upcoming tutorial.
