AJAX In Action [44]
}
this.req.open('GET',url,true);
f Refactored
sendRequest
this.req.send(null);
function
}catch (err){
this.onerror.call(this);
}
}
},
onReadyState:function(){ g
Refactored callback
var req=this.req;
var ready=req.readyState;
if (ready==net.READY_STATE_COMPLETE){
var httpStatus=req.status;
if (httpStatus==200 || httpStatus==0){
this.onload.call(this);
}else{
this.onerror.call(this);
}
}
},
defaultError:function(){
alert("error fetching data!"
+"\n\nreadyState:"+this.req.readyState
+"\nstatus: "+this.req.status
+"\nheaders: "+this.req.getAllResponseHeaders());
}
}
The first thing to notice about the code is that we define a single global variable net b and attach all our other references to that. This minimizes the risk of clashes in variable names and keeps all the code related to network requests in a single place.
We provide a single constructor function for our object c. It has three arguments, but only the first two are mandatory. In the case of the error handler, we test for null values and provide a sensible default if necessary. The ability to pass a varying number of arguments to a function might look odd to Licensed to jonathan zheng 76 CHAPTER 3 Introducing order to Ajax OO programmers, as might the ability to pass functions as first-class references. These are common features of JavaScript. We discuss these language features in more detail in appendix B. We have moved large parts of our initXMLHttpRequest() e and sendRequest() functions f from listing 2.11 into the object’s internals. We've also renamed the function to reflect its slightly greater scope here as well. It is now known as loadXMLDoc. d We still use the same techniques to find an XMLHttpRequest object and to initiate a request, but the user of the object doesn’t need to worry about it. The onReadyState callback function g should also look largely familiar from listing 2.11. We have replaced the calls to the debug console with calls to the onload and onerror functions. The syntax might look a little odd, so let’s examine it a bit closer. onload and onerror are Function objects, and Function.call() is a method of that object. The first argument to Function.call() becomes the context of the function, that is, it can be referenced within the called function by the keyword this. Writing a callback handler to pass into our ContentLoader is quite simple, then. If we need to refer to any of the ContentLoader’s properties, such as the XMLHttpRequest or the url, we can simply use this to do so. For example: function myCallBack(){ alert( this.url +" loaded! Here's the content:\n\n" +this.req.responseText ); } Setting up the necessary “plumbing” requires some understanding of JavaScript’s quirks, but once the object is written, the end user doesn’t need to worry about it. This situation is often a sign of good refactoring. We’ve tucked away the difficult bits of code inside the object while presenting an easy-to-use exterior. The end user is saved from a lot of unnecessary difficulty, and the expert responsible for maintaining the difficult code has isolated it into a single place. Fixes need only be applied once, in order to be rolled out across the codebase. We’ve covered the basics of refactoring and shown how it can work to our benefit in practice. In the next section, we’ll look at some more common problems in Ajax programming and see how we can use refactoring to address them. Along the way, we will discover some useful tricks that we can reuse in subsequent chapters and that you can apply to your own projects as well. Licensed to jonathan zheng Some small refactoring case studies 77 3.2 Some small refactoring case studies The following sections address some issues in Ajax development and look at some common solutions to them. In each case, we’ll show you how to refactor to ease the pain associated with that issue, and then we’ll identify the elements of the solution that can be reused elsewhere. In keeping with an honorable tradition in design patterns literature,