JavaScript Tutorials

Viewing AJAX in action

In Figure 16-3, shown in the preceding section, the Chrome Developer Tools window is open to the Network tab. The Network tab shows all network activity involving the current web page. When a page is loading, this includes the requests and downloads of the page’s HTML, CSS, JavaScript, and images. After the page is loaded, the Network tab also displays the asynchronous HTTP requests and responses that make AJAX possible. Follow these steps to view AJAX requests and responses in Chrome:

1. Open your Chrome web browser and navigate to

2. Open your Chrome Developer Tools by using the Chrome menu or by pressing Command+Option+I (on Mac) or Control+Shift+I (on Windows).

3. Open the Network tab.

Your Developer Tools window should now resemble Figure 16-4. You may want to drag the top border of the Developer Tools to make it larger at this point. Don’t worry if this makes the content area of the browser too small to use. What’s going on in the Developer Tools is the important thing right now.

Notice that new items are periodically appearing in the Network tab.

These are the AJAX requests and responses. Some of them are images returned from the server, and some are data for use by the client‐side JavaScript.

4. Click on one of the rows in the Name column of the Networks tab. Additional data will be displayed about that particular item, as shown in Figure 16-5.

5. Click through the tabs (Headers, Preview, Response and so on) in the detailed data pane and examine the data.The first tab, Headers, displays the HTTP request that was sent to the remote server. Take a look in particular at the Request URL. This is a standard website address that passes data to a remote server.

6. Select and copy the value of the Request URL from one of the items you inspected.

7. Open a new tab in your browser and paste the entire Request URL into the address bar. A page containing data or an image opens, as in Figure 16-6.