Viewing AJAX in action

Functions

• What is a function?
• Pre-defined functions
• Scope of Variables
• Function Expressions
• Anonymous Functions
• Callback Functions

Objects

• What is an object?
• Accessing Object Properties
• Calling an Object’s Methods
• Altering Properties/Methods

Array Properties and Methods

• The length property
• Stack Methods
• Queue Methods
• Reordering Methods
• Manipulation Methods
• Location Methods
• Iterative Methods
• Working with array of objects

DOM

• The Document Object Model
• Node Relationships
• Working with the Contents of Elements
• Getting Elements by ID, Tag Name, or Class
• Adding and removing element

Built-in Objects

• Object Types
• The String Object
• The Window Object

Using Events in JavaScript

• What are events?
• Handling events
• DOM manipulation using events

Handling Input and Output

• Understanding HTML Forms
• Working with the Form Object
• Validating user input

Ajax and JSON

• Introduction to AJAX and JSON
• Viewing AJAX in action
• Using the XMLHttpRequest object
• Putting Objects in Motion with JSON

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 http://www.wunderground.com/wundermap.

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.