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.
Next: A final example: building quick and dirty form validating objects >>
More JavaScript Articles
More By Alejandro Gervasio
