Remember the code? » Javascript and CSS

SarahAjax Javascript Ajax Class

HanaDaddy — Wed, 04 Jun 2008 03:17:17 +0000

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 prototypingtitle>
 
 
<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 Pageh2>
<div id="result">
This is where the result should show.
div>
 
<a href='javascript:sajax.sendRequest();'>Send Requesta>
 
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

Javascript Class HowTo

HanaDaddy — Tue, 03 Jun 2008 04:29:18 +0000

Great Tutorial on Javascript Classes

function Person (firstname,lastname,age){
 
	this.firstname=firstname;
	this.lastname=lastname;
	this.age=age;
 
	this.introduction = function (type) {
		if (type=='simple'){
			alert("Hi, I am " + this.firstname +".");
		}else{
 
			alert("Hello, my name is "+this.firstname + " " + this.lastname+"." +
			 	" I am " + this.age + " years old.");
		}	
	}
 
}
 
var p = new Person("Hana","Daddy",30);
 
p.introduction("simple");
p.introduction();

Creating a Javascript class is just like creating a regular function. Two things to remember.

Use 'this' to access member variables.
How to define member functions

The above will show alert message dialog.
First, “Hi, I am Hana”.
Second, “Hello, my name is Hana Daddy. I am 30 years old.”.

Now by using prototyping, you can add additional functions to the predefined classes. Also all the initialized class objects instantly have access to the new function! That is very convenient.

//Prototyping : add 
Person.prototype.addAge = function (year) {
	if (year)
		this.age += year;
	else
		this.age +=1;
}
p.addAge(5);
p.introduction();

The new addAge function was called from the previously created Person object p. And it’s working without problem. The Dialog says “Hello, my name is Hana Daddy. I am 35 years old.”. 5 years more aged. Time surely flies.

Finally, inheritance is very simple, too. See below example.

// new Person inherited class
function GoodPerson(firstname,lastname,age){
	this.fromClass = Person;
	this.fromClass(firstname,lastname,age);
 
	this.characteristic="Good";
	this.doSomethingGood =  function (){
		alert("help others");
	}
}
 
var a = new GoodPerson("Good","Person",20);
a.introduction();

Thats about a all for the quick HOWTO on Javascript class. I will post my very very simple Ajax Javascript Class next time.

IE innerHTML property and NoScope element such as