Pages

Thursday, February 7, 2013

Request data from a server in a different domain

To request data from a different domain we use json with padding

or jsonp(json with padding)

we use Response to come in a callback function

Refer to following urls

http://itfeast.blogspot.in/2012/07/cross-domain-request-using-jquery.html
http://en.wikipedia.org/wiki/JSONP
http://api.jquery.com/jQuery.ajax/


script = document.createElement(”script”);
script.type = text/javascript”;
script.src = http://www.someWebApiServer.com/some-data”;
 
We get data like this
 
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
 
Due to inconvenience in fetching data from script tag jsonp was introduced as follows
 
script = document.createElement(”script”);
script.type = text/javascript”;
script.src = http://www.someWebApiServer.com/some-data?callback=my_callback”;
 
Now since we have passed a parameter to return jsonp data we will always get sth like
 
my_callback({['some string 1', 'some data', 'whatever data']});
 
in the script tags     
 
Let's take an simple example of using the twitter feed.
 
RAW javascript demonstration (simple twitter feed using jsonp) 

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>
 
And Basic jQuery example (simple twitter feed using jsonp)
 
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html> 

1 comment:

  1. $.getJSON("http://example.com/something.json?callback=?", function(result){
    //response data are now in the result variable
    alert(result);
    });

    ReplyDelete