//The parameters passed to the function are as fallows: //url - the url of the script that we wanna request. You can use either full or relative to your server urls. //elmnts - this is either the id of the element that will contain the response from our request, or can also be a whole array of elements //loadingMsg - if this parameter is set, after the request has been send, the content of the changed element(s) will be set to whatever this variable is set, i.e. "Loading! Please wait...". function ajaxObj(url, elmnts, loadingMsg) { this.obj = new Object(); this.url = url; this.loadInto = elmnts; if(loadingMsg) //if we have set a loading message here it will be put into the changed elemnt(s) { if(typeof(this.loadInto) != 'object') //if we wanna change just one element, simply do it using it's id document.getElementById(this.loadInto).innerHTML.innerHTML = loadingMsg; else //or if the 'elmnts' parameter is an array - change all the elements of the array { for(i in this.loadInto) { document.getElementById(this.loadInto[i]).innerHTML = loadingMsg; } } } //This prototype is used to create our request, send it and handle it this.init(); } //This function tries if different objects are available, untill it finds one that works, cause all the major browsers use different techniques to send the request ajaxObj.prototype.create = function() { try { xmlHttp = new XMLHttpRequest(); } catch(e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { return false; } } } this.obj = xmlHttp; } ajaxObj.prototype.handle = function() { var o = this.obj; var into = this.loadInto; o.onreadystatechange = function() //Set an event handler that is triggered everytime the readystate of the object has changed { if(o.readyState == 4) //If the readyState is 4, the request has been completed - we can proceed with using the response { if(typeof(into) != 'object') //if we want to change just one element - set it's innerHTML equal to the response document.getElementById(into).innerHTML = o.responseText; else //otherwise - we have more than one elements to change. We must first split the data that is returned into parts for each one of the elements and then update them { temp = o.responseText.split("@@"); for(i in into) { document.getElementById(into[i]).innerHTML = temp[i]; } } } } } //This prototype simply sends the request to the desired url ajaxObj.prototype.send = function() { this.obj.open('GET', this.url, true); this.obj.send(null); } //This prototype calls all the other ones in the proper order. It's not really necessary, cause we can just call //this prototypes from within the object constructor, but I use it, cause I'm planning to extend this object in the future. ajaxObj.prototype.init = function() { this.obj = null; this.create(); this.handle(); this.send(); } // |----------------------------------------------------------------------------------------| // | main request: new ajaxObj('myscript.php?div=x', 'div id=x', 'Loading! Please wait...') | // |----------------------------------------------------------------------------------------|