Sunny Books
What we have

Five jQuery AJAX Methods

There are at least five methods to make AJAX calls with the jQuery library. The most common used ones are: .load(),$.get(), $.post(), $.getJSON(), and $.getScript().

.load()

Syntax

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

url: A string containing the URL to which the request is sent.

Data: A plain object or string that is sent to the server with the request.

Complete: A callback function that is executed when the request completes.

The POST method is used if data is provided as an object; otherwise, GET is assumed.

Example

load file

var loadUrl = "ajax/load.php";  
$("#load_basic").click(function(){  
$("#result").load(loadUrl);  
});

.load() allows us to specify a portion of the remote document to be inserted. As the example below, jQuery parses the returned document to find the element with an ID of picture, this element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

Load part of the remote file

$("#load_dom").click(function(){  
	$("#result")  
	.load(loadUrl + " #picture");  
});  

pass parameter through the GET method

$("#load_get").click(function(){  
    $("#result")  
        .load(loadUrl, "language=php&version=5");  
});  

pass parameter through POST method

$("#load_post").click(function(){  
    $("#result")  
        .html(ajax_load)  
        .load(loadUrl, {language: "php", version: 5});  
}); 

with callback function

$("#load_callback").click(function(){  
    $("#result")  
        .html(ajax_load)  
        .load(loadUrl, null, function(responseText){  
            alert("Response:\n" + responseText);  
        });  
}); 



$.get()

$.get() is a more general-purpose way to make GET requests. It handles the response of many formats including xml, html, text, script, json, and jonsp.

Syntax

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

url: (String) the URL to which the request is sent.

data (Optional): A plain object or string that is sent to the server with the request.

success (Optional): A callback function that is executed if the request succeeds.

dataType (Optional): (String) Type of data to be returned to callback function: “xml”, “html”, “script”, “json”, “jsonp”, or “text”.

Example:

var loadUrl = "ajax/load.php";  
$("#get").click(function(){  
	$("#result").html(ajax_load);  
	$.get(  
		loadUrl,  
		{language: "php", version: 5},  
		function(responseText){  
			$("#result").html(responseText);  
		},  
		"html"  
	);  
});  



$.post()

$.post() does exactly the same job as $.get(), except for the fact that it makes a POST request instead.

Syntax

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

url: (String) The URL to which the request is sent.

data (Optional): A plain object ( (Map) Key/value pairs) or string that is sent to the server with the request.

success (Optional): A callback function that is executed if the request succeeds.

dataType (Optional):(String) Type of data to be returned to callback function: “xml”, “html”, “script”, “json”, “jsonp”, or “text”.

Example

var loadUrl = "ajax/load.php";  
$("#post").click(function(){  
	$("#result").html(ajax_load);  
	$.post(  
		loadUrl,  
  		{language: "php", version: 5},  
		function(responseText){  
 			$("#result").html(responseText);  
 		},  
  		"html"  
  	);  
});  



$.getJSON()

$.getJSON() loads JSON-encoded data from the server using a GET HTTP request.

Syntax

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

url: (String) The URL to which the request is sent.

data (Optional): A plain object ( (Map) Key/value pairs) or string that is sent to the server with the request.

success (Optional): A callback function that is executed if the request succeeds.

Note:

  • $.getJSON passes parameters in GET method. POSTing is not possible with $.getJSON.
  • $.getJSON treats response as JSON.

Example:

var jsonUrl = "ajax/json.php";  
$("#getJSONForm").submit(function(){  
    var q = $("#q").val();  
    if (q.length == 0) {  
        $("#q").focus();  
    } else {  
        $("#result").html(ajax_load);  
        $.getJSON(  
            jsonUrl,  
            {q: q},  
            function(json) {  
                var result = "Language code is " + json.responseData.language + "\"";  
                $("#result").html(result);  
            }  
        );  
    }  
    return false;  
});  



.getScript()

We can load JavaScript files with $.getScript method. This method loads a JavaScript file from the server using a GET HTTP request, and then execute it.

Syntax

jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )

url: (String) The URL to which the request is sent.

success (Optional): A callback function that is executed if the request succeeds.

Example:

var scriptUrl = "ajax/script.php";  
    $("#getScript").click(function(){  
        $("#result").html(ajax_load);  
        $.getScript(scriptUrl, function(){  
            $("#result").html("");  
        });  
    });  

Note:

  • Neither the GET nor POST params can be passed to $.getScript. (Of course you can append GET params to the url.)
  • JavaScript files don’t have to contain the “.js” extension. In this case, the remote url points to a PHP file.
SUNWEB EXPERT