AJAX technology is useful to update part of a web page. It is widely used on the Web 2.0 now. Several months ago I started to explore the AJAX technology and applied it to one of the web sites, U’s Bargain Network, that I managed. In order to use the JavaScript code across multiple website. I made it fairly generic. Since there are a lot of nice online tutorials available, such as the W3School AJAX tutorial, I do not want to explain the concept and technology and just provided a complete framework. You can modify to adapt to your specific situation.

//==========================================================
// This following section is for AJAX activities
//==========================================================
// Create by Zhanshan Dong, May 21,2009
// Modified on July 20, 2009
// Version 1.0.20

var xmlhttp;

//-----------------------------------------------------------
// The following functions are for tags
var callback_links = function()
{
	if (xmlhttp2.readyState==4)
	  {
	  document.getElementById("linkcontent").innerHTML=xmlhttp2.responseText;
	  }
}

// example for GET request
function showLinks(id,admin)
{
	var url="showlinks.php"+
		"?id="+id+
		"&admin="+admin;
	makeGETrequest2(url, callback_links);
}

// example for POST request
function addLink()
{
	var poststr = "id_category=" + escape(encodeURI(addlinkform.id_category.value )) +
		    "&link=" + escape(encodeURI(addlinkform.link.value )) +
		    "&description=" + escape(encodeURI(addlinkform.description.value )) +
		    "&name=" + escape(encodeURI(addlinkform.name.value ));
	makePOSTRequest2('addalink.php', poststr, callback_links);
}

//-------------------------------------------------------------
// common functions are for AJAX
// To make POST request
function makePOSTRequest(url, parameters, callback) {
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null)
	  {
	  alert ("Your browser does not support AJAX!");
	  return;
	  }

	xmlhttp.onreadystatechange=callback;
	xmlhttp.open('POST', url, true);
        if(xmlhttp.overrideMimeType)
        {               
		xmlhttp.overrideMimeType('text/xml');
        }
	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlhttp.setRequestHeader("Content-length", parameters.length);
	xmlhttp.setRequestHeader("Connection", "close");
	xmlhttp.send(parameters);
}

// To make GET request
function makeGETrequest(url, callback)
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null)
	  {
	  alert ("Your browser does not support AJAX!");
	  return;
	  }
	xmlhttp.onreadystatechange=callback;
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}

// create xmlHTTPobject
function GetXmlHttpObject()
{
	if (window.XMLHttpRequest)
	  {
	  // code for IE7+, Firefox, Chrome, Opera, Safari
	  return new XMLHttpRequest();
	  }
	if (window.ActiveXObject)
	  {
	  // code for IE6, IE5
	  return new ActiveXObject("Microsoft.XMLHTTP");
	  }
	return null;
}

If you want to update two area at one call, you can create a second xmlHTTPobject for this purpose. There are many ways to use the AJAX framework and functions. Here are several suggestions.

  • Call it at page loading stage
    <body onload="javascript:showLinks('36','0');">
  • A majority of time, the AJAX functions can be called from form submission
    <form name="addcatform" method="post" action="javascript:addLink();">
    

If you want to update multiple areas in a AJAX function call, you have to define a second xmlHTTPobject and then call multiple AJAX functions like the following:

onload="showComment(12401); showTags();"

Enjoy the generic, complete AJAX template and develop your Web 2.0 website.

Share