WDI Darth Vader

Ajax... Again!

We can GET and POST resources to the web using Ajax!

// $.ajax
// GET: get resources from a web
// POST: send /submit data somewhere (POST a tweet or status)

Remember... Ajax is just a method of jQuery!

$.ajax(); // ajax is a method of jQuery

And that is accepts an arguments object!

// arguments {} for jQuery
{
    type: 'get', // OR 'post'
    url: 'http://somewhere.com/api/stuff', // url
    dataType: 'json', // also could be 'xml', etc..
    // POST only...
    data: {}    // send 
}

Let's add the object as the argument to the jQuery method...

// add arguments - argument for Ajax is a JS {}
$.ajax({
    type: 'get',
    url: 'http://somewhere.com/api/stuff',
    dataType: 'json'
});

I can refer to that argument as a variable for ease of use

var ajaxArgument = {
    type: 'get',
    url: 'http://api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID=1111111111',
    dataType: 'json',
    success: function(data) {
        console.log("success");
        console.log(data);
    },
    error: function(error) {
        console.log("error")
        console.log(error);
    }
};
// make the ajax call
$.ajax(ajaxArgument);

I can also call .done and .fail if I prefer to chain methods...

// or...
$.ajax(ajaxArgument).done(function(data) {
    console.log(data);
});
$.ajax(ajaxArgument).fail(function(error) {
    console.log(error);
});

Example: Add a loading spinner icon when a request is made and remove it when the request is done.

// how do I add a spinner or some sort of icon to show loading?

// do some code to show a spinner...
$('.spinner').show(); // <div class="spinner">....
$.ajax({
    type: 'get',
    url: 'http://imperialholonet.herokuapp.com',
    dataType: 'json',
    success: function(data) { // data is the data from our server
        console.log(data);
        // some code to success message!
        $('.success').show(); // <div class="success">....
        $('.spinner').hide(); // <div class="spinner">....
    },
    error: function(error) {
        console.log(error);
        // some error code...
        $('.wompwomp').show(); // <div class="wompwomp">....
        $('.spinner').hide(); // <div class="spinner">....
    },
});

What is this .done() anyways?

// using .done()
// only should be used when you own the server for the API
// not if you rely on someone else for data!
var ajaxArgument = {
    type: 'get',
    url: 'http://api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID=1111111111',
    dataType: 'json'
};
$.ajax(ajaxArgument).done(function(data) {
    console.log('whoa now, we\'re done..');
    console.log(data);
});

We can also shorthand Ajax GET requests...

// what about... .getJSON?
// shorthand 'GET' request method
$.getJSON("url", function(data) {
    // do stuff with your data
    console.log(data);
});

Now, let's take a look at what a closure is...

// closure is a way to access data inside of a 
// scope that no longer exists
var ajaxArgument = {
    type: 'get',
    url: 'http://api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID=1111111111',
    dataType: 'json',
    success: function(data) {
        console.log("success");
        console.log(data);
    },
    error: function(error) {
        console.log("error")
        console.log(error);
    }
};
var oldAjax = $.ajax(ajaxArgument); // assign ajax to 
console.log(oldAjax.responseJSON); // closure data