Search code examples
jqueryajaxjsonjsonp

Why jsonp with cross domain ajax() call is not working?


I'm tryig to get my head around using jsonp due to cross domain restriction.

After searching through lot of forum entries in here and other sites..I have arrived at point where I do not know why one of the example is working but another example is not.The output of the both rest url are in same JSON format.

Twitter Feed Working Example: http://jsfiddle.net/fwXD2/1/

Code is pasted below. If I remove the datatype:'jsonp' then I get "Access-Control-Allow-Origin" error which is expected.

<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: 'https://twitter.com/status/user_timeline/stephenfry?count=10&format=json',
                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);
                },
                error: function(e){  
                    $('#twitterFeed').html("No 'Access-Control-Allow-Origin' header is present on the requested resource.");
                } 
            });
        })
    </script>
</head>
<body>
    <div id = 'twitterFeed'></div>
</body>

Non Working Example: http://jsfiddle.net/kA6z5/

Thanks in advance for any help you can provide.


Solution

  • In JSONP technique, server should wrap the response in javascript function. There is a clear explantion given on jsonp technique here:

    jQuery's "dataType: 'jsonp'" will just make sure to add callback parameter to your url.

    Just add a '&callback=func123' to both the URLs, twitter will respond you with wrapped data where as the other service is not.

    twitter : URL

    findschoolzones : URL

    Its is server's responsibility to identify the callback parameter and returns a wrapped data.