Actions happen when the data is returned, other JavaScript code can continue to execute while the we wait for a response.
The request comes from some JavaScript code not from a <script> tag, <link> tag, or anything else.
Originally all AJAX requests used XML as a communication format
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.
<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
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
Server
Client
AJAX Request
AJAX Response
// THE SERVER IS HANDLING THE REQUEST -- NOTHING FOR US TO DO
Making a Request
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
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));
}
});
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?
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!")
$.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.