jQuery Ajax Examples
There are 5 different Ajax demos below and you can also download all demos in a package to try them out and experiment yourself (the best way to understand how the ajax function works is to have a go!).
jQuery.ajax() Example with PHP Script
This example loads data from a PHP script (which gets the number of Facebook fans and Twitter followers for the jQuery4u blog)
-----------------------------------------------------
JQUERY - CALL PHP SCRIPT TO GET DATA FOR WEB PAGE
-----------------------------------------------------
$.ajax({
url: 'getTwitterFollowers.php',
type: 'GET',
data: 'twitterUsername=jquery4u',
success: function(data) {
//called when successful
$('#ajaxphp-results').html(data);
},
error: function(e) {
//called when there is an error
//console.log(e.message);
}
});
-----------------------------------------------------
PHP - GET NUMBER FACEBOOK FANS & TWITTER FOLLOWERS
-----------------------------------------------------
< ?php
//get data passed to script
$username = htmlspecialchars(strip_tags($_GET["twitterUsername"]));
//get twitter followers
$api_page = 'http://twitter.com/users/show/' . $username;
$xml = file_get_contents ( $api_page );
$profile = new SimpleXMLElement ( $xml );
$count = $profile->followers_count;
$tfans = strval ( $count );
//get facebook likes
$fuser = json_decode(file_get_contents('http://graph.facebook.com/140918675956744/'));
//return result
echo "jQuery4u has " . $fuser->likes . " Facebook fans and " . $tfans . " Twitter followers.";
?>
jQuery.getJSON() Example
This example loads destinations.json which is located in the same folder.
$.getJSON('destinations.json', function(data) {
$('#getJSON-results').html(JSON.stringify(data));
});
jQuery.getScript() Example
This example loads in a geo location js script which contains geo location functions.
jQuery.getScript('http://www.geoplugin.net/javascript.gp', function()
{
$('#getScript-results').html("Your location is: " + geoplugin_countryName() + ",
" + geoplugin_region() + ", " + geoplugin_city());
});
.load() Example
This example loads just the header of the jQuery4u blog via ajax.
$('#load-results').load('http://www.jquery4u.com .header', function(data){
//example of callback
console.log(data);
});
jQuery.ajax() and JSONP (cross domain calls) Example
This example loads the destinations.json (which is on another domain) using JSONP callback.
$.ajax({
type: 'GET',
url: 'http://www.phpscripts4u.com/data/destinations.json',
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(data)
{
$('#jsonp-results').html(JSON.stringify(data));
console.log(json);
},
error: function(e)
{
alert(e.message);
}
});
jQuery.getJSON API Call Example
This example loads the latest 5 pictures from Flickr that are tagged jQuery.
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: "jquery,javascript",
tagmode: "any",
format: "json"
},
function(data) {
$.each(data.items, function(i,item){
$("< img/>").attr("src", item.media.m).appendTo("#flickrapi-results");
if ( i == 10 ) return false;
});
});