虽然执行了Ajax请求，但调用了失败回调，服务器返回200个数据

Question

我有一个带有缓存清单的HTML5测试网页test.html。该网页对同一服务器、缓存清单中NETWORK:部分下列出的网页do_get_data.php执行Ajax请求。

该请求由Firefox 10和iPhone iOS 5 Safari执行（记录在提供服务的PHP脚本do_get_data.php中）。Firefox 10在10秒后调用success回调函数，也就是说，当服务器返回数据时。但是，我的iPhone iOS 5 Safari在启动请求后立即调用fail回调函数，而不调用success回调函数。

对于iPhone iOS 5 Safari，textStatus是error，JSON.stringify(jqXHR)是{"readyState":0,"responseText":"","status":0,"statusText":"error"}。

使用test.html中的以下代码执行请求：

<script type="text/javascript">
    function test_ok(data) {
        alert('Test OK, data: ' + JSON.stringify(data));
    }
    function testFail(jqXHR, textStatus) {
        alert(textStatus + ' | ' + JSON.stringify(jqXHR));
    }
    function get_data(testurl) {
        var senddata, request;
        alert('Request for ' + testurl + ' started.');
        window.testid = new Date().getTime();
        senddata = {
            background: true,
            requestId: window.testid
        };
        request = $.ajax({
            url: testurl,
            cache: false,
            type: "GET",
            data: senddata,
            success: test_ok
        });
        request.fail(testFail);
    }
</script>

<input type="button" onclick="get_data('do_get_data.php')" value="test sending" />

作为参考，do_get_data.php看起来像这样：

<?php
    $id = md5(rand() . rand());
    trigger_error(implode("t", array('start', $id, $_SERVER['REQUEST_URI'], $_SERVER['REMOTE_ADDR'], $_SERVER['USER_AGENT']));
    sleep(10);
    header('Content-Type: application/json');
    $json = json_encode(array('msg'=>'Test was OK'));
    trigger_error(implode("t", array('echo', $id, $json));
    echo $json;
?>

Answer 1

我已经了解到，状态代码0的原因是（1）从file://加载，（2）无法访问的网络资源和（3）跨域策略。由于您加载了PHP，我们可以安全地使用第1个规则，并且由于您的服务器记录了Safari，因此也使用了第2个规则，剩下3个。上面所有的代码都在同一个域上吗？如果没有，请使用PHP中的Access-Control-Allow-Origin HTTP标头来允许跨域请求。

header('Access-Control-Allow-Origin: http://example.org')

此外，您应该确保点击按钮输入只执行onclick，而不执行任何其他默认行为（无论在iOS上是什么）。从onclick处理程序返回false将阻止它：

<input type="button" onclick="get_data('do_get_data.php'); return false" ... />

更新：

作为最后的手段，您总是可以简单地禁用缓存清单，以将其可能有缺陷的实现移到一边。

Answer 2

我已经为此挣扎了一段时间，答案在错误报告答案中：

使用

网络：*

在缓存清单中，以避免缓存ajax请求。

Answer 3

如果您将$.ajax调用更改为会怎样

$.ajax({
    url: testurl,
    cache: false,
    type: "GET",
    data: senddata
}).then(
    function(result) { test_ok(result); },
    function(result) { testFail(result); }
);

Answer 4

不确定您是如何在iOS下运行网站的，但在使用清单文件时，jQuery和AJAX请求出现了问题：http://bugs.jquery.com/ticket/8412

尽管您已经在清单的NETWORK部分列出了资源，但我建议您尝试其他列出的解决方法：

jQuery.ajaxSetup({
  isLocal: true
});