jQuery - 使用本机 XHR 和 flXHR (Flash) 回退的 AJAX 请求 - 如何最大程度地减少代码重复？

Question

我需要通过跨域 XMLHttpRequest 检索数据。为了使其在（几乎）所有浏览器中都能工作，我首先使用本机 XHR，如果失败，则使用 flXHR。

我目前拥有的（工作）代码如下：

jQuery.support.cors = true; // must set this for IE to work

$.ajax({
    url: 'http://site.com/dataToGet', 
    transport : 'xhr',
    success: function(data) {
        console.log('Got data via XHR');
        doStuff(data);
    },
    error: function(xhr, textStatus, error) {
        console.log('Error in xhr:', error.message);
        console.log('Trying flXHR...');
        $.ajax({
            url: 'http://site.com/dataToGet',
            transport : 'flXHRproxy',
            success: function (data) {
                console.log('Got data via flXHR');
                doStuff(data);
            },
            error: function (xhr, textStatus, error) {
                console.log('Error in flXHR:', error.message);
                console.log('Both methods failed, data not retrieved.');
            }
        });
    }
});

对我来说，这感觉有很多代码重复，尤其是在成功处理程序中。有没有更有效的方法来做到这一点？我真的更喜欢进行一个 $.ajax 调用，依次尝试两种传输，而不是必须使用错误处理程序再次进行调用。在这个例子中，情况还不错，但是如果成功处理程序较长或者成功处理程序必须自己发出另一个 $.ajax 调用，情况很快就会变得更加复杂。

Answer 1

我创建了一个特定于 jquery 的 flxhr 精简分支，可以简化上面的代码示例。您可以在自述文件的“用法”部分中查看用法示例。

https://github.com/b9chris/flxhr-jquery-packed

特别是，您不想浪费时间等待标准 CORS 请求失败。通过预先测试 $.support.cors 可以轻松确定 flxhr 是否必要（无需覆盖它）。然后只需在必要时显式使用 flxhr 即可。

Answer 2

为什么不将其单独包装在一个函数中呢？毕竟，这就是您最终重用代码的方式。您甚至可以将函数作为参数传递，以确保不必多次重复此代码。

对我来说，这很简单，但也许我误解了。

function xhr(success) {
    $.ajax({ 
        success: success, 
        error: function() { 
            $.ajax({ success: success }) 
        } 
    });
}

然后只需传递成功处理程序一次

xhr(function(data){/*magic*/});

或者如果您想基本上避免 ajax 调用的冗余配置，请使用第一个对象作为模板，如下所示：

function xhr(success) {
    var ajaxParams = { success: success };
    ajaxParams.error = function() { 
        $.ajax($.extend(ajaxParams, { transport: 'xhr' })); 
    }
    $.ajax(ajaxParams);
}

我稍微简化了整个事情，但我希望您明白这一点。

编辑

阅读最后一点，也许这会给你一些想法......这是最后一个片段的变体。

function xhr(success) {
    var ajaxParams = { success: success };
    ajaxParams.error = function() { 
        var newParams = $.extend(ajaxParams, { transport: 'xhr' });
        newParams.success = function() {
            // do something
            // arguments is a special array, even if no parameters were
            // defined in any arguments where passed they will be found
            // in the order they were passed in the arguments array
            // this makes it possible to forward the call to another 
            // function
            success.apply(this, arguments); 
        }
        $.ajax(newParams); 
    }
    $.ajax(ajaxParams);
}