AJAX Made Easy

timROGERS · 22-02-2006, 07:50 PM

Ever wanted to be the envy of your web designing friends and be able to do mega-trendy AJAX? Well, now you can with AJAX Made Easy, first, you need to get your framework, which is a file called easyajax.js! Here is the contents of it:

Code:

function ajaxobject() {
    var objType = false;
    try {
        objType = new ActiveXObject('Msxml2.XMLHTTP');
    } catch(e) {
        try {
            objType = new ActiveXObject('Microsoft.XMLHTTP');
        } catch(e) {
            objType = new XMLHttpRequest();
        }
    }
    return objType;
}

function ajax(url,elementContainer){
	document.getElementById(elementContainer).innerHTML = '<strong>Loading...</strong>';
	var theHttpRequest = ajaxobject();
	theHttpRequest.onreadystatechange = function() {processajax(elementContainer);};
	theHttpRequest.open("GET", url);
	theHttpRequest.send(false);

		function processajax(elementContainer){
		   if (theHttpRequest.readyState == 4) {
			   if (theHttpRequest.status == 200) {
				   document.getElementById(elementContainer).innerHTML = theHttpRequest.responseText;
			   } else {
				   document.getElementById(elementContainer).innerHTML="<p><strong>Error!</strong> HTTP request return the following status message:&nbsp;" + theHttpRequest.statusText +"<\/p>";
			   }
		   }
		}

}

That is the Javascript that does all the AJAX, now you need a HTML file that shows it off! Create a HTML file and place this in the head tags:

Code:

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

And then you are ready to do your uber leet AJAX. This AJAX library lets you replace the text on the page without moving between pages. This can even be used with onSubmit on forms!

Now, create a span with an id of your choice. Here you go:

Code:

<span id="ID YOU CHOOSE"></span>

Now create a hyperlink like this:

Code:

<a onClick="ajax('PAGE TO SHOW','ID YOU CHOSE EARLIER');return false;">Click here</a>

Now, if you click on that link, first you will get a piece of text that says "Loading..." and then when it has finished getting the page it will display it - all done without iFrames or refreshing the page. My next tutorial will be AJAX with forms!

dudez12 · 22-02-2006, 10:32 PM

This thread deserves to be stickied.

~~Dan Williamson~~ · 22-02-2006, 10:55 PM

Hey,

Nice one Tim. You was yapping on about AJAX on MSN and I didn't get you lol. Anyway i'll have to rep you some othertime for this as well :@

- Dan