jQuery’s ajax method provides a way to make an HTTP request for JSON data and then handle the successful result.
Assuming that you have access to jQuery in your web page, fetching JSON data is very simple. The key to this is the jQuery.ajax method. This method takes an object as its first argument. In this object, you can, at minimum, specify url and success properties. The url property is the web address of the JSON data that you want to fetch. It should start with http:// or https://. If the resource is a relative path, then it could be virtually anything, for example: /data/json/customers. The success property is a method. That is, you assign a function to the success property. This function will receive the fetched JSON data as its first argument. Inside the function, you can process that data.
Try it yourself!
See the Pen jQuery AJAX – Basic Example by Kevin Chisholm (@kevinchisholm) on CodePen.
In the above example, we make a call to $.ajax. We pass an object to this method and that object has two properties. The url property has the web address of the JSON data that we want. Notice that this address ends with: ?sleep=2. This just means that for demonstration purposes, we can force the request to be delayed for two seconds. Go ahead and change that to ?sleep=5. You will see that the request then takes five seconds to complete. If you change it to ?sleep=0, then you will notice that the request completes very quickly. Either way, you can control this request and slow it down in order to see more clearly how things work.
The success property has an anonymous function assigned to it. This function will be executed once the $.ajax requests succeed. The function will take the fetched data as its first argument. So, inside this function we use the JSONView jQuery plugin to inject the JSON data into the DOM.
Important note: we haven’t specified the HTTP verb that will be used for our request. For example, GET and POST are common HTTP verbs used for sending or receiving JSON data, but PUT and DELETE are fairly common as well. The jQuery.ajax method allows us to specify the HTTP verb that should be used for the request, and we specify this HTTP verb in the object that is passed to the jQuery.ajax method. Note that by default, the jQuery.ajax method will make a GET request, unless we specify a different verb, such as: type=”POST”, for example.
So, in the above example, we specified a success method.
It’s important to note, however, that we did not specify an error method. The reason for this was to make the example code easy to follow. However, it is highly recommended that you always provide an error handler when making any HTTP request. Keep in mind that while you may have full confidence in the requests you are making, HTTP transactions are fragile by nature, and in theory anything can happen. So, whatever you do, don’t overlook this small but important detail.
