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.
1
-
You should be exposing a web-service of some sort rather than just putting the results on the file-system.Radu– Radu2011-08-12 18:29:22 +00:00Commented Aug 12, 2011 at 18:29
Add a comment
|
3 Answers
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).
- Convert your output to JSON
- Put this as part of your application package. For example, in Android, I put it as part of the .apk in /appFiles/json
- 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
- 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
2 Comments
John Smith
Hi, thanks so much for the response. This is exactly what I am trying to do, however I don't have much experience with the process. Could you explain step 3 in further detail please, I'm not quite sure how to go about "creating a custom content provider", and then using that in my javascript to read the JSON file. Thanks so much, sorry for my ignorance (lol).
momo
For creating a custom content provider with Android, you need to implement and override the function public ParcelFileDescriptor openFile (Uri uri, String mode) in your class, here you just parse your URL and load the file from your local storage. For loading it in Javascript, you just call it with AJAX library that you have chosen and use the custom URL scheme. Let me put some sample code for you in the answer
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.
answered Aug 12, 2011 at 18:21
Jason Miesionczek
14.5k17 gold badges80 silver badges111 bronze badges
1 Comment
Alex Gray
JSON's "superior beauty" lies truly only in the eye of the beholder... XML is nearly an identical data-structure... and for MANY people is vastly easier to read, debug, and write - by hand. if using query, it is almost ALWAYS possible to have jQuery the AJAX response as either XML or JSON. I say tomato.. you say tomato.
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
}
});
3 Comments
Radu
It sounds like he is not serving up the content using a web-server, so this will not work.
John Smith
Yea, everything is local on my machine. Will "your.xml" not work if the file is local then (i.e. in the same project folder as my index.html)?
Jason Gennaro
If your local machine is acting like a server, it will work. The problem is cross domain requests. You can't ask for files from other sites (like this anyway). If you plan on releasing the game on the Web, there should be no problem as the file is local to the site.