Ajax with jQuery

This YouTube video was created by Steve Griffith.

At the heart of "Web 2.0" and the movement of creating website of the looked and behaved more like desktop application, was AJAX. Asynchronous JavaScript and XML (AJAX), was first widely used by Google, first in GMail (2004) and Google Maps (2005). But it was not until 2006, that W3C began creating the first XMLHttpRequest standard. Despite the release of a standard, browser continued to have inconsistencies, which made using this new technique cumbersome at best.

NOTE

As of 2017, the XMLHttpRequest object has been replaced with the Fetch API.

However, when jQuery was release, it included an easy to use, cross-browser AJAX abstraction layer. This AJAX abstraction layer was arguably the biggest reason for jQuery wide success. So, let's see it in action.

Assume we have the following HTML.

<p class="ajax">This will be replaced by an AJAX call.</p>

To make a AJAX call with jQuery, use the ajax() method.

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/albums',
    method: 'GET',
    dataType: 'json'
  })
  .done(function (data) {
    $('.ajax').text(JSON.stringify(data, null, 2))
  })
  .fail(function (err) {
    console.error(err)
  })

Try it yourself on CodePen