Recent Weblogs

Links I like

Ajax Service

A history of my evolution in ajax, I begin at adoption of prototype. Here the Ajax.Request was all powerful but, its syntax, i felt became redundant in most applications. I then create Ajax.Application, which soon became Ajax.Application.Base as its subclasses, Ajax.Application.Cache and Ajax.Application.Queue soon proved to have their own niche in my repertoire.

I started off using these classes to inherit my "Ajax Applications" from, these classes would manage DOM elements and coordinate DOM Events with dispatching XHR requests and handle all appropriate updates to these DOM elements to provide user experience. This works, but a major drawback is that this all goes on inside the black box of the class.

Another spectrum, an Event

On a totally different branch of development I created a class to mimic event propogation. This worked out great for allowing communication between classes. A simple example would be a "List" class which could govern a list and then dispatch a "itemClick" event if any of the list items were clicked.

Greed lead to Marriage

Soon I wanted the advantages of both, dispatch events and the sweet syntax of Ajax.Application, I did something I know is a fopah of programming but since the classes don't inherit from anything themselves I merged them. EventDispatcher and Ajax.Appication.Base into Ajax.Application.Event. The results were fantastic, allowing many components respond to eachother ajax requests was great but things got sloppy.

The new model, a Service

That is when i got the idea to seperate all DOM management from the class that will be interacting with the server. Then dispatch the event, being the XHR "transport" for us prototype junkies to all observing functions of the event. In this manner we have completely decoupled interface management for the class responsible for XHR requests. Now classes can be written with the complete ignorance of all other things but the fact that this particular function is designed to receive that object.

Caution, Service at work below

Main Number
0
Addition Multiply Factorial
0
0
0

Above is my attempts at demonstrating a simple service, I have one action in myservice, which is to receive a number from the server. I have 4 interface components which are looking to do something with that number, Main simply displays the number, the rest are respective to their operation in mathematics.

The Service

Ajax.Application.Event serves as the base class for the services, I have named this one Service but I am sure to have a more flexible naming convention soon. So the service creates a listener which is a function closure around the handling function. The getNumber function is the actual execution of the service. In my real implementations these action functions typically receive a hash object, which works great with forms and Form.serialize(true).

var Service = Class.create();
Object.extend(Object.extend(Service.prototype, Ajax.Application.Event.prototype),
    {
        
        initialize : function(url){
            
            this.url = url;
            this.createListener();
        
        },
        createListener : function(){
            
            this.receiveNumberHandle = this.receiveNumber.bind(this);
        
        
        },
        getNumber : function(){
            
            this.sendRequest({ action : "getNumber"}, this.receiveNumberHandle);
        
        },
        receiveNumber : function(eAja){
            
            this.dispatchEvent("receiveNumber", eAja);
        
        }
        
    
    
    }
);
                
                
                

The Base Listener

All 4 of my interface components are going to share very similar traits so I abstracted these into a base class called ServiceListener.

var ServiceListener = Class.create();

Object.extend(ServiceListener.prototype,
          {
               buildInterface : function(obj){
                    
                    this.container = $(obj);
               
               },
               createListener : function(){
                    
                    this.receiveUpdateHandle = this.receiveUpdate.bind(this);
               
               },
               receiveUpdate : function(eAja){
                    
                    var obj = eAja.responseText.evalJSON();
                    
                    
                    this.update(obj.number);
               
               },
               update : function(num){
                    
                    throw { message : "Overwrite this method in subclass" }
               
               }
               
          
          }
     );
                
                

Ladies and Gentlemen...The Implementations

var Addition = Class.create();
var Multiply = Class.create();
var Factorial = Class.create();
var Main = Class.create();


Object.extend(Object.extend(Addition.prototype, ServiceListener.prototype),
                {
                    
                    initialize : function(obj){
                        
                        this.buildInterface(obj);
                        this.createListener(obj);                                
                    
                    },
                    update : function(num){
                        
                        this.container.innerHTML = num + num;
                        
                    
                    }
                
                
                }
            );
Object.extend(Object.extend(Multiply.prototype, ServiceListener.prototype),
                { 
                    
                    initialize : function(obj){
                        
                        this.buildInterface(obj);
                        this.createListener(obj);                                
                    
                    },
                    update : function(num){
                        
                        this.container.innerHTML = num * num;
                    
                    }
                
                
                }
            );
Object.extend(Object.extend(Factorial.prototype, ServiceListener.prototype),
                {
                    
                    initialize : function(obj){
                        
                        this.buildInterface(obj);
                        this.createListener(obj);                                
                    
                    },
                    update : function(num){
                        
                        var sum = this.factorial(num);
                        
                        this.container.innerHTML = sum;
                        
                        
                    },
                    factorial : function(num){
                    
                        if(num == 1)
                            return num;
                        else
                            return num*this.factorial(num-1);
                        
                    
                    }
                
                
                }
            );
