使用 javascript 读取本地 XML 文件答案

【问题标题】：Reading local XML file with javascript使用 javascript 读取本地 XML 文件
【发布时间】：2011-08-12 18:00:29
【问题描述】：

我是 HTML/Javascript 以及一般编码方面的新手，所以请耐心等待 :)。我正在尝试使用 javascript 在 html5 中创建 "Spot the Difference" 游戏。一切都是本地的（在我的机器上）。我有两张相同大小的图片，一张有差异。为了生成有关可点击字段的数据，我有一个 java 程序，它读取这两个图像并将所有像素不同的位置输出到 XML 文件中。然后我的计划是将此 XML 文件与我的 javascript 一起使用来定义用户可以单击的位置。但是，出于安全原因，javascript 似乎无法读取本地 XML 文件（如果我错了，请纠正我）。我不想使用 ActiveXObject，因为我计划通过电话间隙或 webkit 对象将它放到移动设备上。有没有人有更好的方法来解决这个问题，或者可能是通过 javascript 读取本地 XML 文件的方法？任何帮助将不胜感激，谢谢。

【问题讨论】：

您应该公开某种网络服务，而不是仅仅将结果放在文件系统上。

标签： javascript xml parsing

【解决方案1】：

如果您打算将其放入智能手机（iOS 和 Android）并读取本地文件，我用 JSON 做过类似的事情（是的，请不要使用 XML）。

将您的输出转换为 JSON
将此作为应用程序包的一部分。例如，在 Android 中，我将其作为 .apk 的一部分放在 /appFiles/json 中
创建将读取本地文件的自定义内容提供程序。我将我的创建为 content:// 但您可以创建任何您想要的方案。您可以利用 android.content.ContentProvider 来实现自定义 URL 方案。 iOS 也有自己的方式来创建自定义方案。该实现只需读取您的本地存储并提供内容
要从 Javascript 中读取它，我只需使用自定义方案调用 ajax 来获取 json 文件。例如 content://myfile/theFile.json 只需将我重定向到本地存储中的特定目录，并附加 /myfile/theFile.json

以下是在 ContentProvider 中覆盖 openFile() 的示例



    public ParcelFileDescriptor openFile (Uri uri, String mode) {
        try {
            Context c = getContext();
            File cacheDir = c.getCacheDir();
            String uriString = uri.toString();
            String htmlFile = uriString.replaceAll(CUSTOM_CONTENT_URI, "");

            // Translate the uri into pointer in the cache
            File htmlResource = new File(cacheDir.toString() + File.separator +  htmlFile);

            File parentDir = htmlResource.getParentFile();
            if(!parentDir.exists()) {
                parentDir.mkdirs();
            }

            // get the file from one of the resources within the local storage
            InputStream in = WebViewContentProvider.class.getResourceAsStream(htmlFile);

            // copy the local storage to a cache file
            copy(in, new FileOutputStream(htmlResource));
            return ParcelFileDescriptor.open(htmlResource, ParcelFileDescriptor.MODE_READ_WRITE);
        } catch(Exception e) {
            throw new RuntimeException(e);
        }
    }

希望对你有帮助

【讨论】：

您好，非常感谢您的回复。这正是我想要做的，但是我对这个过程没有太多经验。您能否更详细地解释第 3 步，我不太确定如何“创建自定义内容提供程序”，然后在我的 javascript 中使用它来读取 JSON 文件。非常感谢，对不起我的无知（笑）。
要使用 Android 创建自定义内容提供程序，您需要在您的类中实现并覆盖函数 public ParcelFileDescriptor openFile (Uri uri, String mode)，这里您只需解析您的 URL 并从中加载文件您的本地存储。要在 Javascript 中加载它，您只需使用您选择的 AJAX 库调用它并使用自定义 URL 方案。让我在答案中为您提供一些示例代码

【解决方案2】：

我建议修改您的 java 程序以输出 JSON 格式的文件而不是 XML。 JSON 是 JavaScript 原生的，加载起来会更简单。

至于实际加载数据，我不确定最好的选择是什么，因为你说你想最终在移动设备上运行它。如果您只是制作一个普通网站，您可以根据您的操作系统使用 Apache 或 IIS 设置 Web 服务器，并将文件放在文档根目录中。完成后，您可以通过 Ajax 加载 JSON 文件，这很容易在 Google 上搜索到。

不确定这是否有帮助。

【讨论】：

JSON 的“超凡之美”确实只存在于旁观者的眼中...... XML 几乎是一个相同的数据结构......而且对于许多人来说更容易阅读、调试和编写- 用手。如果使用查询，几乎总是可以让 jQuery 将 AJAX 响应作为 XML 或 JSON。我说番茄……你说番茄。

【解决方案3】：

由于这是一个本地文件，您可以使用 jQuery 来完成此操作

$.ajax({
    type: "GET",
    url: "your.xml",
    dataType: "xml",
    success: function(xml){

    ///do your thing

    }
});

http://api.jquery.com/jQuery.ajax/

【讨论】：

听起来他没有使用网络服务器提供内容，所以这不起作用。
是的，一切都在我的机器上。如果文件是本地文件（即与我的 index.html 在同一个项目文件夹中），“your.xml”会不起作用吗？
如果你的本地机器像服务器一样工作，它会工作。问题是跨域请求。您不能从其他网站索取文件（无论如何都是这样）。如果您打算在网络上发布游戏，应该没有问题，因为该文件是网站本地的。