在 iPad 上离线使用 jQuery ajax答案

【问题标题】：Using jQuery ajax offline on iPad在 iPad 上离线使用 jQuery ajax
【发布时间】：2016-03-04 16:07:48
【问题描述】：

我正在编写一个网站，它提出一系列问题，使用 jQuery Ajax 从 JSON 文件加载。用户运行一系列问题，直到得到一个需要加载新 JSON 文件的答案。在stackoverflow用户之前的一些帮助之后，ajax函数是：

function loadJSON(currentkey)
{

    keytoload = "json/" + currentkey + ".json";
    $.ajax({
        url: keytoload,
        dataType: "json",
        async: true,


        error: function (request,error) {
                                        alert('Error has occurred please try again!')
                                        },
        success: function (keyloaded)   {
                                        dataset = keyloaded;
                                        askQ();//calls a function to ask a new question
                                        }
    });        
}

我希望能够在 iPad 上运行它，而无需使用“离线页面”上网。如果我连接到互联网，它可以正常工作。如果我尝试离线阅读这些页面，它会失败。当我加载页面时，一切都很好，但是当第二次调用该函数时，它会失败。我得到的例外是“中止”。它似乎可以在各种浏览器中在线正常工作，也可以离线工作，作为 PC 上的本地副本。我曾尝试中止以前的 Ajax 调用，以防这些调用仍在继续，但这不起作用。

有什么想法吗？

【问题讨论】：

标签： javascript jquery json ajax ipad

【解决方案1】：

全面披露：我是 Offline Pages Pro 应用的开发者。

听起来 json 文件没有预先缓存，因此任何在离线时获取它们的尝试都会失败。

这可能是因为代码的组织方式。离线页面不太可能跨多个函数调用推断 currentKey 变量的所有可能值。要解决此问题，您需要主动并通过向您的网站添加特殊标记来确保预先缓存 json 文档。

以下是您在离线页面中的处理方式。

首先，您需要创建一个 XML 文档（例如 offline.xml）来声明您的 Ajax 请求。将文档存储在您网站的任何位置。选择以下任何选项来声明您的 Ajax 请求。确保将 yourdomain.com 替换为您的实际主机名。

选项 1 - 明确列出您的 json 文档，每个文档都有自己的 <addResource> 元素：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE rules PUBLIC "-//CODIUMLABS//DTD RULES 1.0//EN" "http://codiumlabs.com/dtd/rules-1.0.dtd">
<rules domain="yourdomain.com">
    <rule>
        <addResource uri="json/key1.json" type="text/json" ajax="true" />
        <addResource uri="json/key2.json" type="text/json" ajax="true" />
        <addResource uri="json/key3.json" type="text/json" ajax="true" />
    </rule>
</rules>

选项 2 - 使用序列号命名您的 json/key1.json、json/key2.json 等。这样您只需要一个 <addResource> 元素：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE rules PUBLIC "-//CODIUMLABS//DTD RULES 1.0//EN" "http://codiumlabs.com/dtd/rules-1.0.dtd">
<rules domain="yourdomain.com">
    <rule>
        <addResource uri="json/key{1-20}.json" type="text/json" ajax="true" />
    </rule>
</rules>

选项 3 - 使用存储在 <div> 元素的 data-key 属性中的键值。这可能是最好的选择。如果您还没有这样做，请将您的键放在数据属性中，例如：<div data-key="key1"></div>。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE rules PUBLIC "-//CODIUMLABS//DTD RULES 1.0//EN" "http://codiumlabs.com/dtd/rules-1.0.dtd">
<rules domain="yourdomain.com">
    <rule>
        <addResource uri="json/{div[data-key]}.json" type="text/json" ajax="true" />
    </rule>
</rules>

最后，在页面代码的<head> 元素内添加对offline.xml 的引用：

<link rel="offlinepages-rules" type="application/vnd.offlinepages.rules+xml" href="offline.xml" />

如果您正确实施上述更改，离线页面将检测<link> 元素，下载offline.xml，并使用您的 Ajax 声明预缓存所有 json 文件。

【讨论】：

感谢您的回复。我发现离线页面是一个非常有用的工具。然而，就我而言，我发现问题是在文件名中包含空格。当你意识到时真的很简单，但我花了很长时间才做到这一点！