Orkut and AJAX code

I had ,of course even now , have lots of work more precisely lots of pressure these days in my team . so I had no time atleast think of posting here. Then , what triggered this post with my busy schedule always expecting me to be up there ?? Can you guess.... It's Orkut (Google aquired social comunity) .

Today morning, I just scribbled through one of the javascript communities in Orkut and in some thread I saw lots of users asking for some simple AJAX code to get started. I have jumped on the oppurtunity to make my name over there . I immediately started writing some AJAX code in bits and pieces from google and some other sources and finally arrived at some kinda output. Being satisfied with what I had done, started posting my content , to Orkut (as a reply to the thread I had mentioned) but in vain. To my sheer surprise, Orkut just don't allow more than 2048 characters to be posted as a reply for a thread. I can't even export my files to Orkut. Is there an option in Orkut I can export data to?? Surely not !!!. Then I had no other way , than posting the code in my personal blog (Thanks to Google acquired blogger) and then leaving a link to my blog in the orkut. By this time you could have understood why I had to go with this title for this post ;).

Now What's AJAX is?

AJAX - Asynchronous JavaScript and XML.
Ajax is asynchronous, this loading does not interfere with normal page loading. JavaScript is the programming language in which Ajax function calls are made. Data retrieved using the technique is commonly formatted using XML, as reflected in the naming of the XMLHttpRequest object from which Ajax is derived. hmmmmm .. you can find more here .

Code for a simple example. Ofcourse the javascript code is huge, but then, you can reuse the same code for any kind of application.

CODE:
1. test.jsp

Enclose the below javascript code with in the script tags and then write some html content to this jsp . Give a link using 'a' href tag to the javascript function call(). It should be (Remember I'm avoiding enclosing tags ) , < href="javascript:call()"> Clickthis .
Then have a DIV with id="postData" and style="display:block". DIV style="display:block" id="postData"> and close the DIV tag

SCRIPT code :

var rq = new Array();
var paramsArr = new Array();
function call()
{

getHtml('/postdata.jsp',"postData");
}

function getHtmlForForm(formElem,f, paramsObj) {
if(!paramsObj) {
paramsObj = '';
}
return getHtml(formElem.action,f, paramsObj, formElem);
}

function getHtml(url, fn, paramsObj, formElem) {
var xmlObject = null;
if( window.XMLHttpRequest ) {
xmlObject = getXmlObj(true);
} else if( !navigator.__ice_version && window.ActiveXObject ) {
//xmlObject = getXmlObj(formElem);
xmlObject = getXmlObj(true);

} else {
return false;
}

rt = rq.length
rq[rt] = xmlObject;
var paramsLen = paramsArr.length;
paramsArr[paramsLen] = paramsObj;
if (xmlObject) {
rq[rt].onreadystatechange = new Function( ' if (rq[' + rt +'].readyState==4) { ' + fn + '(rq[' + rt +'].responseText, paramsArr[' + paramsLen + ']) }');
if(formElem) {
handleForm(rq[rt], url, formElem);
} else {
rq[rt].open('GET', url, true);
rq[rt].setRequestHeader("Content-type","text/html");
rq[rt].setRequestHeader("Content-length", 0);
rq[rt].send(null);
}
}
return true;

}




//get XMLObject

function getXmlObj(formElem) {
var xmlObject = null;
if(document.all) {
var xmlObject = null;
if(!formElem) {
try {
xmlObject = new ActiveXObject('Microsoft.XMLDOM');
} catch(e) {}
}
if(xmlObject == null) {
try {
xmlObject = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {}
}
if(xmlObject == null) {
try {
xmlObject = new ActiveXObject('Microsoft.XMLHTTP');
} catch(e) {
throw new Exception('Browser not supported');
}
}
} else {
xmlObject = new XMLHttpRequest();
}
return xmlObject;
}
function postData(result)
{
var msg = document.getElementById('postData');
msg.innerHTML =result;
showDiv('postData');
}
function showDiv(id)
{
document.getElementById(id).style.display='block';

}
//SCRIPT code ends here

2. The second JSP is the one to which we are making a ajax call and getting the content from that.

postData.jsp


Here, write some HTML code. It can be anything.


Now put both these jsp's under the same path and run the first one. Click on the link 'clickthis'. This will make a ajax call to the second jsp , fetch the content from that and show the content in the first jsp itself without the need of loading the page. Hope this helps the beginners. Please let me know if this is useful for you.