Publishers of technology books, eBooks, and videos for creative people

Home > Blogs > Debugging XML/JSON requests, Five JavaScript Tips in Five Days

Debugging XML/JSON requests, Five JavaScript Tips in Five Days

Ajax requests, where a server sends data to the client via behind-the-scenes JavaScript, often uses XML or JSON, rather than plain text, for transmitting larger amounts, or just more structured, data. The benefits of using these data formats also bring about the hassle of more hair-pulling debugging. In this post, I detail the steps I take to debug XML and JSON transactions.

You may have started out your Web development life putting together HTML pages, where the biggest concern was getting a page to look correct in every browser (that is to say, in IE).

Then maybe you started picking up some JavaScript and CSS, and found that the number of reasons why something may not be working grew exponentially. Then you tossed in some server-side action, perhaps with an Ajax request, and all of a sudden debugging your once-simple site is now an all-day event.

Any time you add technologies to a process, you add potential causes of problems, and working with XML and JSON is certainly no exception.

In a common Ajax process, data from the browser is sent to the server, which in turn returns a response in XML or JSON format. The client-side JavaScript then updates the browser (or does something) using that returned information. You code all this, then run it, and...nothing happens. So what next?

1. The first thing I normally do is confirm the result being returned by the server. If the JavaScript is performing a simple GET request, then you can run the same page in your Web browser. Just be certain to append any necessary values to the URL. This brilliantly simple step often reveals the problem.

2. If, for some reason, you can't run the server-side script directly (like if a POST request is being made), then add some alerts to your JavaScript code to indicate to you what code is and is not being executed. For example, you might just add a line like this:
alert('In the something() function');
Then you'll know for certain that the function is being called.

3. If you're still in the process of confirming the server response, just alert it in your JavaScript code. Assuming ajax is the name of the XMLHttpRequest variable, you would do this in the function that handles the request:
alert(ajax.responseText);
Note that I refer to the responseText even if I'm expected XML. And if the returned text contains a lot of data, you may want to add it to the DOM or insert it into a textarea for better accessibility.

By following these steps you should be able to find out what the exact server response is. I've had many Ajax applications fail on me because of a simple PHP syntax error or a lack of proper authentication. If there's nothing obviously wrong and the server is returning XML or JSON data, the next step is to validate that data to make sure it's syntactically correct, which is why confirming the actual response is so critical. Poorly formed XML or JSON will make it unusable by the JavaScript. To validate either, just do a quick search online for "validate XML" or "validate JSON" to turn up useful tools.

If you've walked through all these steps, and found that the server response is appropriate, and that the XML or JSON is syntactically valid, then you'll need to do some plain-old JavaScript debugging. Here, again, alerts can be useful, but Firebug, the Firefox plug-in, will be your best friend. If you're not familiar with it already, then download and test it out today!

For more on related topics, please check out my books. And be sure to check back here each day this week for more JavaScript tips.