WDI Darth Vader

Javascript

jQuery $.ajax()

Summary

"Ajax" refers to the ability of JavaScript to make HTTP requests asynchronously (a.k.a. "in the background") and act on the results directly without having the browser load a new page. Just like DOM manipulation and event handling, jQuery gives us a high-level interface to the browser's Ajax capabilities through the $.ajax function.

Most Ajax interactions use the JSON data format for requests and responses.

GET Examples

Standard Example

$.ajax({
  url: 'http://localhost:8000/animals',
  type: 'POST',
  dataType: 'json',
  data: {"animal":
  {"name": animal,
  "sound": sound}
}})

OMDBI Example

$.ajax({
    url: 'http://www.omdbapi.com/?t=Star+Wars&y=&plot=short&r=json',
    type: "GET",
    dataType: 'json',
    success: function(data) {
        $('body').append(data.Title + " was released in " + data.Year + "<hr><br>");
    }
});

Shake-it-speare

$.ajax({
    url: 'http://shakeitspeare.com/api/poem',
    type: "GET",
    dataType: 'json',
    success: function(data) {
        var data = data;
        //console.log(data);
        $('body').append(data.poem);
        //alert("huzzah! we did it guys!");
    },
    fail: function(error) {
        console.log(error);
    }
});

POST examples

 var animal = $("#animalName").val();
    var sound = $("#animalSound").val();

    // alert(animal);

    $.ajax({
      url: 'http://localhost:8000/animals',
      type: 'POST',
      dataType: 'json',
      data: {"animal":
      {"name": animal,
      "sound": sound}
    }})