Using Ajax Shortcuts and Data Types - J Query

Problem
You need to make a GET Ajax request to the server and place the contents of the resulting HTML in a <div>;with an ID of contents.

Solution

Discussion

This recipe differs slightly from others in that we’ll survey a variety of the functions and shortcuts provided by jQuery in an effort to clearly present their differences.
jQuery provides a number of shortcuts for making Ajax requests. Based upon the previous recipes covering Ajax, the following shortcuts exist: .load(), $.get(),$.getJSON(), $.getScript(), and $.post(). But first, let’s review our solution:

The .load(url) method is making a GET Ajax request to hello-world.html and placing the contents of that result into the element #contents. Two optional parameters to the .load() method are data and callback. The data parameter can be either a map (or JavaScript object) or as of jQuery 1.3 a string. The following example is passing in the variable hello with the value world. (This is the same as the following URL: helloworld.html?hello=world.)

The third optional parameter is a callback function that is called when the request completes (either on success or error). In the following example, an alert message is being triggered upon the completion of the request:

The next two methods we will look at are $.get() and $.post(). Both methods accept the same arguments, with the $.get() method sending a GET HTTP request and the $.post() method sending a POST HTTP request. We’ll look at a sample using the $.get() request. The $.get() method accepts url, data, callback, and type parameters.
The first three parameters function the same as with the previous load() method, so we’ll only cover the final type parameter:

The type parameter can accept one of the following: xml, html, script, json, jsonp, or text. These type values determine how the response text from the Ajax request is processed prior to being passed to the callback function. In the previous example, since we specified a type of html, the data argument of our callback will be in DOM objectform. Specifying xml as the type will result in an xml DOM object being passed in. If you specify script as the type, the resulting data returned by the server will be executed prior to the callback method being triggered. Both jsonand jsonpformats result in a JavaScript object being passed to your callback method, with the difference of jsonp being that jQuery will pass in a method name in the request and map that callback method to the anonymous function defined with the request. This allows for crossdomainrequests. Finally, the text format is just as the name suggests: plain text that is passed in as a string to your callback method.
The .load(url) method is making a GET Ajax request to hello-world.html and placing the contents of that result into the element #contents. Two optional parameters to the .load() method are data and callback. The data parameter can be either a map (or JavaScript object) or as of jQuery 1.3 a string. The following example is passing in the variable hello with the value world. (This is the same as the following URL: helloworld.html?hello=world.)

The third optional parameter is a callback function that is called when the request completes (either on success or error). In the following example, an alert message is being triggered upon the completion of the request:

The next two methods we will look at are $.get() and $.post(). Both methods accept the same arguments, with the $.get() method sending a GET HTTP request and the $.post() method sending a POST HTTP request. We’ll look at a sample using the $.get() request. The $.get() method accepts url, data, callback, and type parameters.
The first three parameters function the same as with the previous load() method, so we’ll only cover the final type parameter:

The type parameter can accept one of the following: xml, html, script, json, jsonp, or text. These type values determine how the response text from the Ajax request is processed prior to being passed to the callback function. In the previous example, since we specified a type of html, the data argument of our callback will be in DOM object form. Specifying xml as the type will result in an xml DOM object being passed in. If you specify script as the type, the resulting data returned by the server will be executed prior to the callback method being triggered. Both jsonand jsonpformats result in a JavaScript object being passed to your callback method, with the difference of jsonp being that jQuery will pass in a method name in the request and map that callback method to the anonymous function defined with the request. This allows for cross domain requests. Finally, the text format is just as the name suggests: plain text that is passed in as a string to your callback method.
We’ll now look at the final two shortcuts: $.getJSON() and $.getScript(). The $.getJSON() method accepts url, data, and callback as arguments. $.getJSON() is essentially a combination of the $.get() method with appropriate parameters being set for JSON or JSONP. The following example would make a JSONP request to Flickr and request photos from the public timeline:

Since this request is cross-domain, jQuery will automatically treat the request as a JSONP and fill in the appropriate callback function name. This also means that jQuery will initiate the request by inserting a <script>tag into the document instead of using the XMLHttpRequest object. Flickr’s API allows for the callback function name to be specified by setting the jsoncallback get variable. You’ll notice the jsoncallback=? portion of the URL. jQuery will intelligently replace the ? with the appropriate function name automatically. By default jQuery will append a callback= variable but allows for easily modifying this, as demonstrated. The callback replacement works on both GET and POST request URLs but will not work with parameters passed in the data object.See Recipes (Creating JSON) and (Parsing JSON) for working with JSON and Recipe (Using jQuery and JSONP) for a full JSONP implementation of our Flickr example.

$.getScript() executes a request either via an Ajax request or via dynamically inserting a <script>tag for cross-domain support and then evaluating the returned data and finally triggering the callback provided. In the following example, we’re adding a script to the document and then calling one of the functions it provides in the callback:


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics