Ok this part is easy enough
just some standard HTML code to get the page
going, so far so good.
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.
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 at
the top
footer|this text goes at the bottom
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 category 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.