Object.extend(Object.extend(Main.prototype, ServiceListener.prototype),
                { 
                    initialize : function(obj){
                        
                        this.buildInterface(obj);
                        this.createListener(obj);                                
                    
                    },
                    update : function(num){
                                        
                        this.container.innerHTML = num;
                                                        
                    }    
                
                }
        );


Class Over

So thats the overhead of classes which would be in the library. Linking everything together is pretty simple. As of now I have some pretty specific functions I think it would be better to have a higher level class manage a collection of objects and only spit out bigger events. Check out the demo and feel free to check out the source to make sure im not BSing, the code displayed in the <pre> tags is identical to what you'll find in the <script> tags.

var myService = new Service("javascript-service.php");

Event.observe("myButton", "click", function(){ myService.getNumber() });


var myMultiply = new Multiply("multiply");
var myFactorial = new Factorial("factorial");
var myAddition = new Addition("addition");
var myMain = new Main("main");

myService.addEventListener("receiveNumber", myMultiply.receiveUpdateHandle);
myService.addEventListener("receiveNumber", myFactorial.receiveUpdateHandle);
myService.addEventListener("receiveNumber", myAddition.receiveUpdateHandle);
myService.addEventListener("receiveNumber", myMain.receiveUpdateHandle);
        				
				
				
				

Comments

August 28, 2007jonas kolben

you are a genius

September 18, 2008Driver download sitemap

Thanks

September 27, 2008Games

Thanks

October 21, 2008penis büyütücü

Thank you very much for this information.
Good post thanks for sharing.
I like this site ;)

October 29, 2008figurin

Thank you very much for this information.
Good post thanks for sharing.
I like this site ;)

December 25, 2008Sflow analysis

The class extension is proving problems :S

January 16, 2009airbag tamiri

thanks

January 20, 2009almanya chat

thanksyou!^%%

January 24, 2009Sweet Love Quotes Collection


Thanks for this post, my friend will be so exciting to check this. I really appreciate your work over here

January 02, 2012Christina18Cobb

Buildings are expensive and not everyone can buy it. But, <a href="http://goodfinance-blog.com/topics/home-loans">home loans</a> are created to support people in such kind of cases.

January 12, 2012premium essay writing service

You have not to stack with your essays writing. It's always possible to detect a helper like writing research papers company , which will be always ready to assist you in any case.

January 18, 2012article submission websites

You do not ought to research lots of sites searching for answers for your optimization questions. Guys on different forums do not acknowledge of many just about SEO. But, the article submission sites can surely answer you.

January 20, 2012buy papers online

I tried to ask: " write my essay " more than one time. So, I decided to do it constantly because that aided me to get higher grades.

January 23, 2012buy essay

Keep on moving this way in such research and people will be able to buy paper or buy essay at the paper writing services referring to this topic*.

March 19, 2012personal loans

All people deserve good life time and mortgage loans or college loan can make it better. Just because people's freedom depends on money state.

March 25, 2012papers service

If you want some rules on how you can advance up the learning process with regards to research paper help then you shouldn't miss discovering this description.

March 27, 2012someone write my essay

Some free time suppose to be not easy to have! But, trying to buy personal narrative essay, you can surely have a lot of free time.

April 03, 2012link buying

Cannot cope with everything one at time? Simply buy one way links, concentrate on your core points and leave the rest to the masters!

April 07, 2012paper services

The buy paper service can be a basis of your career in its start. Because teachers are willing their good students to perform the technology essays to demonstrate their writing skills.

April 13, 2012Essay Formats

Numerous searches of the Research Paper on Psychology pointed at great custom writing. I want to get know a correct way to opt for a reliable custom papers writing organization.

April 15, 2012buy essays

In the writing service it is simple to find some facts and custom essay just about this post . To make much better the academic career buy essay and use the time of rest!

April 17, 2012Freelance Writing

There is no formula for academic papers writing. That's what I will better order Presentation and Speech Writing. It can save me from university problems.

April 23, 2012personal loans

Every body acknowledges that modern life seems to be not cheap, however we need cash for various issues and not every person gets big sums cash. Thence to receive some credit loans or just financial loan would be a correct way out.

April 26, 2012how to buy an essay

Bad composed online term paper can fail your success. But, when you buying essay papers of surerior quality, everything is great.

May 13, 2012business loans

That is understandable that cash can make people free. But how to act when one has no money? The one way is to receive the credit loans or consolidation loan.

May 13, 2012pay for essay

Are you aimed at an academic paramount, however, do not really like course essays writing procedure? Therefore, get information: "how to do my essay " and dismiss you worries.

May 23, 2012custom research papers

The process analysis essay can be of the best quality, but you have to acknowledge lots about the custom term paper service, I can tell you.

May 24, 2012dissertation writing

If you go on with your work referring to this good post, I will possibly order phd thesis in the thesis service in web.

Name
Site
Comment
  CAPTCHA Image
Reload Captcha Image
Captcha