使用 javascript 读取本地 XML 文件

Question

I am new to HTML/Javascript, as well as coding in general so bear with me:). I am trying to create a "Spot the Difference" game in html5 using javascript. Everything is local (on my machine). I have two pictures, of the same size, one with differences. To generate data about the clickable fields, I have a java program that reads both of the images and outputs all of the positions in which pixels are different into a XML file. My plan was to then use this XML file with my javascript to define where the user could click. However, it appears (correct me if I'm wrong) that javascript cannot read local XML files for security reasons. I do not want to use an ActiveXObject because I plan on putting this onto mobile devices via phone gap or a webkit object. Does anyone have a better approach to this problem, or perhaps a way to read local XML files via javascript? Any help would be greatly appreciated, thanks.

Answer 1

I would suggest modifying your java program to output a JSON formatted file instead of XML.JSON is native to JavaScript and will be much simpler for you to load.

As for actually loading the data, i'm not sure what the best option is as you say you want to evenutally run this on a mobile device. If you were just making a normal website you could setup a web server using either Apache or IIS depending on your OS and put the files in the document root. Once you've done that you can load the JSON file via Ajax, which can easily be googled for.

Not sure if this helps any.

Answer 2

Since this is a local file, you can do this with jQuery

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

    ///do your thing

    }
});

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

Answer 3

If you are planning to put this into a smart phones (iOS and Android) and read local files, I have done similar things with JSON (yes, please don't use XML).

1. Convert your output to JSON
2. Put this as part of your application package. For example, in Android, I put it as part of the.apk in /appFiles/json
3. Create a custom content provider that would read the local file. I create mine as content:// but you create whatever scheme you want. You could leverage android.content.ContentProvider in order to achieve custom URL Scheme. iOS has its own way to create custom scheme as well. The implementation simply read your local storage and give the content
4. To read it from Javascript, I simply call ajax with the custom scheme to get the json file. For example content://myfile/theFile.json simply redirect me to particular directory in local storage with /myfile/theFile.json appended to it

Below is the sample to override openFile() in the ContentProvider

    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);
        }
    }

I hope it helps