ajax_lsson.md

Ajax

By the end of this lesson, students will be able to

• Explain what AJAX is
• Explain Synchronous VS Asynchronous
• Explain what is Cross Origin Resource Sharing is
• Use and explain methods such as .ajax, $.get and $.getJSON
• Explain How to make a AJAX request
• Explain What a callback function is
• Reviewing AJAX

Round 1

• Explain what AJAX is and what problem it solves
• Explain the difference between synchronous and asynchronous program execution.
• Explain the difference between an AJAX request and a synchronous request.
• Explain the need for CORS and how it enables secure requests to be made across domains
• Describe how the native XMLHttpRequest differs from the jQuery AJAX implementation

Round 2

• Explain what $.ajax is, and how it relates to methods such as $.get and $.getJSON.
• Use jQuery $.ajax to make an asynchronous GET request.
• Use jQuery $.ajax to make an asynchronous POST request.
• Provide a callback to capture an AJAX response when it's ready.
• Render HTML content using data loaded from an AJAX request.

10 minute break

Round 3

• Overview of AJAX
• End Activity

Round 1

---

What is AJAX?

AJAX stands for "Asynchronous Javascript And XML"

AJAX is a fast, user-friendly way to access data from external resources, when that data is available through a web API.

In order to make complex web apps, we will probably want information from some of the amazing resources that provide rich, useful data. If you want to integrate maps, social media, live searched images, or any other user controlled data, you're going to want an API and AJAX to access it.

Asynchronous - not happening at the same time. Some of your code will be executed at a later time. Specifically, a callback will run when you get the results of your request - even if takes a while. This waiting time won't hold up the performance of the rest of your page.

XML - a format for structuring data so that it can be sent and received across the web. XML has mostly been replaced by JSON, and AJAX can be used with either JSON or XML.

Review:

• Why the acronym (XML @ the end)
• What difference does AJAX make on the web?
• Quick overview of client server communication
• Draw a diagram of how AJAX works.

Synchronous VS Asynchronous

• Explain what Synchronous is
• Explain Asynchronous
• refer to diagram again

AJAX VS Regular Requests

• Show an example of synchronous
• show an example of asynchronous on a webpage

What is CORS?

CORS stands for 'Cross Origin Resource Sharing'

• What is CORS?
• Explain why the WWW implements CORS

Activity

You want to use AJAX to get content from another website and put it on your page.

Draw two boxes, with the word "browser" in one, and "server" in the other, draw out how an ajax request works on your desk with a partner, write out the steps of what is going on in this scenario.

Round 2

---

What is $.ajax, $.get and $.getJSON?

Let's write some AJAX!

Here's how it's done in vanilla:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

How it's done w/ jQuery

    var req = $.ajax({
      url: "url",
      method: 'GET'
  });

  req.done(function(res){
    // What's the AJAX response?
  });
  req.fail(function(err){
  // What's the AJAX error?
  });

W/ JSONP

function logResults(json){
  console.log(json);
}

$.ajax({
  url: "https://api.github.com/users/jeresig",
  dataType: "jsonp",
  jsonpCallback: "logResults"
});

• explain mandatory $.ajax parameters
• work through jQuery $.ajax doc page, explain capabilities
• explain JSON.stringify(), JSON.parse()

Let's make a GET AJAX request

• Diagram what an API is, and how GET works with this
• Explain the Hipster Jesus API, draw how HJAPI works on diagram

$.getJSON('http://hipsterjesus.com/api/', function(data) {
     $('#content').html( data.text );
 });

• Render the result on the page w/ jQuery

Explain the callback, what it's role is.

• Recall what a callback is
• Recall callbacks from previous lessons with arrays
• What's the role of callbacks in AJAX?
• Relate the callbacks

Rendering the HTML to our page (Showing what we asked for)

• Show how code inside the callback showed what's on the page
• Draw or refer to a/the diagram of AJAX, and augment it with how the view is generated.

Activity

Let's stringify this 'user' object, and the paste it into, a JSON file.

var user = {
  firstName: 'John',
  lastName: 'Wilks Booth',
  profileImage: 'url',
  aboutMe: 'I\'m a wheelin\' dealin\' sun of a gun'
};

var jsonUser = JSON.stringify(user);

console.log(jsonUser);

Make a request to this file using AJAX and load something onto the page, you can use your existing code and modify it if you need to.

Round 3

---

Overview of AJAX

• How AJAX works
• Step by step our code, what is it doing?
• Q & A

Activity (25 min)

Taking everything we learned, let's make an HTML page with multiple boxes and in each of these boxes let's put some content from ajax.

For text we can use
http://hipsterjesus.com/api/

Information:
http://hipsterjesus.com

For images we can use
http://www.splashbase.co/api/v1/images/random

Information:
http://www.splashbase.co/api