Ajax, sometimes written as AJAX (shorthand for asynchronous JavaScript and XML), is a group of interrelated web development techniques used on the client-side to create interactive web applications or rich Internet applications.
With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.
/**
* Declare global variable....
* @param string elementName this is to identify the elemnt in which the response should be dispalyed. like as div id (required)
*/
var elementName = "";
/**
* Open a connection to the specified URL, which is
* intended to provide an XML message. The specified data
* is sent to the server as parameters. This is the same as
* calling xmlOpen(“POST”, url, toSend, responseHandler).
*
* @param string url The URL to connect to.
* @param string toSend The data to send to the server; must be URL encoded.
* @param function responseHandler The Javascript function handling server response.
* @param function elementIdentify The elemnt in which the response should be dispalyed.
*/
function xmlPost(url, toSend, responseHandler, elementIdentify)
{
elementName = elementIdentify;
xmlOpen(“POST”, url, toSend, responseHandler);
}
/**
* Open a connection to the specified URL, which is
* intended to provide an XML message. No other data is
* sent to the server. This is the same as calling
* xmlOpen(“GET”, url, null, responseHandler).
*
* @param string url The URL to connect to.
* @param function responseHandler The Javascript function handling server response.
* @param function elementIdentify The elemnt in which the response should be dispalyed.
*/
function xmlGet(url, responseHandler, elementIdentify)
{
elementName = elementIdentify;
xmlOpen(“GET”, url, null, responseHandler);
/**
* This code can be used if you need to call the required function after every interval i.e seconds..
* setTimeout(“xmlGet(‘products.php’, notesResponseHandler)”,3000);
* setTimeout(“alert(‘products.php’)”,3000);
*/
}
/**
* Open a connection to the specified URL, which is
* intended to respond with an XML message.
*
* @param string method The connection method; either “GET” or “POST”.
* @param string url The URL to connect to.
* @param string toSend The data to send to the server; must be URL encoded.
* @param function responseHandler The Javascript function handling server response.
*/
function xmlOpen(method, url, toSend, responseHandler)
{
// alert(url);
if (window.XMLHttpRequest)
{
// browser has native support for XMLHttpRequest object
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// try XMLHTTP ActiveX (Internet Explorer) version
req = new ActiveXObject(“Microsoft.XMLHTTP”);
}
if(req)
{
req.onreadystatechange = responseHandler;
req.open(method, url, true);
req.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
req.send(toSend);
}
else
{
alert(‘Your browser does not seem to support XMLHttpRequest.’);
}
}
/**
* Handler for server’s response to notes.xml request.
* Notes are pulled from notes.xml and replace the
* contents of the DIV with id ‘notesSection’.
*/
function notesResponseHandler()
{
// Make sure the request is loaded (readyState = 4)
if (req.readyState == 4)
{
// Make sure the status is “OK”
if (req.status == 200)
{
var swappableSection = document.getElementById(elementName);
var str = req.responseText;
swappableSection.innerHTML = str;
}
else
{
alert(“There was a problem retrieving the XML data:\n” +
req.statusText);
}
}
}
/**
* When a file gets included in the page….
* Call the function on load or on click….
*/
//xmlGet(‘products.php’, notesResponseHandler);
//alert(‘called’);
AustinSmash 