YUI 3 Cookbook

Chapter 5. Ajax

Originally, browsers could not easily fetch more data without triggering a full page refresh. Perhaps the most important early approach for solving the I/O problem came from Internet Explorer 5, which introduced a scriptable ActiveX control for performing asynchronous HTTP requests. This feature evolved into a common cross-browser object called XmlHttpRequest (XHR).

Injecting XHR data into the DOM became more and more popular, and in 2005, designer Jesse James Garrett dubbed the technique “Ajax,” for “Asynchronous JavaScript + XML.” Today, “Ajax” more loosely means any technique that makes asynchronous remote calls, ranging from classic XHR to other techniques such as JSONP (“JSON with Padding”) and iframe injection. The response can be HTML partials, data in JSON or XML, or any number of other formats.

Fetching more data with JavaScript is a powerful technique, but opens up the possibility of injecting harmful content into the page. To foil script injection attacks, XHR is subject to the same origin policy. By default, an XHR call to a server with a different domain will fail. However, it is possible to coerce XHR to make cross-domain calls, and there are other non-XHR techniques that bypass this restriction entirely. This chapter explores various techniques for making same-domain and cross-domain calls with YUI.

Fetching and Displaying XHR Data introduces Y.io(), YUI’s wrapper for the classic XHR object.

Handling Errors During Data Transport runs through the various ...