• Choose a category
• All
• Classic-Fiction

By Root 3914 0

a design pattern is useful only in particular situations. Gamma recommends refactoring as the best way to introduce patterns. Write the code first in the simplest way that works, and then introduce patterns to solve common problems as you encounter them. If you’ve already written a lot of code, or are charged with maintaining someone else’s tangled mess, you may have been experiencing a sinking, left-out-of-the-party feeling until now. Fortunately, it’s possible to apply design patterns retroactively to code of any quality. In the next section, we’ll take some of the rough-and-ready code that we developed in chapter 2 and see what refactoring can do for it. 3.1.4 Refactoring in action

This refactoring thing might sound like a good idea, but the more practicalminded among you will want to see it working before you buy in. Let’s take a few moments now to apply a bit of refactoring to the core Ajax functionality that we developed in the previous chapter, in listing 2.11. To recap the structure of that code, we had defined a sendRequest() function that fired off a request to the server. sendRequest() delegated to an initHttpRequest() function to find the appropriate XMLHttpRequest object and assigned a hard-coded callback function, onReadyState(), to process the response. The XMLHttpRequest object was defined as a global variable, allowing the callback function to pick up a reference Licensed to jonathan zheng

74

CHAPTER 3

Introducing order to Ajax

to it. The callback handler then interrogated the state of the request object and produced some debug information.

The code in listing 2.11 does what we needed it to but is somewhat difficult to reuse. Typically when we make a request to the server, we want to parse the response and do something quite specific to our application with the results. To plug custom business logic into the current code, we need to modify sections of the onReadyState() function.

The presence of the global variable is also problematic. If we want to make several calls to the server simultaneously, then we must be able to assign different callback handlers to each. If we’re fetching a list of resources to update and another list of resources to discard, it’s important that we know which is which, after all!

In object-oriented (OO) programming, the standard solution to this sort of issue is to encapsulate the required functionality into an object. JavaScript supports OO coding styles well enough for us to do that. We’ll call our object ContentLoader, because it loads content from the server. So what should our object look like? Ideally, we’d be able to create one, passing in a URL to which the request will be sent. We should also be able to pass a reference to a custom callback handler to be executed if the document loads successfully and another to be executed in case of errors. A call to the object might look like this: var loader=new net.ContentLoader('mydata.xml',parseMyData);

where parseMyData is a callback function to be invoked when the document loads successfully. Listing 3.1 shows the code required to implement the ContentLoader object. There are a few new concepts here, which we’ll discuss next. Listing 3.1 ContentLoader object

var net=new Object(); b Namespacing object

net.READY_STATE_UNINITIALIZED=0;

net.READY_STATE_LOADING=1;

net.READY_STATE_LOADED=2;

net.READY_STATE_INTERACTIVE=3;

net.READY_STATE_COMPLETE=4;

net.ContentLoader=function(url,onload,onerror){ c

Constructor function

this.url=url;

this.req=null;

this.onload=onload;

this.onerror=(onerror) ? onerror : this.defaultError;

this.loadXMLDoc(url);

}

net.ContentLoader.prototype={

Licensed to jonathan zheng

Order out of chaos

75

loadXMLDoc:function(url){ d

Renamed initXMLHttpRequest function

if (window.XMLHttpRequest){

this.req=new XMLHttpRequest();

e Refactored

loadXML

} else if (window.ActiveXObject){

function

this.req=new ActiveXObject("Microsoft.XMLHTTP");

}

if (this.req){

try{

var loader=this;

this.req.onreadystatechange=function(){

loader.onReadyState.call(loader);