Universally Related Popup Menus AJAX Edition: Part 2 / Page 3

Universally Related Popup Menus AJAX Edition: Part 2 [con't]

Portions of the URL

Knowing how to manipulate the different portions of the URL is a valuable asset in working with AJAX, so here's a quick overview of the URL's syntax:

URLs generally take the following form:

<protocol>//<host>[:<port>]/<pathname>[<hash>][<search>]

Property	Description
`protocol`	The string at the beginning of a URL, up to and including the first colon (:), which specifies the method of access to the URL.
`host`	A string comprising of the `hostname` and `port` strings.
`hostname`	The server name, subdomain and domain name (or IP address) of a URL.
`port`	A string specifying the communications port that the server uses.
`pathname`	A string portion of a URL specifying how a particular resource can be accessed.
`hash`	A string beginning with a hash (#), that specifies an anchor name in an HTTP URL.
`search`	A string beginning with a question mark that specifies any query information in an HTTP URL.

Here's the code for the first part of the callServer() function:

I used a with statement (line 235) around the XmlHttpObjectManager because there are several calls to it in the next couple of lines. Namely, RUN._ASYNCHRONOUSLY, state_change, READY_STATE, and STATUS are all members of the XmlHttpObjectManager. The open() method initiates a connection to the server (line 237). It accepts three parameters. The first is "GET" or "POST", which tells the server that we'll be downloading or uploading. The second argument is the URL of the resource that we want. The URL is encoded using the built-in JavaScript function encodeURI() in case the URL contains invalid characters such as spaces or ampersands. The third argument is a Boolean that tells the HmlHttpRequest object to either execute synchronously or asynchronously. The latter tends to be the superior choice because synchronous server calls can cause the browser to freeze up while waiting for a response. The next line sets the onreadystatechange event property to our state_change() function (line 239). The onreadystatechange event requires a function to call when the onreadystate property changes. This line is strategically placed between the open() and send() methods because this is the only way to use the same XmlHttpRequest object for multiple calls. If you set it before the open() method is called, the object will reset the onreadystatechange property, effectively losing the assigned function

More on the `encodeURI` Function

The encodeURI() function encodes special characters, with the exception of: , / ? : @ & = + $ #. Use the encodeURIComponent() function to encode these characters.

The bind() function explicitly passes the variables that we need to the state_change() callback function (line 239). While proactively passing the variables to the callback function isn't as common as assigning an anonymous function to the onreadystatechange event property, it's rapidly gaining popularity as the preferred approach because it's the best way to guarantee that we'll have a reference to them by the time the callback function executes. The problem with the anonymous function lies in the time lag between when the function is assigned to the onreadystatechange event property and when it's called by the XmlHttpRequest object. This is especially true of the this pointer because it could be referring to a different object by the time the function is called. This issue is known as the "loss of scope" problem.

The Anonymous Function
An anonymous function is a function without a name. Here's an example::

xmlhttp.onreadystatechange = function( ){ alert("State Changed!"); };

Here's an overview of the variables and properties to provide to the state_change() function:

As always, the this pointer refers to our list object (line 239). The xmlhttp variable has to be passed as well (line 240) because we will need to access its readystate and status properties. The fillListCallback argument is our callback function (line 241). The READY_STATE constant contains the state that the change_state() function will be looking for (line 242). Finally, the STATUS constant will be referenced by fillListCallBack() (line 243).

The XmlHttpRequest send() function is where the request is actually sent to the server (line 246). We supply a null because we aren't uploading anything.

Conclusion

This week we look at an in-depth explanation of the JavaScript code. In the third and last part of our series we'll conclude with a line-by-line walkthrough of the JavaScript code and describe the server-side classic ASP script code.

About the Author

Robert Gravelle is a Senior Programmer/Analyst for the Canadian Border Services Agency as well as a freelance IT consultant. He specializes in Java, Perl, ASP, Microsoft application automation, JavaScript, VBScript, Web Development, and multi-tier systems. Feel free to contact him, but due to the volume of emails received, he cannot guarantee a response to every message.

Original: January 30, 2008

Digg This Add to del.icio.us

[prev]