Monday, February 25, 2008

Ajax Implementation Libraries.

Here i would like to introduce few JavaScript functions which will help to Implement Ajax easily in Any of the Pages.
I think no need to introduce about the Steps and basics of Ajax in this document.
for using this library what a developer has to do is create a global javascript file named like glbFunctions.js where we will write all the following javascript functions.

=========================================================
var xmlHttp;//Here we are keeping xmlHttp as the global variable to use every where.

function createXMLHttpRequestObject(){
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

this method will check the browser and the supported XMLHttpObject.

/*=========
This function will Make the ajax request with the method number given as
parameter with the request parameters.
The ready state function is the Argument function.
==========*/
function ajaxCall(responseFun,serverURL,reqParams,sync)
{
createXMLHttpRequestObject(); //Step 1
url = "serverURL"+"&"+reqParams; //Step 2
if(!validateUrl(url)) //Validating URL
return false;
xmlHttp.open("GET", url, sync);
if(responseFun!= null)
xmlHttp.onreadystatechange = function(){ajaxCallBack(responseFun);}
xmlHttp.send(null);
}

The ajaxCall is the public method which can be called from any where.
The method arguments are
  1. responseFun :The method in which is called when the Ajax response is Back.
  2. serverURL :The url of the server where this ajax call is Submitting.
  3. reqParams :The Request parameters of this request.
  4. sync :shows to make this ajax call synchronized or Asynchronized.
        1. Please refer XMLHttpObject.open() .Method in JavaScript.
The following method is the response controller of this Ajax,
The response required
/*========= Function will be called with the Array of details tags =============*/
function ajaxCallBack(responseFun) {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
det = xmlHttp.responseXML.getElementsByTagName("details");
responseFun(det);
}
if (xmlHttp.status == 600) {//600 is the error value send from server side.
var msg=getHttpErrorMsg(xmlHttp.responseTEXT);//Userdefined method to get the Error value from response xml.
alert(msg);
}
}
}

The ajaxCallBack method will call the the responseFunct with the data from the response XML and will send back th the method.
The response should be like

User Data XML.

Example.
==========
A Simple jsp for Concatenation.
test.jsp
======<span style="font-weight: bold;"><br /></span>w Document

/*========= Function will be called with the Array of details tags =============*/
function ajaxCallBack(responseFun) {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
det = xmlHttp.responseXML.getElementsByTagName('details');
responseFun(det);
}
if (xmlHttp.status == 600) {
var msg=getHttpErrorMsg(xmlHttp.responseTEXT);
alert(msg);
}
}
}


 Simple.jsp

==========
<%@ page language="java" %>
<%
String fName=request.getParameter("fname");
String sName=request.getParameter("sname");
String fullName=fName+" "+sName;
out.println("Hello
"+fullName+"
");

%>



1 comment:

Ashish said...

Hi Asker,

I am working with Network Programs Noida.I saw your blog it is nice one .Could u tell that in which profile are u working ?? I m asking it so that I can ask something regarding that ..

Bye !!

Waiting for reply !!