Let's recap. This will be made in AJAX. AJAX uses javascript, so that means that we will have to use <script> tags. These should be found resting comfortably in <head> tags.
- Code: Select all
<script type="text/javascript">
.
.
.
</script>
For XHTML Strict validation, make sure you use the "type" attribute.
- Code: Select all
<script type="text/javascript">
var XMLHttpRequestObject = "false";
</script>
In javascript we declare variables by using the var keyword. Translation: when we want to tell javascript that we want to make a variable, we have to use the word var. It's a special word that javascript recognizes.
But what is a variable? Something that holds a value that can change. For example, in math, "x" can be "blue" or "5" or "store". Just like ""X" can change in math, so can a variable.
That variable name sure is long. You can feel free to make it shorter if you want, but make sure your naming is consistent - same name, same exact capitalization and spelling. JAVASCRIPT IS CAPITALIZATION AND SPELLING ANAL!!!!!!!! I can't tell you the half, but in the eyes of Javascript, milk, Milk, and MilK are three totally different things.
- Code: Select all
<script type="javascript">
var XMLHttpRequest = "false";
if(window.XMLHttpRequest){
XMLHttpRequestObject = new XMLHttpRequest();
} else (window.ActiveXObject){
XMLHttpRequestObject = new ActiveXObject("XMLHTTP.Microsoft");
}
Whew! Let's talk about this little bit here.
window is the keyword in javascript that refers to your browser window. We want to create an XMLHttpRequest object to use for later, but IE doesn't have those! OH NOES!!!!! :o :shock: What do we do?
else (window.ActiveXObject)
We make an ActiveXObject which is Microsoft (M$)'s way of handling things in IE. That way you don't have to lose any functionality there. Great and terrific! Now we can move on and not worry about whether or not this will work in your browser.
Be aware of things like this in all of your coding. Something that works in one browser does not work in all of them.
- Code: Select all
function getData(source){
This is our next line. function is the keyword ("hey javascript, i'm about to write a function..."), getData is the function's name (when we want to use this function, we use this name), and source is an argument. Arguments are optional, but when you use them, they can have any name you want. In this case, I want this function to work on whatever the "source" is. For a more detailed explanation, see the Class ID CSS Tutorial which has a pretty decent explanation of functions.
Going on, next we write:
- Code: Select all
if(XMLHttpRequestObject){
var data = document.getElementById("content");
XMLHttpRequestObject.open("GET",source);
XMLHttpRequestObject.onreadystatechange = function(){
if(XMLHttpRequestObject.readyState==4){
data.innerHTML = XMLHttpRequestObject.responseText;
}
That's a lot of code and we will have to break that down. Let's begin then:
We are going to write a bit of code to test things. The first test is to see if the XMLHttpRequestObject exists or not. In the first statement, we wrote
- Code: Select all
var XMLHttpRequestObject = "false";
This means that XMLHttpRequestObject does not exist at all. When we use the function, though, we force it to exist and when it does, we want to process it and use it, don't we? Yep! So we stick it in the if statement (a statement that starts with if). If that is true, then we move to the next line of the code.
var data = ... doesn't do anything but hold a value. Check this action out. We coders and scripters are lazy people. That's why variables exist; they keep us from having to write long lines of information over and over and over. I will show you how writing this variable helps later.
XMLHttpRequestObject.open("GET", source) is our next line. Let's talk about the word open for a moment. When you write a document in HTML like this:
- Code: Select all
<html>
<body>
<p>I'm a paragraph</p>
</body>
</html>
When you take this code, save it, and load it onto the net, it's considered to be a completed document that we cannot edit with anything on the page while it is being used or, in programmer terms: closed. The "...open" line opens the document up so that we can change the information while the webpage is being displayed in real time. How wonderful! But where will we get the new information from? Well, we get it from an exchange with the server. There are two ways to get information from the server: POST and GET. POST sends information to the server that can be processed and sent back in another form or emailed or whatnot. GET grabs information already stored on the server and gives it to you in pretty, pink wrapping (okay, maybe not pink, but you get the idea).
In this case, we are using "GET" to grab the information we want because we have already written the file with the new information inside which can be a text file, another webpage, or a picture.
source is the argument we used in our function earlier. This is what we are GETting. In short, we say "Open this document up so we can edit things. GET the source that I tell you to get and display it for everyone, please. Thanks."
onreadystatechange checks the ready state of the file you are currently using (which is four[4]) and is activated when you make a request (which changes the state to 0). If it senses a change, then function is activated. This function has no name and takes no arguments. That means we can't call this one to do anything. It only exists and works inside of the getData function we made earlier.
Ready State FYI:
0 = not started
1 = started and ready to be downloaded
2 = preparing for actual downloading
3 = downloading
4 = downloaded and ready for viewing
That's about how the ready state of a download works. You can also combine this with a status check, but for the sake of you being able to also test this code on your own machine without needing webspace, the code I have here will do nicely.
Let's move on to this last line.
data.innerHTML. innerHTML refers to the information inside of a tag. Normally something like a paragraph or a div or a table. You can replace text and other things by changing it's innerHTML value. Remember that data value we made earlier? Well, we are using it here now to shorten the code writing process. How? Well, let's show you what you have to write versus what you would have had to write.
What you wrote:
- Code: Select all
data.innerHTML = ...
What you would have had to write:
- Code: Select all
document.getElementById('content').innerHTML = ...
see? Much time saved in the end. Now, let's talk about this responseText thing. This means that the new information that the webpage will receive will be text. Responses come in an alternate flavor: responseXML which receives XML files. I don't use that, so no worries.
There. Now we have one last thing to cover.
XMLHttpRequestObject.send(null); is used to tell the server that we aren't sending any information back to it. It simply keeps the connection open until the downloading is done and then moves on.
And there. We have written the main body of the code. If you haven't been steadily coding so far, here's the whole shebang. Please note, I have substituted the word request for XMLHttpRequestObject because it was easier to write.
- Code: Select all
var request = false;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else if(window.ActiveXObject){
request = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(source){
if(request){
var data = document.getElementById("content");
request.open("GET",source);
request.onreadystatechange = function(){
if(request.readyState==4){
data.innerHTML = request.responseText;
}
}
request.send(null);
}
}
Whew! Well, now that we have the code in place, we can use it! "But haven't we used it?" Nope. We have to call functions in order for them to work, remember? *watches you nod* Good! Let's implement it now.
- Code: Select all
<a href ="#" onClick="getData('home.html');">click here</a>
This will grab whatever information is in home.html and display it in the a part of your webpage that has an id of "content" when you click the link. I recommend a div. The onClick method let's your page know that you want to run the getData function when this link is clicked.
Alternately, you could also code it in this way.
- Code: Select all
<a href="javascript:getData('home.html');">click here</a>
This alternate method saves you having to memorize methods and such and just says "Get the getData function. It's a javascript function".
FYI: The SNAFU to come wrote:I ran into a snafu trying to validate this javascript which leads to an important lesson: keep up with the validation for your DOCTYPE on your html page (see HTML tutorial for details). In order to make this script valid, the "onClick" needs to be all lowercase, not camelCased. Heed my words: this will come back to bite you if you don't listen to me.
Now that we have that out of the way, post your results here after using this code. Here's mine.
I hope I didn't miss anything
