Ajax, child of Javascript.

[Kuiren]

I. Ajax, the special child of Javascript.

In this tutorial, I will use an ajax framework to demonstrate the power of ajax. I except that the reader has basic knowledge of html and has even little bit of experience with programming. Instead of showing the stuff in the javascript that makes eveyrthing happen, I want you to first see it all happen, and even do it yourself, then I will introduce javascript object called XMLHttpRequest which makes this possible. In the second part of this tutorial, I want to emphasize on the difference between regular javascript, and what makes Ajax so special.

Prototype Based Example

1. Download the prototype framework. { Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications }

2. For this tutorial, create a new folder, and put the prototype.js in that folder. (I named mine AjaxTutorial1)

3. Create a text file called ajax_data.txt , and type(or copy and paste) into the file

This text was fetched using Ajax.

Save the text file.

4. Create a new blank html file (ajaxtest1.html) , and open it up in notepad or as I recomemnd Html-Kit. (Chami.com -- Web Developer Tools). First of all, we want to load the prototype.js.

<script src="prototype.js" type="text/javascript"></script>

src is the address to the javascript file, and type identifies the content inside the file.

Before I show you the javascript part of the tutorial, I want to explain the html relation to the ajax.

5. Add following into the script.

<div id="identifier">Fetched Data goes here</div>

Div is a html tag. It is short for division, and can be used to seprate the data through html. An automatic a new line tag (<br>) is added after the </div> . The tag is not the important aspect for this ajax tutorial, our main focus is the part id="identifier" .
Here is what this script going to do, our javascript is going to access the file ajax_data.txt , get the data and we can show that data on this page. Instead of randomly dislaying the data on the page, we can tell the javascript where to show the data. We use the id of the div to identify the place, and the script will put the data inside the div tag. (so it will replace Fetched Data goes here ).

6. Now we have a way to tell javascript where to place the data, now we need a way to tell the javascript when to do the fetching of the data and making it happen. Replace the last code you added with the following.

<div id="identifier" onClick="fetch()" >Fetched Data goes here</div>

You will notice the addition of onClick="fetch()" . I hope you can understand what onClick means, but just in case here is my explanation. U have the div tag, and whenever someone click inside the data of the div, where is in the " " will happen. In this case, whenever the user will click the Fetched Data goes here , the fetch() will happen. I suggest you save the html u have so far, and have a look at it. If you have everything correct so far, you will see a page with the text Fetched Data goes here . You can click it all you want, but nothing will happen (if u r in Ie you might even get an error box). This is because we have to create a function called fetch.

7. Now between the script and div tag, we need to add another script tag. Now, we have a choice. We can either create a new js file and load that file like we did with prototype.js or we can type the ajax into the html. For variety (and too lazy to create a new file) lets type the code into the html.

8. To start, first add the following. (if you are using html-kit, after typing script and ppressing spacebar, following will be automatically completed)

<script language="JavaScript" type="text/javascript">
<!--

//-->
</script>

Just to make sure we are on the same place, this is what the whole code should look like

<script src="prototype.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--

//-->
</script>

<div id="identifier" onClick="fetch()" >Fetched Data goes here</div>

9. We will add the javascript between

<!--

//-->

10. I hope you know what I mean when I say funtion and variables, things will make more sense. Even if you dont know, you might be able to figure it out.

So, create a new function called fetch with empty perimiter.

function fetch () {

}

11.The code of the function will go between the braces ( { } ) . We need two variable, first the name of the file where the data will be retrieved from, and the id of the tag where the data will shown.

var url = 'ajax_data.txt';
var target = 'identifier';

12. Here is the finishing code, this relies solely on the file prototype.js and that is the reason it should be loaded before you load your own javascript which uses it.

var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: ''});

Hmm, now to explain this, the following was taken from http://wiki.script.aculo.us/scriptac...w/Ajax.Updater

Syntax
var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: ''});
// make a HTTP request to the specified URL and update the 'target' element.

13. Now save this file, and click on the text on the page.


Credits to C-C.