there are 5 different functions that used to make Ajax call to page and to fetch data. I am going to discuss about those five functions one by one. Following is a list of the five functions available in JQuery library to make an Ajax call.
(1) $.load()
(2) $.getJson()
(3) $.GET()
(4) $.POST()
(5) $.Ajax()
(1) $.load():- this method is to loading HTML content on your web page asynchronously.
$.load(htmlPageUrl):- If you use $.load(htmlPageUrl) passing only the URL of the HTML document as argument, the entire content of the HTML document is loaded into the calling page.
example:- In this eg. we load test.html file data into result div.
[php]
$( "#result" ).load( "test.html" );
[/php]
$.load(htmlPageUrl fragmentIdentifier):- which exactly targets the bit of content I intend to retrieve.
example:- In this eg. we load container div data of test.html file into result div.
[php]
$( "#result" ).load( "test.html #container" );
[/php]
(2) $.getJson():- This method allows to get json data by making ajax call to page. This method allows only to pass the parameter by get method. This method treats the response as Json.
Note:- (i) Only sends data using get method, post is not allowed.
(ii) Treats the response data as Json only.
Example:- Load the JSON data from test.js and access a name from the returned JSON data.
[php]
$.getJSON( "test.js", function( json ) {
console.log( "JSON Data: " + json.users[ 3 ].name );
});
[/php]
(3) $.get():- Allow to make ajax request with the get method. It handles the response of many formats including xml, html, text, script, json, and jonsp.
Note:- (i) Sends data using get method only.
(ii) Can handle any type of the response data.
Example:- Get the test.php page contents, which has been returned in json format (“John”,”time”=>”2pm” ) ); ?>), and add it to the page.
[php]
$.get( "test.php", function( data ) {
$( "body" )
.append( "Name: " + data.name ) // John
.append( "Time: " + data.time ); // 2pm
}, "json" );
[/php]
(4) $.post():- Allows to make ajax request with the post method. It handles the response of many formats including xml, html, text, script, json, and jonsp. post does same as get but just sends data using post method.
Note:- (i) Sends data using post method only.
(ii) Can handle any type of the response data.
Example:- Post to the test.php page and get content which has been returned in json format (“John”,”time”=>”2pm”)); ?>).
[php]
$.post( "test.php", { func: "getNameAndTime" }, function( data ) {
console.log( data.name ); // John
console.log( data.time ); // 2pm
}, "json");
[/php]
(5) $.ajax():- Allows to make the ajax call. This method provides more control than all other methods we have seen. You can figure out the difference by checking the list of parameters.
Note:- (i) Provides more control on the data sending and on response data.
(ii) Allows to handle error occur during call.
(iii) Allows to handle data if the call to ajax page is successful.
Example:-
[php]
var ajaxUrl = "Json.htm";
$("#btnAjax").click(function () {
$("#dvAjax").html(ajax_load);
$.ajax({
type: "GET", //GET or POST or PUT or DELETE verb
url: ajaxUrl, // Location of the service
data: "", //Data sent to server
contentType: "", // content type sent to server
dataType: "json", //Expected data format from server
processdata: true, //True or False
success: function (json) {//On Successful service call
var result = json.name;
$("#dvAjax").html(result);
},
error: ServiceFailed // When Service call fails
});
return false;
});
[/php]
In the above code, you can see all the parameters and comments related to each parameter describe the purpose of each one. Firebug shows the called page return json data and Ajax function treats the respose as Json because in code datatype = json.