SarahAjax Javascript Ajax Class
June 3, 2008
Okay, here is my SarahAjax Javascript Class. You can use it without hassle!
You can either inherit and ‘action’ function or by prototyping a function named ‘action’. ‘action’ function will be called when the request to the resource is successful.
This is SarahAjax Class.
// 6/2/2008 HanaDaddy hanadaddy at gmail.com /* SarahAjax is a very simple ajax class. * url: target url to call. It is usally dynamic script or a simple page return xml or text. */ function SarahAjax(url){ this.url=url; this.reqobj ; this.method="GET"; this.async= true; //if false , the connection will be synchronous ( you have to wait for the reply) //this.action = function (obj) { } // Success reply handler. : youre responsibilty //this.error = function (obj) { } // Error reply handler : your responsiblity to implement. this.sendRequest = function() { if(this.reqobj == null){ if (window.XMLHttpRequest) { this.reqobj = new XMLHttpRequest(); } else if (window.ActiveXObject) { this.reqobj = new ActiveXObject("Microsoft.XMLHTTP"); } } if (!this.action){ alert("SaraAjax:Action member function is not defined! We need the reply handler!"); return; } this.reqobj.open(this.method, this.url, this.async); var sajaxreq = this; // this is necessary to access myself in the callback function this.reqobj.onreadystatechange = function() { sajaxreq.callback(); } this.reqobj.send(null); } this.callback = function () { if (this.reqobj.readyState == 4) { if (this.reqobj.status == 200) { //alert("reply is back?"+this.reqobj.responseText); this.action(this.reqobj); }else{ //alert("There was a problem retrieving data:\n" + this.reqobj.statusText); if (this.error){ this.error(this.reqobj); } } } } }
Click here for Usage Example1: Prototyping
How to use:
- Include the script
sarahajax.jsfile in your html file. - Implement ‘
action‘ function by prototyping. This function is only called when request reply is OK. - Optionally add ‘
error‘ function. It is called by SarahAjax object when there was error occured or the request reply is not normal. - Initialize a SarahAjax object with Target URL to send request to.
- Call the object’s ‘
sendRequest()‘ method to send request to the URL
<html> <head><title>SarahAjax Testing 1 using prototyping</title> <script type="text/javascript" src="sarahajax.js"></script> <script type="text/javascript"> //The action function must have the argument for XMLHttpRequest object SarahAjax.prototype.action= function (obj) { //obj.responseText : Regualar string //obj.statusText : Showing Requst Result Status //obj.responseXML : XML string var div = document.getElementById("result"); if (div) div.innerHTML = obj.responseText; else alert("hey where should I show the reply text?"); } //error functino is optional, but it's a good idea to create one. SarahAjax.prototype.error = function(obj){ alert(obj.statusText); } //Now create an object. The request will be sent to target_app.php var sajax = new SarahAjax("target_app.php"); </script> <style type="text/css"> #result { border:1px dashed black; width:300px; height:30px; } </style></head> <body> <h2>This is SarahAjax Testing Page</h2> <div id="result"> This is where the result should show. </div> <a href='javascript:sajax.sendRequest();'>Send Request</a> </body> </html>
Click here for Usage Example2: inherit SarahAjax class
You can also use the class by creating a subclass. Please Click on the title to see the source in action.
Leave a Reply