JQUERY FUNCTION DEMOS
AJAX
Animations & Effects
DOM Manipulation
Events
Traversing & Data

jQuery Jsonp Function Example

Let's have a closer look at the jQuery .jsonp() function.

Demo Code Download

Description

AJAX requests are subject to the same origin policy which means you can only send requests to the same domain. Fortunately, $.ajax() has a property called JSONP (JSON with padding) allows a page to request data from a server in a different domain. It works by wrapping the target data in a JavaScript callback function. It is also worth knowing that the response is not parsed as JSON and can be any JavaScript expression. Lets have a look at an example of the jsonp jQuery function in action. Further Reading »

Demo

jQuery Function Demo - jQuery4u.com

Demo: AJAX & JSONP to load data from an external source.

This demo will load the latest pictures tagged "jQuery" from Flickr Public Feed.

Run Demo View Code


Download

The download package includes all the inline HTML, CSS, JavaScript, jQuery and images required for the .jsonp() function demo so you can try it yourself and change as you please.

Code

<!-- Copyright 2011 jQuery4u.com -->
<!DOCTYPE html>
<html>
<title>jQuery Function Demo - jQuery4u.com</title>
<head>
    <script src="http://www.jquery4u.com/function-demos/js/jquery-1.6.4.min.js"></script>
    <script src="http://www.jquery4u.com/scripts/function-demos-script.js"></script>

    <script type="text/javascript">

    var JQFUNCS =
    {
        runFunc:
        {
            /* ------------------------------ jsonp Demo ------------------------------ */
            "jsonp":
            {
                run: function(id)
                {
                    var demobox = $('#'+id);
                    demobox.html('<img id="loading" src="/function-demos/images/loading.gif" />');
                    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                    {
                      tags: "jquery",
                      tagmode: "any",
                      format: "json"
                    },
                    function(data) {
                      demobox.empty();
                      $.each(data.items, function(i,item){
                        demobox.append('<a href="'+item.link+'" target="_blank"><img style="max-width:150px;" src="'+item.media.m+'" alt="'+item.title+'" title="'+item.title+'" />');
                        if ( i == 10 ) return false;
                      });
                      $('#'+id+' #loading').hide();
                    });
                },

                reset: function(id)
                {
                    $('#'+id).empty().hide();
                }
            }
        }
    }

    </script>

</head>
<body>

<p class="example">Demo: AJAX & JSONP to load data from an external source.</p>
<p>This demo will load the latest pictures tagged "jQuery" from Flickr Public Feed.</p>
<p><a href="#" id="jsonp-demobtn" class="demobtn btn actionr">Run Demo</a> <a href="#" id="jsonp-codebtn" class="codebtn btn actionr">View Code</a> <a href="#" id="jsonp-resetbtn" class="resetbtn btn actionr" style="display: none;">Reset</a></p>
<div class="demoarea" id="jsonp" style="display:inline-block"></div>

</body>
</html>
<!-- Copyright 2011 jQuery4u.com -->