- Preventing Cached AJAX Requests
- Debugging AJAX Code with FireBug
- Creating a Database Connection
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Debugging AJAX Code with FireBug
JavaScript has always been an extremely difficult language to debug, due to the fact that it’s loosely typed and no good tools have been available. Therefore, it’s equally difficult to debug AJAX, because the requests and the responses are all handled by JavaScript. Luckily, Joe Hewitt’s FireBug extension for Firefox is extremely useful for debugging JavaScript and AJAX requests/responses. In this section, I’ll show a few of the features that FireBug offers to help you debug not only JavaScript, but any AJAX requests you make.
The Console tab in FireBug is where all AJAX requests, errors, and warnings appear (depending on the preferences you’ve set). Figure 1 shows the options that you can choose to display in the console; the checked items are active. Once you’ve configured the options the way you like, messages display in the console for those options when they occur.
)
Figure 1 Options in the FireBug console.
The console also allows you to type JavaScript code into the command line at the bottom of the window for testing. Figure 2 shows an example.
)
Figure 2 Testing code in the console.
FireBug allows you to inspect the DOM while rolling over elements in the page. This feature can be extremely useful for debugging the nesting sequences of the page for CSS and JavaScript code. With AJAX, it can be useful when you’re adding elements to the page dynamically and need to check their placement.
The debug feature is unbelievable, as it allows you to view all of the JavaScript files that are used in the page (see Figure 3) and set breakpoints in the code just as you would in more sophisticated programming tools (see Figure 4). These features are important because they can save a lot of time in debugging code and finding the exact line of code that’s causing a specific issue.
)
Figure 3 Viewing each JavaScript file in a web page.
)
Figure 4 Testing JavaScript with breakpoints.
The most relevant part of the FireBug tool in terms of AJAX is the option to show XML HTTP requests. This feature allows you to view all requests made on the Web. You can see whether this feature is active by clicking the Console tab, opening the Options menu, and making sure that the Show XMLHttpRequests option is checked. Once it’s working, you’ll see all XML HTTP requests that are made (see Figure 5).
)
Figure 5 Viewing XML HTTP requests with FireBug.
In addition to seeing the request that was made, you can view the response (see Figure 6) and the headers (see Figure 7). Seeing the response is extremely useful because you can view all the server’s responses, before you even begin to parse the data and deal with it in JavaScript. This means no more JavaScript alerts on the responseText property from the request object. Viewing the headers is extremely useful because you can get information from the server, such as when the requested file was last updated, what type of server it’s on, and so forth.
)
Figure 6 Viewing the response for an AJAX request.
)
Figure 7 Getting server information from the response headers.
Now that we have some ways to debug, let’s take a look at creating database connections with AJAX.