Home arrow JavaScript arrow Page 3 - Object-Oriented JavaScript: Building Real-World Examples
JAVASCRIPT

Object-Oriented JavaScript: Building Real-World Examples


In the first two parts of this series, we've explored the most important points related to object-oriented JavaScript. In this final part, we go through the development of some practical examples for creating helpful objects that can be used in different JavaScript applications.

Author Info:
By: Alejandro Gervasio
Rating: 2 stars2 stars2 stars2 stars2 stars / 92
December 12, 2005
TABLE OF CONTENTS:
  1. · Object-Oriented JavaScript: Building Real-World Examples
  2. · The first hands-on example: building object-based pop-up windows
  3. · Object-oriented AJAX: creating http requester objects
  4. · A final example: building quick and dirty form validating objects

print this article
SEARCH DEVARTICLES

Object-Oriented JavaScript: Building Real-World Examples - Object-oriented AJAX: creating http requester objects
(Page 3 of 4 )

If you’ve been using AJAX for a while, then you’re aware of the existence of popular XMLHttpRequest objects, which come in very handy for sending http requests to a given host, without involving page reloads. Since AJAX has become a powerful technology for boosting Web applications, and certainly offers nice capabilities for making web-based user interfaces look similar to desktop programs, the next example will illustrate an object-based method for creating http requester objects. The constructor function for these objects is listed below:

// define 'requester' object
function Requester(file){
    this.file=file;
    this.xmlobj=null;
    try{
        // instantiate object for Mozilla, Nestcape, etc.
        this.xmlobj=new XMLHttpRequest();
    }
    catch(e){
        try{
            // instantiate object for Internet Explorer
            this.xmlobj=new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e){
            // Ajax is not supported by the browser
            this.xmlobj=null;
        }
    }
    // define 'getData()" method
    this.getData=function(){
        // if request is completed
        if(this.xmlobj.readyState==4){
         // if status == 200 return file data
         if(this.xmlobj.status==200){
                // get data
                return this.xmlobj.responseText;
         }
         else{
                alert('Failed to get response :'+ this.xmlobj.statusText);
         }
        }
    }
    // assign state handler
    this.xmlobj.onreadystatechange=function(){this.getData};
    // open socket connection
    this.xmlobj.open('GET',this.file,false);
    // send request
    this.xmlobj.send(null);
}

As shown above, the “Requester()” constructor function only accepts as an argument, the name of the file to be fetched from the server. This argument, and the XMLHttpRequest objects themselves, are declared as properties of generic requester objects, and will be used to trigger a synchronous http request to a specific host. With reference to object methods, all requester objects expose the “getData()” method, which is used for fetching the contents of the requested file in a string format.

Due to the simple structure of the constructor function, it’s also possible to add more properties and methods to requester objects. The first improvement that comes to my mind is the addition of a “host” property, so the object can be pointed out to different Web servers, or the definition of one method that returns the server response in XML format. As you can see, numerous improvements can be made.

Having demonstrated how generic http requester objects can be appropriately defined, let’s see a brief example that demonstrates their use. The sample code is as follows:

// instantiate 'requester' object
var xmlobj=new Requester('requested_page.htm');
// call 'getData()' method
alert(xmlobj.getData());

As shown in the above example, using only a few lines of code, it’s possible to instantiate a new “Requester” object, and fetch a hypothetical “requested_page.htm” file. Next, after the request have been successfully completed, the contents of the web page passed in as an argument to the constructor are returned by the “getData()” method. In this case, I’ve used a rudimentary “alert” for displaying file data, but you can define more complex methods for processing server data in a different way. As I said before, once the blueprints for a generic requester object have been defined, it’s easy to add more properties and methods that fit the specific requirements of a particular application.

At this point, you’ve hopefully grasped the concepts behind creating custom JavaScript objects, which can be reused during the development of different client-side applications. Therefore, keeping in mind that you’ve already learned the key points of object-oriented JavaScript, the last hands-on example that I plan to develop is aimed at creating simple (yet useful)  form validating objects. So, provided that you are interested in learning how to build and use these objects, let’s go through the last part of this tutorial.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials