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.blogoola.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;
  });
});

Download Demos