Remember the code?

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.js file 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.

Download sarahajax.zip

Share and Enjoy: