Tutorials - AJAX - Openzu.com

AJAX has existed for a really long time, however has only recently been adopted properly with web 2.0 sites such as facebook, twitter and myspace! For the sake of making life easy, we recommend you do the following before starting this tutorial. It will only take you a couple of minutes, but will save a great deal of time later on!

Download Prototype JS from http://www.prototypejs.org/download
Create yourself an ajax spinner from http://www.ajaxload.info
Rename to spinner.gif and save your spinner gif to www/images
Create yourself a blank javascript file called main.js
Put main.js and prototype.js in www/javascript - yes you can rename prototype js file to whatever you want!

<head>
	<!--
	***************************************************************
	
	Amongst any other tags in your header, include the following...
	
	***************************************************************
	-->
	<script type="text/javascript" src="/javascript/main.js"></script>
	<script type="text/javascript" src="/javascript/prototype.js"></script>
</head>

Now in your blank main.js file, include the following code below. This code uses the prototype source, and combined creates a really simple generic set of methods.

//This code is free to use, provided this header stays in-tact.
//Created By C.BECK - Use in combination with ProtoType.js
//For more awesome code, please visit http://www.openzu.com

//addRandomGET - Stops Internet Explorer Caching Requests...
function addRandomGET(reqURI){
	var peram = 'iefix=';
	var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
	var string_length = 5;
	for (var i=0; i<string_length; i++) {
		var rnum = Math.floor(Math.random() * chars.length);
		peram += chars.substring(rnum,rnum+1);
	}
	if(reqURI.match(new RegExp(".*?\\.php\\?","gim"))){
		reqURI += '&'+peram;
	} else {
		reqURI += '?'+peram;
	}
	return reqURI;
}

//Ajax Post Request
function docAjaxPostRequest(elementContainer,requestURI,formContainer,functionCall){
	var perams = $(formContainer).serialize(true);
	this.focuselm = $(elementContainer);
	this.focuselm.innerHTML = '<div style="padding:10px 50px 10px 50px;text-align:center"><img style="display:block;border:0px" src="/images/spinnder.gif" /></div>';
	new Ajax.Request(addRandomGET(requestURI),
		{
			parameters: perams,
			onSuccess: function(transport){
				var response = transport.responseText || null;
				if(response==null){
					this.focuselm.innerHTML = 'A problem has occured. [Response from server is NULL]';
				} else {
					this.focuselm.innerHTML = response;
					if(functionCall){
						functionCall['fCall']();
					}
				}
			},
			onFailure: function(){
				this.focuselm.innerHTML = "A problem has occured [Ajax Post Request Failed]";
			}
		});
}

//Ajax Get Request
function docAjaxRequest(elementContainer,requestURI,functionCall){
	this.focuselm = $(elementContainer);
	this.focuselm.innerHTML = '<div style="padding:10px 50px 10px 50px;text-align:center"><img style="display:block;border:0px" src="/images/spinnder.gif" /></div>';
	popup.recenterPopup();
	new Ajax.Request(addRandomGET(requestURI),
		{
			method:'GET',
			onSuccess: function(transport){
				var response = transport.responseText || null;
				if(response==null){
					this.focuselm.innerHTML = 'A problem has occured. [Response from server is NULL]';
				} else {
					this.focuselm.innerHTML = response;
					if(functionCall){
						functionCall['fCall']();
					}
				}
			},
			onFailure: function(){
				this.focuselm.innerHTML = "A problem has occured [Ajax Request Failed]";
			}
		});
}

Now, you have this code in-place, create a file in your webroot called 'ajaxtest.html' and put the following code in.

<b>My First Ajax Request!<b>

Almost done... the final stage is to create a 'test.html' file with the following code (or just append another existing file)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>My First Ajax Request!</title>
		<script type="text/javascript" src="/javascript/main.js"></script>
		<script type="text/javascript" src="/javascript/prototype.js"></script>
	</head>
	<body>
	<div id="updatecontainer" style="margin:10px;background:#F0F0F0" onclick="docAjaxRequest('updatecontainer','/ajaxtest.html')">Click here and watch me update from 'ajaxtest.html' !!</div>
	<div id="anotherupdatecontainer" style="margin:10px;background:#F0F0F0" onclick="docAjaxRequest('anotherupdatecontainer','/ajaxtest.html',{fCall: function(){alert('Wuhu, the container has just updated!');}})">Click here and watch me update from 'ajaxtest.html' and then display an alert after the request is done !!</div>
	</body>
</html>

This is just the start... ajax is pretty powerful and can be used to create highly dynamic and easy to use websites! The code above we use on our development projects and is very flexible. Please feel free to make changes, we only ask that you leave the header in-tact...

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.