JQuery Ajax response not triggering success

Question

This is my code,

$.ajax({
            type:"get",

            //this doesn't work
            //url:'http://example.com/json.php',

            //But this works
            url:'http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',

            dataType:"jsonp",
            success:function(data){
                alert('success');
            },
            error:function(){
                alert('error');
            } 
});

in json.php I have

<?php
header("Content-type: application/javascript");
?>

Then I've copied all the output of that flickr url. So the problem shouldn't be in the content of my code but how it's being sent. What do i need to fix here?

Thanks in advance!

Answer 1

The correct Content-type for a JSON file is:

  header( 'Content-type: application/json' );

Could that be the problem?

Answer 2

jQuery calls the success callback for JSONP requests as pointed out by Nick Craver.

Have you added the callback into your PHP script?

Take a look at this article: http://remysharp.com/2007/10/08/what-is-jsonp/

In your json.php file, you should be doing something like:

<?php
$jsonstuff = '{ something: "somethingHere" }';
echo $_GET['callback'] . "(" . $jsonstuff . ")";
?>

Since the default JSONP callback in jQuery is callback.

This is because jQuery appends a callback with an random string name (unless you specify it as jsonpCallback in the options. More information can be found in the documentation. You won't see the callback appended because it's not part of the URL, it's added by jQuery only during the execution of the $.ajax method.

You can see what I mean by trying: http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=myCallBackHandler

If the handler does not execute, jQuery does not trigger the success and complete handlers specified in the $.ajax options.