Nov 222012
 
Share...Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on LinkedInPin on PinterestShare on TumblrShare on RedditDigg this

This is the second post of the series about how to load dynamically external content to a html page by using jQuery AJAX capabilities. If you want to know how to use the load() method please check the previous post.

There are mainly 4 ways of how jQuery library enables the AJAX requests, and this article covers the second one in the list.

  1. using the load() function
  2. using the get() function
  3. using the post() function
  4. using the ajax() function

Using the get() function

The get() method is responsible of loading the data from the server using a HTTP GET request. In reality, this method is an alternative version of the ajax() method that we are going to explore more in one of the next posts. In other words, get() hides the “complexity” of the ajax() method.

The signature of the get() method is as follows:

jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

and it is a bit more complex that the previously seen load() method. The important thing to note here is that the url is the only mandatory argument.

  • data: string that is sent with the request. this could be a query string for instance.
  • success: is a callback function if the request will be successful.
  • dataType: is the dataType expected to be returned: xml, json, script, or html.

a very interesting difference between the previously seen load() method and get(), is that the get() acts as a global function (indeed $.get() shows that), while the load() method on the other hand, is attached to a element.

Example of get() by using xml format

The example below shows how to dynamically retrieve xml data from another page, this could be a static page like in my case for this example, of a Web Service returning some xml dynamically. It doesn’t really make any difference.

In the example below, the javascript will load the data from xml_data.asp page, and if successful, execute the callback function. The whole logic is inside the callback itself. In the callback we parse the XML retrieved and displays an alert with the content of the name property.

$("#loadContent").click(function () {
    $.get('xml_data.asp', function(data) {
        var xml = $.parseXML(data),
        $xml = $(xml),
        $name = $xml.find("name");
        alert("Value retrieved from xml is: " + $name.text());
    });
});

Content of the mentioned xml_data.asp file is as follows

    
	John
	Doe
    

Try it live:


Example of get() by using json

The same example by using the before mentioned json format. get() method automatically recognizes the json data and returns a serialized object.
The content of the json_data.asp is as follows (this corresponds exactly to the previous xml example, but just in json notation).

{
   "customer":
    {
      "name": "John",
      "surname": "Doe"  
   }
}

The following is the javascript that would load the json data from json_data.asp file, and show the value of the customer’s “name” property.
Please note that “json” has been specified as the dataType parameter. Values returned are automatically serialized to json, as you may see the data is directly accessible via data.customer.name.

$("#loadContent").click(function () {
    $.get('json_data.asp', function(data) {
         alert("Value retrieved from json is: " + data.customer.name);
    }, 'json');
});

Try it live:

as you may see, the only difference between the xml and json versions is how we handle the data inside the callback function.

jQuery.getJSON method

jQuery contains another “shortcut” in order to simplify the execution of the json based data with the json specific method which signature is:

jQuery.getJSON ( url [, data] [, success(data, textStatus, jqXHR)] )

in reality, there is no difference between the previous get() a part the fact that we don’t need anymore to specify the dataType as we did previously.

$("#loadContent3").click(function () {
    $.getJSON('json_data.asp', function(data) {
         alert("Value retrieved from json is: " + data.customer.name);
    });
});

Try it live:

Short Conclusion

get() method offers a fairly simple way of dynamically getting xml and json data. It represents a simplified version of the ajax() call, which makes it fairly easy to use and to understand.

Stay tuned as in the next post we will see how to use the post() method.

    Share...Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on LinkedInPin on PinterestShare on TumblrShare on RedditDigg this

    I'm a Software Developer and Solution Architect interested in Software Development, Object-Oriented Design and Software Architecture all this especially bound to the Microsoft.NET platform.Feel free to contact me or know more in the about section

      4 Responses to “AJAX with jQuery – using the get() method”

    1. jQuery get() method sends an HTTP GET request to a page load data from the server back.

      $(“button”).click(function(){
      $.get(“ajax.php”, function(data, status){
      console.log(“Data: ” + data + ” ” + “Status: ” + status);
      });
      });

      For more information:
      http://www.namasteui.com/jquery-get-method/

    2. Hi Zoran,

      great tutorial (as usual)!

      One question: does intellisense parse the json definition (in your example in the json_data.asp file)?

      Or when accessing things like data.customer.name you have to remember exactly how the data is structured?

      ciao

      Elia

      • Hi Elia,
        No, in the example I was giving in this post, it doesn’t, at least not with Visual Studio 2012. I think VS is not as intelligent to parse the actual jQuery parameters and to determine that one is a source of data.
        Perhaps there are ways. It would be good to know.
        Ciao:)

    Leave a Reply

    moon@mailxu.com gildingrpo