jQuery get() method:

The jQuery get() method sends asynchronous http GET request to the server and retrieves the data.

$.get(url, [data],[callback]);

Parameters Description:

• url: request url from which you want to retrieve the data
• data: data to be sent to the server with the request as a query string
• callback: function to be executed when request succeeds

The following example shows how to retrieve data from a text file.

$.get('/data.txt',  // url
      function (data, textStatus, jqXHR) {  // success callback
          alert('status: ' + textStatus + ', data:' + data);
    });

 

In the above example, first parameter is a url from which we want to retrieve the data. Here, we want to retrieve data from a txt file located at mydomain.com/data.txt. Please note that you don't need to give base address.

Internally, jQuery get() method calls ajax() method only. Visit james.padolsey.com/jquery and search for get() method to see the source code.

The second parameter is a callback function that will be executed when this GET request succeeds. This callback function includes three parameters data, textStatus and jQuery wrapper of XMLHttpRequest object. Data contains response data, textStatus contains status of request and jqXHR is a jQuery XMLHttpRequest object which you can use for further process.

The following example shows how to retrieve JSON data using get() method.

$.get('/jquery/getjsondata', {name:'Steve'}, function (data, textStatus, jqXHR) {
    $('p').append(data.firstName);
});

<p></p>

In the above example, first parameter is a url from which we want to retrieve JSON data. This url can be a web service or any other url that returns data in JSON format.

The second parameter is data to be sent to the server as a query string. We have specified name parameter with value 'Steve' in the JSON format. So now, the request url would look like http://mydomain.com/jquery/getjsondata?name=Steve

The third parameter is a callback function that will be executed when this GET request succeeds.

jQuery getJSON() method:

The jQuery getJSON() method sends asynchronous http GET request to the server and retrieves the data in JSON format by setting accepts header to application/json, text/javascript. This is same as get() method, the only difference is that getJSON() method specifically retrieves JSON data whereas get() method retrieves any type of data. It is like shortcut method to retrieve JSON data.

$.getJSON(url,[data],[callback]);

Parameter Description:

• url: request url from which you want to retrieve the data
• data: JSON data to be sent to the server as a query string
• callback: function to be executed when request succeeds

The following example shows how to retrieve JSON data using getJSON() method.

$.getJSON('/jquery/getjsondata', {name:'Steve'}, function (data, textStatus, jqXHR){
    $('p').append(data.firstName);
});

<p></p>

In the above example, first parameter is a url from which we want to get JSON data. This can be a web service or any other url that returns JSON data.

The second parameter is data to pass as query string with the GET request. So now, the request url would look like http://mydomain.com/jquery/getjsondata?name=Steve

Internally, jQuery getJSON() method calls get() method and set dataType to JSON. Visit james.padolsey.com/jquery and search for get() method to see the source code.

The third parameter is a callback function which will be executed when request succeeds. The data parameter will be in the JSON format because getJson() method automatically converts server response into a JSON object.

You can attach fail and done callback methods to getJson() method as shown below.

$.getJSON('/jquery/getjsondata', { name:'Steve'}, function(data, textStatus, jqXHR){
                alert(data.firstName);
        })
        .done(function () { alert('Request done!'); })
        .fail(function (jqxhr,settings,ex) { alert('failed, '+ ex); });

jQuery getScript() method:

The jQuery getScript() method sends http GET request to the server, retrieves the JavaScript file and then executes it. Internally, jQuery getScript() method calls get() method and sets dataType to script.

$.getScript(url, [callback]);

Parameter Description:

• url: request url from which you want to download JavaScript file
• callback: function to be executed when request succeeds

The following example shows how to download script file using getScript() method.

$.getScript('/Scripts/myJavaScriptFile.js', function(script,status,jqxhr){
            alert(status);
        });

In the above example, first parameter is a url from which we want to download script file. Here, we download myJavaScriptFile.js file for demo purpose.

The second parameter is a callback function which will be executed when request succeeds.

Thus, you can use different get methods to retrieve different types of resources using http get request.

Points to Remember :

1. $.get(), $.getJSON() method allows you to send asynchronous http GET request to retrieve the data from the server without reloading whole page.
2. $.get() can be used to retrieve any type of response from the server.
3. $.getJSON() method is a short form method to retrieve JSON response from the server.
4. $.getScript() sends asynchronous http GET request to retrieve the script files from the server and execute it.
5. Syntax:
   $.get(url,[data],[callback])
$.getJSON(url,[data],[callback])
$.getScript(url,[callback])

Learn how to submit and retrieve data using http POST request in the next section.