Ajax/jQuery.getJSON Simple Example

Category: $.getJSON, Ajax, jamesh, JavaScript, jQuery, jquery getjson, jquery json example, json, jsonp, Web

In this article we’ll investigate the importance of JSON and why we should use it in our applications. We’ll see that jQuery has got us covered with a very nice convenience function.

What is JSON?

[author_more]

JSON stands for JavaScript Object Notation. In simple terms JSON is a way of formatting data for, e.g., transmitting it over a network. In this article we will look at loading JSON data using an HTTP GET request (we can also use other verbs, such as POST).

Why would we choose JSON over say XML? The key advantage of using JSON is efficiency. JSON is less verbose and cluttered, resulting in fewer bytes and a faster parse process. This allows us to process more messages sent as JSON than as XML. Moreover, JSON has a very efficient and natural object representation leading to formats such as BSON, where JSON-like objects are stored in a binary format.

Now let’s see how jQuery can help us load JSON-encoded data from a remote source. For the impatient among you, there’s a demo towards the end of the article.

JSON jQuery Syntax

The $.getJSON() method is a handy helper for working with JSON directly if you don’t require much extra configuration. Essentially, it boils down to the more general $.ajax() helper, with the right options being used implicitly. The method signature is:

$.getJSON(url, data, success);

Besides the required URL parameter we can pass in two optional parameters. One represents the data to send to the server, the other one a callback to trigger in case of a successful response.

So the three parameters correspond to:

The url parameter is a string containing the URL to which the request is sent.
The optional data parameter is either an object or a string that is sent to the server with the request.
The optional success(data, textStatus, jqXHR) parameter is a callback function executed only if the request succeeds.

In the simplest scenario we only care about the returned object. In this case, a potential success callback would look like this:

function success(data) {
  // do something with data, which is an object
}

As mentioned, the same request can be triggered with the more verbose $.ajax() call. Here we would use:

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

Let’s see this in practice using a little demo.

A Sample Application

We will start a local server that serves a static JSON file. The object represented by this file will be fetched and processed by our JavaScript code. For the purposes of our demo we’ll use Node.js to provide the server (although any server will do). This means we’ll need the following three things:

A working installation of Node.js.
The node package manager (npm).
A global installation of the http-server package.

The first two points are platform-dependent. If you need some help getting either of them set up, you might want to check out our tutorial: A Beginner’s Guide to npm — the Node Package Manager, or Node’s download page (npm comes bundled with Node).

The third point can be achieved by running the following from your terminal:

npm install http-server -g

If you find yourself needing a sudo prefix (-nix systems) or an elevated command prompt to perform this global installation, you should consider changing the location of global packages.

Once these requirements are met we can put the following three files in a new folder:

example.js is the JavaScript file to request the data.
example.json is the example JSON file to represent our object.
index.html is the HTML page to call the JavaScript and display the data.

Download Example (Source Files)

From the command prompt we can simply invoke http-server within the new folder. Now http://localhost:8080 should be running the demo.

The Sample JavaScript

The following code is the complete client-side logic. It waits for the DOMContentLoaded loaded event before attaching an event handler to the click event of the element with the ID get-data. When this element is clicked we attempt to load the JSON from the server using $.getJSON(), before processing the response and displaying it on the screen.

Continue reading %Ajax/jQuery.getJSON Simple Example%

blog