javascript

Communication Errors
Chapter 14: Error Handling and Debugging
With the introduction of Ajax programming (discussed in Chapter 17 ), it has become quite common for
web applications to dynamically load information or functionality throughout the application ’ s lifecycle.
Any communication between JavaScript and the server is an opportunity for an error to occur.
The first type of communication error involves malformed URLs or post data. This typically occurs when
data isn ’ t encoded using encodeURIComponent() before being sent to the server. The following URL,
for example, isn ’ t formed correctly:
http://www.yourdomain.com/?redir=http://www.someotherdomain.com?a=b & c=d
This URL can be fixed by using encodeURIComponent() on everything after “ redir= ” , which produces
the following result:
http://www.yourdomain.com/?redir=http%3A%2F%2Fwww.someotherdomain.com%3Fa%3Db%26c%3Dd
The encodeURIComponent() method should always be used for query string arguments. To ensure that
this happens, it ’ s sometimes helpful to define a function that handles query string building, such as the
following:
function addQueryStringArg(url, name, value){
if (url.indexOf(“?”) == -1){
url += “?”;
} else {
url += “ & ”;
}
}
url += encodeURIComponent(name) + “=” + encodeURIComponent(value);
return url;
This function accepts three arguments: the URL to append the query string argument to, the name of the
argument, and the argument value. If the URL that ’ s passed in doesn ’ t contain a question mark, then one
is added; otherwise, an ampersand is added because this means there are other query string arguments.
The query string name and value are then encoded and added to the URL. The function can be used as
in the following example:
var url = “http://www.somedomain.com”;
var newUrl = addQueryStringArg(url, “redir”,
“http://www.someotherdomain.com?a=b & c=d”);
alert(newUrl);
Using this function instead of manually building URLs can ensure proper encoding and avoid errors
related to it.
Communication errors also occur when the server response is not as expected. When using dynamic
script loading or dynamic style loading as discussed in Chapter 10 , there is the possibility that the
requested resource is not available. Firefox, Chrome, and Safari fail silently when a resource isn ’ t
returned, whereas IE and Opera both error out. Unfortunately, there is little you can do when using these
techniques to determine that an error has occurred. In some cases, using Ajax communication can
provide additional information about error conditions.
485