How to access JSON data in HTML5 apps?

Most apps use some kind of data source to display content in the app. Facebook, Twitter, Instagram, Maps apps all access data from a server. They also provide REST APIs for app developers to create application using their data. In most cases the data is available in JSON format, which is accessed asynchronously, parsed in the app and then displayed in the app’s user interface.

Below is an example of JSON output from time.jsontest.com, which outputs time information:

{
   "time": "09:12:58 PM",
   "milliseconds_since_epoch": 1384636378639,
   "date": "11-16-2013"
}

Accessing JSON data from a website is straight forward as long as the data is served from the same domain. However accessing data from a different domain is prohibited by most web browsers because of the Same-Origin Policy, which is a security policy that only allows accessing DOM originating from same domain and prevents accessing different domains.

There are ways you can work around the Same-Origin Policy and access JSON data from different domain from a web application if the server supports one of the following methods:

  • JSON response header has Access-Control-Allow-Origin set to allow access to the domain: this is not very common since it poses a security risk. More information here.
  • JSON supports padding (JSONP): This is more commonly used by APIs to allow developers to access their data.

JSON data can be accessed from a HTML5 application by making XMLHttpRequest request, or most commonly done using jQuery methods $.ajax() or $.getJSON().

Below is an example of how you can access JSON data using $.getJSON() method:

$.getJSON("http://time.jsontest.com", function(data){
    alert(data);
});

If the JSON is padded then you can access it from different domain by specifying callback parameter in the URL:

$.getJSON("http://time.jsontest.com?callback=?", function(data){
    alert(data);
});

Below is a sample app the demonstrates accessing 3 types of JSON data. First one is JSON with padding, second is JSON with Access-Control-Allow-Origin:* in response header and third is JSON without padding or Access-Control-Allow-Origin in response header. The sample code will try to get the JSON data and display it in an alert box.

The sample uses a JSON test website time.jsontest.com, which responds with current time data in JSON format and also allows you to configure the URL parameters so that the JSON response will have padding or Access-Control-Allow-Origin header setting.

The sample can be tried on web browser, you will notice that only the first 2 JSON types can be accessed, the third one fails because of Browser Same-Origin Policy.

Link to Sample Code

If the JSON data server does not support JSONP or does not have Access-Control-Allow-Origin header then typically the workaround is to setup a proxy server which will access JSON from the original source, if this proxy server is on the same domain as the webapp, the JSON data can then be accessed without any issues.

Accessing JSON data in HTML5 hybrid apps using Intel XDK:

Intel XDK is a HTML5 cross platform app development tool which allows you to write apps using web technologies(HTML5 + CSS + Javascipt) and build apps that can be installed on iOS, Android, Windows Phone and many other platforms. More details can be found here.

Intel XDK built apps provides a way to access JSON data when the JSON does not support padding or if the JSON response header does not have Access-Control-Allow-Origin. Intel XDK provides a javascript library, that makes ajax calls with HTTP connections using native code which are not subject to cross-origin restrictions. All the app has to do is include these two scripts in the HTML file:

<script src="intelxdk.js"></script>
<script src="xhr.js"></script>

intelxdk.js and xhr.js actual files are not required, it will be included automatically in Intel XDK tools, just the script tags should be included.

If you open the sample code (with intelxdk.js and xhr.js scripts included) in Intel XDK and test it on emulator or test on real device using Intel App preview app, you will notice that all 3 types of JSON can be accessed. You can also build a hybrid app for iOS, Android, Window Phone and other platform using Intel XDK build service and test the sample app on device.

Here is documentation showing how to use Intel XDK development tool and build a hybrid app for iOS, Android, Window Phone and other platforms.

 

Per informazioni complete sulle ottimizzazioni del compilatore, consultare l'Avviso sull'ottimizzazione