处理跨域 jsonp 调用的 jQuery.ajax 错误

Question

我构建了一个 ajax 调用 (jQuery 1.6.2) 的测试用例，如下所示：

jQuery( document ).ready( function( $ ) {
    var test = function( x ) {
        $.ajax({
            url: 'http://www.someotherdomain.com/test.php',
            data: { x: x },
            dataType: 'jsonp',
            crossDomain: true,
            success: function( data ) { 
                console.log( data.name ); 
            },
            error: function() { 
                x++; 
                test( x ); 
            }
        });
    };
    test( 1 );
});

而对应的test.php文件长这样：

if ( 5 > $_GET[ 'x' ] ) {
    header('HTTP/1.1 503 Service Temporarily Unavailable'); die();
} else {
    header( 'content-type: application/x-javascript' );
    echo $_GET[ 'callback' ] . '({"name":"Morgan"})';
}

尽管jQuery documentation 表示永远不会触发 jsonp 调用的错误处理程序，但该脚本仍按我的预期工作。它对 test.php 进行了四次“不成功”调用，返回 503 错误，然后 test() 递归调用自身递增 x 直到 ajax 调用“成功”并将数据输出到控制台。

所以我上面的测试用例可以工作，但是我的实际代码不起作用，看起来更像下面这样：

jQuery( document ).ready( function( $ ) {
    var completed = 0;
    var fiftystates; // assume an array of state objects
    var updateState = function( index, state ) {
        var d = index % 5; // for subdomains sub0, sub1, sub2, sub3, sub4
        $.ajax({
            url: 'http://sub' + d + '.mydomain.com/update_state.php',
            data: { state: state.id },
            dataType: 'jsonp',
            crossDomain: true,
            success: function() { 
                completed++; 
                var complete_percent = completed / fiftystates.length * 100;
                $( '#progressbar' ).progressbar( 'value', completed_percent );
            },
            error: function() {
                updateState( index, state );
            }
        }); // end ajax
    }; // end updateState
    $( fiftystates ).each( updateState );
};

如您所见，这会循环通过 5 个不同的子域，这些子域实际上只是同一域的镜像，但由于 update_state.php 可能需要长达 30 秒才能完成，因此这需要 25 分钟的过程，减少到少于三分钟。问题是服务器的冲击导致一些 ajax 请求失败并出现 503 错误。在我的测试用例中，这个处理没有问题，但在我的第二个示例中，错误处理程序似乎从未被调用。

我无法弄清楚为什么测试用例按我预期的那样工作，而第二个却没有。有什么想法吗？

Answer 1

在您的测试用例中，您每次调用都会更改值 x für...

在其他代码中，您发送的是相同的索引值。这将返回相同的结果，而不是通过子域“旋转”......

    error: function() {
        index++;
        updateState( index, state );
    }

Answer 2

如果您偶然使用 IE 来测试第一种情况，并且可能使用 FF 或 Chrome 来测试第二种情况，那么这可能就是原因。 jQuery.ajax 函数记录的跨域 JSON/JSONP 类型不会调用错误和全局回调。但是，我注意到它们仍然在 IE 中被调用，我认为这与使用 IE XMLHttpRequest 进行调用的 jQuery 有关。

似乎有人慷慨地创建了一个插件来处理此处提供的 JSONP 请求错误：http://code.google.com/p/jquery-jsonp/

Answer 3

应该是这样的格式：

$.ajax({
    type: "POST",
    url: 'http://servername/WebService.svc/GetData?callback=?',
    dataType: 'jsonp',
    success: function (data) {
       //do stuff
    },
    error: function (msg, b, c) {
    //alert error
    }
 });

Answer 4

function AjaxRequest(url, params){

    return $.ajax({
        url:            url,
        data:           params,
        dataType:       'jsonp',

        /* Very important */
        contentType:    'application/json',
    });
}

var test = function(x) {

    AjaxFeed('http://servername/WebService.svc/GetData', {x: x})

    /* Everything worked okay. Hooray */
    .done(function(data){

        console.log(data);
    })

    /* Oops */
    .fail(function(jqXHR, sStatus, oError) {

        console.log(arguments);
    });
}

jQuery(window).load(function() {

    test('test');
}