looking

at AJAX

with JavaScript and jQuery

JS

Asynchronous JavaScript and XML

Asynchronous

basically means that this process goes on without blocking any other actions. You can still scroll through the page and load other assets while your Ajax data is being loaded.

{

JavaScript

{

Yes...

and

XML

{

although you can get XML most of the time you’ll be pulling JSON back from an API

So what’s the point?

It pulls information behind the scenes without a page refresh. - like Twitter, Google Maps, and even DT Responsive Websites.

Quickly see it in action using the console in

Chrome - (Log XMLHttpRequests)

AJAX the JS way

  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'sidebar.html');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      document.getElementById('ajax')
        .innerHTML = xhr.responseText;
    }
  };
  xhr.send();

the XHR Object

Let’s use jQuery

The jQuery library has a full suite of Ajax capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh.

    $.get( "sidebar.html", function( data ) {
      $( "#ajax" ).html( data );
    });

digging in

$.get()

$.getJSON()

$.ajax()

http://api.jquery.com/category/ajax/

code{/}

Let's talk

questions?