AJAX with JSONP Example

JSON from REMOTE Domain


If you want to use remote JSON data, JSON that is not from your domain, the JSON feed must support JSONP. JSONP is just like JSON data but the data is wrapped in a Javascript function. For example, Make a JSONP response

http://yoursite.herokuapp.com/data/json?callback=myFunc
Result - JSONP response
myFunc({'name':'Tony Pony'})


The AJAX function and button click are defined in the javascript file ajax_example.js.


Flickr JSONP Example


// When the browser has finished loading all HTML, run this.
jQuery(document).ready( function() {
    // when flickr button is clicked
    jQuery("button#flickrApiBtn").click( getFlickrPhotos);

});
/***********************************
    JSONP + Flickr Code
************************************/

var getFlickrPhotos = function() {
    var flickrURL = "http://api.flickr.com/services/feeds/photos_public.gne?tagmode=any&format=json";
    var query = jQuery("#flickrQuery").val();

    queryURL = flickrURL + "&tags=" + query;

    alert(queryURL);

    // make ajax call to flickr
    jQuery.ajax({

        url : queryURL,
        type : 'GET',
        dataType : 'jsonp',
        jsonp : 'jsoncallback',

        success : function(response) {
            console.log("got a response from flickr");
            console.dir(response);

            //display the photos
            displayPhotos(response.items);
        },
        error : function(error) {
            alert("uhoh something happened");
        }


    })

}

var displayPhotos = function(photosArray) {

    newHTML = "";

    for(i=0; i < photosArray.length; i++) {

        currentPhoto = photosArray[i];

        tmpHTML = "
  • \ \ \
    \ from " + currentPhoto.author + " \
  • "; newHTML += tmpHTML; } jQuery("#flickr_container").html(newHTML); // replace current html inside #flickr_container with new image html }