Traditionally webpages required reloading to update their content. For web-based
email this meant that users had to manually reload their inbox to check and see
if they had new mail. This had huge drawbacks: it was slow and it required user
input. When the user reloaded their inbox, the server had to reconstruct the entire
This was hugely inefficient. Ideally, the server should only have to send the user's
new messages, not the entire page. By 2003, all the major browsers solved this issue
by adopting the XMLHttpRequest (XHR) object, allowing browsers to communicate with
the server without requiring a page reload.
and XML). Using Ajax, data could then be passed between the browser and the server,
using the XMLHttpRequest API, without having to reload the web page. With the widespread
adoption of the XMLHttpRequest object it quickly became possible to build web applications
like Google Maps, and Gmail that used XMLHttpRequest to get new map tiles, or new
email without having to reload the entire page.
and when it receives a response, a callback function can be triggered to handle
the response. Because the request is asynchronous, the rest of your code continues
to execute while the request is being processed, so it's imperative that a callback
be used to handle the response.
Unfortunately, different browsers implement the Ajax API differently. Typically
this meant that developers would have to account for all the different browsers
to ensure that Ajax would work universally. Fortunately, jQuery provides Ajax support
that abstracts away painful browser differences. It offers both a full-featured
method, and simple convenience methods such as
Most jQuery applications don't in fact use XML, despite the name "Ajax"; instead,
In general, Ajax does not work across domains. For instance, a webpage loaded from
example1.com is unable to make an Ajax request to example2.com as it would violate
the same origin policy. As a work around, JSONP (JSON with Padding) uses
domain. More recently browsers have implemented a technology called Cross-Origin
Resource Sharing (CORS), that allows Ajax requests to different domains.
- jQuery's Ajax-Related Methods
- Ajax and Forms
- Working with JSONP
- Ajax Events