Remote APIs & AJAX

DEMO GOOGLE MAPS + AJAX + GEOCODE

Github

Expanding on our topics from last week there are two other important concepts to cover

• AJAX / XMLHTTPRequest / Background Requests
• Remotes APIs

AJAX

XMLHTTPRequests have been around for many years but gained popularity in 2004-2006 and is one of the features of client-side JavaScript that gave rebirth to the language. People call it AJAX, Asynchronous JavaScript and XML ... your browser can make URL requests (GET, POST, etc) in the background.

AJAX uses:

• Enhance the user experience / Keep the user on the page.
• Data syncing and updating in background.
• Tracking.

Sample AJAX Request with jQuery

Make a request to get Places

jQuery.ajax({

    url : 'http://dwd-nodejs-remoteapis.herokuapp.com/data/places',

    dataType : 'jsonp', // jsonp for remote data url, json for relative/local

    success : function(response) {
        console.log("Got some data");
        console.log(response);

    },
    error : function(err) {
        console.error("uhoh something broke");
        console.error(err);

    }
});

Assignment

Build a client side AJAX method for data entry or data retrieval for your web application. This can use local data (from your app) or remote data.

OR. Select a remote API either client side or backend and implement it with your application.