A complete, generic AJAX framework (code provided)
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.
Hello! Sorry klooper for my english jer, buti particular nice re say gJ$)Kd!!!.
I, too, was taken a little aback by the stereotypes in Mr. ,