// *************************************************************************** // GREAT-KIWI-AJAX.JS // (C) 2011 Peter Newman. All Rights Reserved. // *************************************************************************** // =========================================================================== // Ajax // =========================================================================== // --------------------------------------------------------------- // FROM: http://www.hunlock.com/blogs/The_Ultimate_Ajax_Object // --------------------------------------------------------------- // ----------------------------------------------------------------------- // hunlocksUltimateAjaxObject() // // The reason for the big long name is of course, to minimise the risk // of name conflicts ith anyone else's Ajax routines. // ----------------------------------------------------------------------- // ======================================================================= // CODE // ======================================================================= // ----------------------------------------------------------------------- // Hunlock's original code... // ----------------------------------------------------------------------- /* function ajaxObject(url, callbackFunction) { var that=this; this.updating = false; this.abort = function() { if (that.updating) { that.updating=false; that.AJAX.abort(); that.AJAX=null; } } this.update = function(passData,postMethod) { if (that.updating) { return false; } that.AJAX = null; if (window.XMLHttpRequest) { that.AJAX=new XMLHttpRequest(); } else { that.AJAX=new ActiveXObject("Microsoft.XMLHTTP"); } if (that.AJAX==null) { return false; } else { that.AJAX.onreadystatechange = function() { if (that.AJAX.readyState==4) { that.updating=false; that.callback(that.AJAX.responseText,that.AJAX.status,that.AJAX.responseXML); that.AJAX=null; } } that.updating = new Date(); if (/post/i.test(postMethod)) { var uri=urlCall+'?'+that.updating.getTime(); that.AJAX.open("POST", uri, true); that.AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); that.AJAX.setRequestHeader("Content-Length", passData.length); that.AJAX.send(passData); } else { var uri=urlCall+'?'+passData+'×tamp='+(that.updating.getTime()); that.AJAX.open("GET", uri, true); that.AJAX.send(null); } return true; } } var urlCall = url; this.callback = callbackFunction || function () { }; } */ // ----------------------------------------------------------------------- // The Great Kiwi Version // - - - - - - - - - - - // 1) Supports both Synchronous and Asynchronous Ajax // // 2) The returns to the callback routines are // statusCode , statusText , responseText , responseXML // (instead of just:- // responseText , status , responseXML // ) // ----------------------------------------------------------------------- function hunlockUltimateAjaxObject( url , callbackFunction ) { var that=this; this.updating = false; this.abort = function() { if (that.updating) { that.updating=false; that.AJAX.abort(); that.AJAX=null; } } this.update = function( passData , postMethod , question_asynchronous ) { // --------------------------------------------------------------- // hunlockUltimateAjaxObject.update( // passData , // postMethod // ) // - - - - - - - - - - - - - - - - - // RETURNS:- // o TRUE if the Ajax call was made OK // o FALSE if the "update" function is "busy" // o NULL if the browser has NO Ajax support // --------------------------------------------------------------- if ( that.updating ) { return false ; // "update" is BUSY (a previous Ajax // call hasn't returned yet). } that.AJAX = null; if (window.XMLHttpRequest) { that.AJAX=new XMLHttpRequest(); } else { that.AJAX=new ActiveXObject("Microsoft.XMLHTTP"); } if (that.AJAX==null) { return null ; // Browser has NO Ajax support } if ( arguments.length < 3 ) { var question_asynchronous = true ; } //alert( question_asynchronous ) ; //alert( typeof question_asynchronous ) ; if ( question_asynchronous ) { that.AJAX.onreadystatechange = function() { if (that.AJAX.readyState==4) { that.updating=false; that.callback(that.AJAX.status,that.AJAX.statusText,that.AJAX.responseText,that.AJAX.responseXML); that.AJAX=null; } } } that.updating = new Date(); if (/post/i.test(postMethod)) { var uri=urlCall+'?'+that.updating.getTime(); that.AJAX.open("POST", uri, question_asynchronous); that.AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); that.AJAX.setRequestHeader("Content-Length", passData.length); that.AJAX.send(passData); } else { var uri=urlCall+'?'+passData+'×tamp='+(that.updating.getTime()); that.AJAX.open("GET", uri, question_asynchronous); that.AJAX.send(null); } return true; // --------------------------------------------------------------- } var urlCall = url; this.callback = callbackFunction || function () { }; } // ======================================================================= // DOCS // ======================================================================= // ---------------------------------------------------------------------- // THE ULTIMATE AJAX OBJECT // // Filed: Thu, Mar 08 2007 under Programming // Tags: ajax javascript object post get // // In my recent article "Ten Javascript Tools Everyone Should Have" I // offered an AJAX object as the 10th tool. After publication, I received // quite a number of requests to document the object, and so document it I // shall. // // INTRODUCTION // // This object represents the pinnacle of my attempts to create a flexible // and robust Ajax object. It's small, compact, object oriented, easy to // follow and can handle multiple, concurrent, simultaneous requests, // something the "hello world" tutorials always seem to miss. It's also // public domain so use it and abuse it however you like and don't sweat // giving up any precious screen space to credit me. So without further // ado, here's the Ajax object. The documentation follows. // // CREATING A NEW AJAXOBJECT // // This AJAX snippet is a javascript object. You assign it to a variable // the same way you assign a new Array(), or new Object(). This means you // can have many variables, each one it's own little, discrete AJAX // handler. You can even make an array of Ajax objects if you so desire. // (be aware however that most browsers will only process two requests at a // time. You can declare and start as many ajax requests as you want but // only two requests will be processed at a time and the other requests // will patiently wait their turn until they can be processed). // // When you create the variable assignment, you pass the URL you want that // that Ajax object to call. (And remember, Ajax requests are bound to the // same domain as the web page. If you're on mydomain.com you'll get an // error if you try to make an Ajax request to theirdomain.com). // // var myRequest = new ajaxObject('http://www.somedomain.com/process.php'); // // DEFINING THE AJAX CALLBACK FUNCTION // // If you would like to have a procedure to process the data returned by // the server, add the function name you want to handle the request after // the URL as such. // // var myRequest = new ajaxObject('http://www.somedomain.com/process.php', processData); // // This will tell myRequest to call processData when data has come back // from the server. The first three arguments passed to processData will be // responseText, responseStatus, and responseXML respectively. All three // arguments are optional, you don't have to catch them if you don't want, // although it is highly recommended you catch responseText and // responseStatus as such... // // function processData( responseText , responseStatus ) { // if (responseStatus==200) { // alert(responseText); // } else { // alert(responseStatus + ' -- Error Processing Request); // } // } // // Here processData will accept responseText and responseStatus. If // responseStatus is 200 (everything went a-ok) it will display the text // from the server. If the response was not 200 it will display the error // code and an error message. // // Passing a callback function when declaring a new ajaxObject is optional. // If you don't pass a function to call, ajaxObject will just discard any // results it gets back from the server. This is useful when you don't need // to process any return data for example when you're just notifying the // server the mouse has passed over an object or that the page is being // unloaded. // // Having an external function to process the data is optional as well. // External (or global) functions are useful if you have many ajax // variables all calling the same response handler but if you're doing // something unique you can more tightly bind the callback function with // the ajax variable as such. // // var myRequest = new ajaxObject('http://www.somedomain.com/process.php'); // myRequest.callback = function(responseText, responseStatus, responseXML) { // // do stuff here. // } // // This inserts the callback function into the object instance itself. Note // that you can't prototype this since callback is only set up in the // constructor calls or via this method, a prototype would have no effect // on new ajax constructors. // // MAKING THE CALL: INITIATING THE AJAX REQUEST. // // When you create your new variable assignment ajaxObject is initiated but // no calls to the server will happen until you call the update method. The // update method accepts two optional arguments, you can pass along some // data to be sent to the server and you can specify that data be sent as a // POST instead of a GET. (GET basically passes all your data in the URL, // POST sends it differently so all the data doesn't show up in the server // logs, plus you can send more data with POST than GET). // // The format is as follows... // // var myRequest = new ajaxObject('http://www.somedomain.com/process.php', processData); // myRequest.update('id=1234&color=blue'); // Server is contacted here. // // This would initiate an ajax call to the server, passing an id of 1234 // and color=blue to the server as a GET method. (in php it would set the // variables $id and $color). // // Remember, there's no actual request to the server until the update() // method is called. Update will call the url the ajaxObject was // constructed with and then, if there's a callback function (processData // in this example) it will call that function when there's a response from // the server. // // SENDING DATA AS A POST IN AJAX // // To send data to the server as a POST we'd use the following structure... // // var myRequest = new ajaxObject('http://www.somedomain.com/process.php', processData); // myRequest.update('id=1234&color=blue','POST'); // // This will send "id" and "color" to the server as a POST (in php // $_POST['id'] and $_POST['color']. The "post" flag is not case sensitive // it just needs to say post in the string. // // TESTING THE UPDATE() // // The update() method will return true if the Ajax call was successfully // initialized. It will return false if you tried to start a new request // while another request was already outstanding. Update() will also return // false if the method was unable to initialize the browser's AJAX library // (which means the browser is too old to have an xmlhttprequest object). // // ESCAPE THE DATA // // The update examples above are extremely simplified. To avoid problems // with your data containing illegal characters and quotes you should // escape the data before you pass it to update. If you want to pass three // variables, you should at the very least prepare them as such... // // passName = encodeURIComponent(name); // passAge = encodeURIComponent(age); // passJob = encodeURIComponent(job); // sendString = 'name=' + passName + '&age=' + passAge + '&job=' + passJob; // myRequest.update(sendString,'POST'); // // There are three escape commands in Javascript: escape, encodeURI, and // encodeURIComponent. A very good explination of the three can be found at // xkr.us. In general however, you will want to use encodeURIComponent() // and avoid escape(). // // UPDATING // // When you call the update() method the updating property is given a // timestamp which you can use to see if a call is still in progress and // how long the request has been processing. Here's a simple test to see if // the object is updating. // // if (myRequest.updating) { // alert('this request is being processed.'); // } else { // alert('this object is idle'); // } // // YOU CAN ALSO SEE HOW LONG A REQUEST HAS BEEN PROCESSING.... // // if (myRequest.updating) { // now=new Date(); // alert('This request is '+now-myRequest.updating+' miliseconds old.'); // } // // ABORTING AN AJAX REQUEST // // If you feel an Ajax request has gone on too long you can abort the // request with the abort() method. This will issue an abort command and // reset the object to an inactive state ready to accept a new update(). // // myRequest.abort(); // // If you call abort and there is no pending ajax call this method will // have no effect. // // PREVENTING CACHING FOR INTERNET EXPLORER // // Even if you specify a POST method the URL will always be appended with a // timestamp ('?timestamp=123412341243'). This timestamp is the javascript // julian date integer, a number representing the number of milliseconds // that have elapsed since Midnight, January 1, 1970 GMT. In php you can // access the timestamp as $timestamp. // // By appending the julian day number to the end of the URL we effectively // make each call unique and that means Internet Explorer will not cache // the Ajax call as it is wont to do. // // COOL TRICKS AND TIPS // // You don't actually need a server side script to use this object. It will // pull a plain text file off your server without complaint. Of course the // content won't be dynamic, it will just be the contents of that static // file but if you're poping up a notice, ad, or flyer in a division this // is a really nice way to get data dynamically after you've created the // page. // // myRequest = new ajaxObject('http://somedomain.com/ad.html'); // myRequest.callback = function(responseText) { // document.getElementById('someAdDiv').innerHTML=responseText; // } // myRequest.update(); // // Since the ajaxObject can work with static files we can use it to load // javascript libraries after the page has loaded so we can ask for them as // we need them instead of sending a huge javascript library at the start // which the user may not need. // // myRequest = new ajaxObject('http://somedomain.com/javascriptLibrary.js'); // myRequest.callback = function(responseText) { // eval(responseText); // } // myRequest.update(); // // As you can see, simulating a