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); } } } } }
Javascript Class HowTo
June 3, 2008
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.