📖 Lecture 4—AJAX and getJSON

This is lecture 4 of Beginning jQuery course. In this lecture, we explore how to query data from network.

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML.

It is a concept that uses JavaScript and XML to send server request and get response in an asynchronous way that happens in web browser.

Nowadays we replaced the XML part with JSON. But the concept is the same.

Instead of browser that calls the request, AJAX uses JavaScript to trigger a request from client-side to server.

On the server-side, the server determines the request as JSON request, often by checking the content type. Then server returns JSON formatted content instead of normal HTML.

The JavaScript logic, which triggers the request, then manipulates and constructs the HTML based on the returned data.

The following graph shows the difference between normal browser request and an AJAX request. When the page loads page 2, the AJAX only changes what’s difference and keep the other part (which part) unchanged.

AJAX-refreshing

JavaScript Object Notation

We use JSON a lot nowadays. JSON stands for JavaScript Object Notation. It’s designed as a lightweight data interchange format that’s easy for reading and writing by both human and computer.

API from some web services

You’ll need API end points to test the jQuery’s AJAX functions. Here are few of them.

Open Weather

Open Weather allows us to query weather detail of specify city.

<a href="http://openweathermap.org/api

Open Exchange Rate

I have written an example of using the API of Open Exchange Rate in my course “Mobile web app development with PhoneGap”, which you can find it in the following URL.

http://makzan.net/mobile-web-app-dev-with-phonegap/exchange-rate-2-api/

I have created a test-only token which you can find in the following link. Please note that the token should be only used in this course and I will revoke the token later.

<a href="http://mak.la/exchange-rate-token

Dribbble

<a href="http://developer.dribbble.com/v1/

I have created a testing-only application which you may use to try fetching some dribbble shots into your jQuery project.

<a href="http://mak.la/dribbble-token

Note: This token should be exclusively used in this course only. I may revoke the token from time to time, please let me know if you face issue using the test-only token.

Facebook Graph API

The base of the API is <a href="https://graph.facebook.com</a>.

for page:

https://graph.facebook.com/makzan

for user profile:

https://graph.facebook.com/maksenghin

The expression of Facebook Graph API is usually like the following:

/objectID/
/objectID/collections

Here are some of the examples:

/pageID/albums
/albumID/photos
/pageID/likes
/photoID/comments

Take my Facebook page as an example:

The following URL shows the albums list of makzan’s page.

https://graph.facebook.com/makzan/albums

From the album list, we can know detail of each album, including the album ID. By querying that ID, we can get basic information about this album.

https://graph.facebook.com/277532299119410

The following URL shows the photos inside this particular album.

https://graph.facebook.com/277532299119410/photos

getJSON

$.getJSON(url, callback);

http://api.jquery.com/jQuery.getJSON/

which is actually a short hand of:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

All the short hand methods:

get
getJSON
getScript
post
load

http://api.jquery.com/category/ajax/shorthand-methods/

jQuery.ajax#

The $.ajax is the magic behind all these handy methods

http://api.jquery.com/jQuery.ajax/

Eventually jQuery.ajax uses the browser’s XMLHttpRequest method to trigger a request without refreshing the browser.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Please also note that new browser comes with a Fetch API.

JSON-P

JSON-P stands for JSON with padding.

JavaScript is powerful. But JavaScript cannot do everything. There is strict restriction when executing JavaScript that access data beyond its own domain.

We restrict this by domain because usually it’s the same owner that write code on the same domain. And we don’t want script to access data that’s not belongs to its domain.

But when querying data cross domain, we need to actually access data that’s not on the same domain. The method of JSON with padding solves this issue by making the server generated data calls a custom function in the client-side. The following site shows a detail explanation and example.

http://json-p.org

Inspecting the responses

$.getJSON(url, function(data){
  console.log(data);
});

Usually we want to inspect the returned data before we know how to make use of the API.

The console logging can show the returned data in browser’s console. There are also browser extensions that formats JSON responses. In Mac, I use Paw app.

Manipulating DOM elements

After we fetched the data from network, usually we need to construct the view, which is usually a couple of HTML tags and images.

If the request is a collection of resources, we usually use a loop to iterate each data object. On each object, we use the data to construct the HTML view.

We make use of the handy jQuery methods to manipualte HTML DOM elements. For example, we can use text to change text content based on the fetch data and prop to change image sources for the img tag.

We may need prepend method to incrementally show more content to our readers.

Summary

We went through the concept of loading data asynchronously with JavaScript. We also went through the techniques we use to make use of the requests and responses.

–Thomas Mak