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
Using Events in JavaScript
Handling Input and Output
Ajax and JSON
AJAX is a technique for making web pages more dynamic by sending and receiving data in the background while the user interacts with the pages. JSON has become the standard data format used by AJAX applications. In this chapter, you find out how to use AJAX techniques to make your site sparkle!
Working Behind the Scenes with AJAX
Asynchronous JavaScript + XML (AJAX) is a term that’s used to describe a method of using JavaScript, the DOM, HTML, and the XMLHttpRequest object together to refresh parts of a web page with live data without needing to refresh the entire page. AJAX was first implemented on a large scale by Google’s Gmail in 2004 and then was given its name by Jesse James Garret in 2005.
The HTML DOM changes the page dynamically. The important innovation that AJAX made was to use the XMLHttpRequest object to retrieve data from the server asynchronously (in the background) without blocking the execution of the rest of the JavaScript on the webpage.
Although AJAX originally relied on data formatted as XML (hence the X in the name), it’s much more common today for AJAX applications to use a data format called JavaScript Object Notation (JSON). Most people still call applications that get JSON data asynchronously from a server AJAX, but a more technically accurate (but less memorable) acronym would be AJAX.
AJAX examples
When web developers first started to use AJAX, it became one of the hallmarks of what was labeled Web 2.0. The most common way for web pages to show dynamic data prior to AJAX was by downloading a new web page from the server. For example, consider craigslist.org, shown in Figure 16-1.To navigate through the categories of listings or search results on Craigslist, you click links that cause the entire page to refresh and reveal the content ofthe page you requested. While still very common, refreshing the entire page to display new data in just part of the page is unnecessarily slow and can provide a less smooth user experience.
Compare the craigslist‐style navigation with the more application‐like navigation
of Google Plus, shown in Figure 16-2, which uses AJAX to load new content into part of the screen while the navigation bar remains static. In addition to making web page navigation smoother, AJAX is also great for creating live data elements in a web page. Prior to AJAX, if you wanted to display live data, a chart, or an up‐to‐date view of an email inbox, you either
needed to use a plug‐in (such as Adobe Flash) or periodically cause the web page to automatically refresh. With AJAX, it’s possible to periodically refresh data through an asynchronous process that runs in the background and then update only the elements of the page that need to be modified. See Chapter 10 to find out how to update the HTML and CSS of a web page using the HTML DOM’s methods and properties. AJAX relies on these same techniques to display web pages with updated data. Weather Underground’s Wundermap, shown in Figure 16-3, shows a weather map with constantly changing and updating data overlays. The data for the map is retrieved from remote servers using AJAX.