[Tutorial] Developers Introduction To AJAX Technology
by17 May 2005
Rating: (9 votes - 4.78 average)
Note: In an effort to keep discussion on track, any questions you have towards me un-related to the tutorial itself, please feel free to PM me.
Hey there, I thought since developers will like to use AJAX technology in future modifications perhaps, it would be good to have some form of tutorial, explaining how to set up a basic XJAX engine
- Also, please don't steal my tutorial, if you wish to post it on other sites, then leave a directing link back to this thread as a source of origin, thanks
What is 'AJAX'?
Well to put it as simply as possible, AJAX allows a web application to send and receive data via a XML HTTP request - with absolutely no page refreshing at all! I'm sure you could think of endless possibilities where it could be implemented to make things so much better, faster, and more user friendly.
How does AJAX work?
A 3rd part, which again is optional, but most likely what you will use, is a dynamic server-side script, such as PHP, you could use this to output 'dynamic' XML files which contain different data depending on conditions set.
Enough! I want to see a working example!
The request is different for IE, than it is for other browsers, in IE you would have:
While in Mozilla/Netscape etc.. you would have:
So to make the request work on all the browsers, i would suggest using:
We'll worry about the collectData() function after we've gone through the rest of this function. Next up, we want to specify the request, such as the URL, method of request (POST/GET etc...), and if we will use 'Asynchronous' or not.
Okay, so how do we set the request?, let's see..
The method is usually "GET", unless you specifically want "POST", the location is the location of the request, i.e.: data.xml, async is Asynchronous, remember we want that to be true, and the username & password variables are for authentication, if the page requires it, if not just ignore them.
So a basic request would be:
No we're nearly done, just one more thing - send the request!
You'll notice the parameter in the send() function is blank, leave it as this, Mozilla complains if it is not specified, you can even set it to null, just as long as it is not ignored.
Okay, so lets see what the whole function would look like:
Next up - collectData(), as said above, this function will determine if the request is complete and ready for use, making it safe really before we attempt to try do anything more. It's a really simple function, so Iíll just paste it down and show you how it works.
Okay, we check first in an if conditional that the state of the request is 4, which means it has loaded. Next we check that the page status is 200, which is 'OK'. After that you're ready do your nifty bits of programming to make things fancy.
In this example, i have slightly modified the 2 functions above to include a parameter for usage, Iíll explain it below.
We assume that 'data.xml' has the following contents:
The task: Pull out all username and userid from XML using AJAX.
You'll notice the requestData() & collectData() have a new parameter as said earlier, this is to allow one function to call XMLHTTP request, but allow another function to parse the data once it has been collected, so you don't have to specify tons for different functions over and over for different XMLHTTP requests.
Apart from that, the function parseData() is the only one added, this is the handler for the XML data. Request.responseXML.documentElement will return the document for the XML, which is an object, note that if you have not sent a valid XML file over, then you may not use this method, it will appear as null (also if your using php to generate a dynamic XML file, don't forget to add header('Content-Type: text/xml');!).
Once loaded in your browser, you should see:
If you wanted to send non-XML data via a XMLHTTP request, then you can call the whole file contents once the data has been collected by collectData(), to call it, simply put:
You will see a pop up with all the contents of the file, just store that in a variable and you're ready to make your own parser for it, if the predefined js methods just don't do it enough for you
Alright, i think Iíve covered everything that needs to be said, to finish off, I have attached a file 'ajax.php', which includes the XML output (via php) and the JS AJAX engine, all in 1, simply upload it to your server to give it a go
I hope this has been of some help to you.
- Zero Tolerance
No members have liked this post.
Last edited by Zero Tolerance : 18 May 2005 at 10:36.
For discussion of this tutorial and other AJAX discussion, please post here: http://www.vbulletin.org/forum/showthread.php?t=81677
Please only post Tutorials in this thread or other help full information, no discussions please.
Marco van Herwaarden
Ex vBulletin.org Coordinator
No members have liked this post.
|Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)|
|New To Site?||Need Help?|
All times are GMT. The time now is 12:18.