AJAX

Should be called AJAJ

Objectives

• Define AJAX
• Deepen your understanding of asychronous
• Make an AJAX Request using jQuery

AJAX

Asynchronous

Actions happen when the data is returned, other JavaScript code can continue to execute while the we wait for a response.

JavaScript

The request comes from some JavaScript code not from a <script> tag, <link> tag, or anything else.

And XML

Originally all AJAX requests used XML as a communication format

Asynchronous

Server

Client

AJAX enables the Server and Client to communicate to each other "asynchronously". Asynchronous means that the client will wait for a response before trying to use the data.

AJAX Request

AJAX Response

1. Client creates a request.

2. Server responds to that request.

3. Client JavaScript handles that request.

XML, and "AJAJ"

<person>
    <firstName>John</firstName>
    <lastName>Smith</lastName>
    <isAlive>true</isAlive>
    <age>25</age>
    <address>
        <city>New York</city>
        <state>NY</state>
    </address>
    <favoriteColors>
        <color>Blue</color>
        <color>Orange</color>
    </favoriteColors>
</person>

{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 25,
  "address": {
    "city": "New York",
    "state": "NY"
  },
  "favoriteColors": ["Blue", "Orange"]
}

XML and JSON are both formats for sending data. XML used to be popular, now JSON is much more popular. We're going to work with JSON even though people still call this AJAX

XML

JSON

JavaScript - Callbacks

Server

Client

AJAX Request

AJAX Response

// THIS CREATES THE REQUEST OBJECT
httpRequest = new XMLHttpRequest();

// THIS TELLS THE REQUEST WHERE TO GO
httpRequest.open('GET', 'http://www.google.com');

// THIS SENDS THE REQUEST!
httpRequest.send();

Making a Request

JavaScript - Callbacks

Server

Client

AJAX Request

AJAX Response

// THE SERVER IS HANDLING THE REQUEST -- NOTHING FOR US TO DO

Making a Request

JavaScript - Callbacks

Server

Client

AJAX Request

AJAX Response

// THIS CODE IS TRIGGERED WHEN THE HTTP REQUEST CHANGES STATE
// 4 means the request is "done".
// httpRequest.status < 400 means the request was "not an error".
httpRequest.onreadystatechange = function(){
    // THIS HAPPENS ANY TIME THE REQUEST READY STATE CHANGES
    if (httpRequest.readyState === 4) {
       
       // THIS HAPPENS WHEN THE REQUEST IS "DONE"
       if(httpRequest.status < 400) {
         
         // THIS HAPPENS IF THE "DONE" REQUEST IS A SUCCESS
         alert(httpRequest.responseText);
       }
    }
};

Making a Request

Vanilla JS

JQuery

httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = function(){
    if (httpRequest.readyState === 4) {
       if(httpRequest.status < 400) {
         alert(httpRequest.responseText);
       }
    }

};
httpRequest.open('GET', 'http://www.omdbapi.com/?t=Frozen&y=&plot=short&r=json');
httpRequest.send();

$.ajax({
  url: 'https://www.omdbapi.com/?t=Frozen&y=&plot=short&r=json',
  method: "GET",
  success: function(data) {
    alert(JSON.stringify(data));
  }
});

Race Conditions

console.log("BEFORE THE AJAX")

$.ajax({
  method: "GET",
  url: "http://omdbapi.com/?i=tt1392190",
  success: function(info) {
    console.log("DONE")
    console.log(info)
    //write all my code that relies on the response data
  },
  error: function(err){
    console.log("FAIL")
    console.log(err)
  }
});

console.log("AFTER THE AJAX!")

If an AJAX request is made the client continues processing code until the response is received.

What order will these console.log statements print?

Race Conditions

console.log("BEFORE THE AJAX")

$.ajax({
  method: "GET",
  url: "http://omdbapi.com/?i=tt1392190",
  success: function(info) {
    console.log("DONE")
    console.log(info)
    //write all my code that relies on the response data
  },
  error: function(err){
    console.log("FAIL")
    console.log(err)
  }
});

console.log("AFTER THE AJAX!")

1. "BEFORE AJAX"
2. "AFTER AJAX"
3. "DONE"/"FAIL"
4. info/err

Promises

$.ajax({
  method: "GET",
  url: "http://omdbapi.com/?i=tt1392190"
})
.done(function(info) {
    console.log("DONE")
    console.log(info)
  //write all my code that relies on the response data
 })
.fail(function(err){
  console.log("FAIL")
  console.log(err)
});

Promises are an alternative to vanilla callbacks. 

Objectives ... Review!

• Define AJAX
• Deepen your understanding of asychronous
• Make an AJAX Request using jQuery

Questions?