jQuery Ajax 和使用 appcache 时的 Android 浏览器问题答案

【问题标题】：Android Browser Issue with jQuery Ajax and when appcache is usedjQuery Ajax 和使用 appcache 时的 Android 浏览器问题
【发布时间】：2013-01-09 01:29:53
【问题描述】：

我们遇到了 Android 4.0、4.1 和 4.2 上的内置浏览器的问题（我们没有任何更低的版本可供测试）。问题是 ajax 调用将在第一次加载时完美运行，您可以根据需要多次按下运行 Ajax 按钮，它会很好。您可以断开与互联网的连接，它会正常工作。但是，如果您退出（完全，确保它不只是在后台运行）浏览器然后重新启动它，它将在加载和按下按钮时失败。不管你是在线还是离线。从 ajax 调用返回的错误是“错误”，状态 = 0 和 readyState = 0。
成功后，您会收到一条消息，显示“从 Ajax 调用响应”，状态 = 200，readyState = 4。

该代码适用于我们在 Android Chrome、Firefox 和 Opera 上测试过的所有其他浏览器。在 IOS 5 和 6 上它可以工作，我们可以找到每个桌面浏览器。是否有我遗漏的东西或者我们在内置浏览器中发现了一个错误。对此的任何帮助将不胜感激，尤其是如果我只是做了一些愚蠢的事情。

我们已经创建了一个测试脚本来很好地演示这个问题，我已将它附加到此消息的底部。

谢谢

提姆

test.php

<?php     
function displayPage() { 
?>
<!DOCTYPE html>
<html manifest="test.manifest" debug="true">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <title>test</title>
        <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
        <script type="text/javascript">
            function runAjaxGet() {
                var XMLHttpRequest = $.ajax({
                    url: "test.php",
                    dataType: "json",
                    data: "test=test",
                    traditional: "true",
                    success: function( responseData ) {
                        alert('good\n responseData: '+responseData+ '\n res:' + XMLHttpRequest.responseText +'\n readyState: '+ XMLHttpRequest.readyState + '\n Status: '+XMLHttpRequest.status );
                        console.log(XMLHttpRequest);
                   },
                   error: function (xhr, ajaxOptions, thrownError, responseData) {  
                       alert('bad\n responseData: '+responseData+ '\n res:' + XMLHttpRequest.responseText +'\n readyState: '+ XMLHttpRequest.readyState + '\n Status: '+XMLHttpRequest.status);
                       console.log(XMLHttpRequest);
                   }
                });
            }
            $(document).ready(function() { 
                runAjaxGet();
            });

        </script>
    </head>
    <body>
        <button Name="Run Ajax" onclick="runAjaxGet();">Run Ajax</button>
    </body>
</html>
<?php
}

function processRequests() {
    header("Content-Type: application/json; charset=UTF-8" );
    echo (json_encode("respose from Ajax Call"));
}

date_default_timezone_set ( "UTC" );

if (isset($_REQUEST['test'])) {
    $which = $_REQUEST['test'];
} else {
    $which = '';
}

switch ($which) {
    case "test":
        processRequests();
        break;

    default :
        displayPage();
        break;
}
?>

test.manifest

 CACHE MANIFEST
 test.php
 jquery-1.9.0.min.js
 test.php?test=test

【问题讨论】：

标签： android jquery browser html5-appcache

【解决方案1】：

只需添加带星号的 NETWORK 部分即可使用

 CACHE MANIFEST
 test.php
 jquery-1.9.0.min.js
 test.php?test=test
 NETWORK:
 *

【讨论】：

【解决方案2】：

我遇到了同样的问题，并确定从缓存中检索时，0 表示成功。这可能是因为请求完全在本地解析，因此没有涉及实际的 http 请求。

Appcache 清单文件：

CACHE MANIFEST

CACHE:
/config

Javascript：

var request = new XMLHttpRequest();
request.open('GET', '/config', false); // async=false is ok because this file will always come from AppCache
request.send(null);

// Older versions of android return 0 when ajax request retrieved from appcache
if (request.status == 200 || request.status == 0) {
  return JSON.parse(request.responseText);
} else {
  console.log("ERROR: config not retrievable");
  throw "Attempt to retrieve config return http status " + request.status;
}

【讨论】：