jQuery JSONP AJAX请求有时会失败，并显示“ TypeError：无法调用未定义的方法'done'”

Question

I'm trying to use jQuery JSONP AJAX requests in a bookmarklet and I'm finding that the requests work on some pages, but not on others. Here's example code:

jQuery.ajax({
    url: "http://echo.jsontest.com/key/value/one/two",
    type: "GET",
    dataType: "jsonp",
    cache: false
}).done( function(data){
    console.log(data);
}).fail(function(jqXHR, textStatus, errorThrown){
    console.log("errorThrown: " + errorThrown);
});

If you go to the following Amazon page:

http://www.amazon.com/dp/B00336EUTK?psc=1

And execute the above code in your console, you'll find that it works. However, if you go to this Amazon page:

http://www.amazon.com/dp/B00E5UHSYW?psc=1

And execute the above code in your console, the following error appears:

TypeError: Cannot call method 'done' of undefined

What is causing this problem and how can it be fixed?

EDIT: One interesting thing I've noticed is that on pages where the AJAX requests works, the callback parameter always seems to look like this:

callback=jQuery1640586556919850409_1390439428297

On pages where it fails, it always seems to look like this:

callback=jsonp1390439502398

I've tried this on a bunch of different Amazon pages and it seems like that behavior is consistent.

Maybe it's just a coincidence, but I thought it might be worth pointing out.

Answer 1

Different versions of jQuery

Believe it or not, those two pages are using different versions of jQuery.

You can determine this yourself by typing this into the console: $().jquery

the first page is running v1.6.2

the second page is running v1.2.6

Looking at the jQuery docs for jQuery.ajax() ( here ), it looks like it was not added to jQuery until v1.5

Hope that helps.

Answer 2

If you run a console.log(jQuery.ajax); in console, you'll see that the second link you referenced does not contain a done function in the jQuery.ajax class (since they are two different versions). You can do a version check and handle two different solutions depending on whether or not jQuery has that class method. This works for both links you posted:

//get the jQuery version
var version = jQuery.fn.jquery,
    parts = version.split('.');

//piece together a version integer
version = parseInt(parts[0]+parts[1]+parts[2],10);

if (version >= 150) {
    //new method
    jQuery.ajax({
        url: "http://echo.jsontest.com/keyu/value/one/two",
        type: "GET",
        dataType: "jsonp",
        cache: false
    }).done( function(data){
        console.log(data);
    }).fail(function(jqXHR, textStatus, errorThrown){
        console.log("errorThrown: " + errorThrown);
    });
} else {
    jQuery.ajax({
        url: "http://echo.jsontest.com/keyu/value/one/two",
        type: "GET",  
        dataType: "jsonp",
        success: function(data){  
          console.log(data); 
        },  
        error: function(e){  
          console.log(e);
        }
    });  
}