Cross-Domain Data Loading

It's quite uncommon for an app to require data from a domain which is different from the one it's hosted on. Let's suppose that you app is hosted at http://app.mydomain.com, data is located at http://data.mydomain.com and the data-loading script is called "data.php".

Standard loading will fail in this case, as all browsers block all cross-domain operations for the sake of safety, even if you try using a different port.

Nevertheless, there are techniques to overcome these problems. With Webix lib, you can use two of them:

  • Cross-Origin Resource Sharing to perform types of requests;
  • JSONP Loading for GETting data only.

In both cases you cannot load data with the load method, normally used by data components for external data. On the contrary, you issue data requests and parse the returned data in a callback.

Cross-Origin Resource Sharing or CORS

CORS requires additional server configuration, namely you need to configure data server so that it allows any program from the app's domain (and hence, the app itself) to get data from it.

When you issue such an Ajax request with the Webix Ajax function:

webix.ajax("http://data.mydomain.com/data.php", function(text, data){
    table.parse(data.json());
});

the browser sends the following header with the HTTP request:

Origin: http://app.mydomain.com

You need to make the data server (http://data.mydomain.com:) respond with a specific "allowing" header as well. The app's server is allowed to get data from the data server:

Access-Control-Allow-Origin: http://app.mydomain.com

This can be done in three ways:

  • You can configure the settings of the server;
  • You can adjust the code of your app to output the header as a part of a server response;
  • You can use some third-party API with the server already set for the CORS protocol.

More detailed information about CORS in the Wiki article.

Advantages

CORS technique is standard based, safe and can be used with any kind of data (structured or not) while supporting all types of requests – GET, POST, PUT, DELETE, etc.

Drawbacks

CORS protocol can't be used in IE8 and IE9.

JSON with Padding or JSONP

In the context of Webix, the JSONP technique requires changes in the client-side code, namely you should get data with a special webix.jsonp() method, that hides all technical details of JSONP handling, but at the same time you need to add a few lines of code:

//client-side pattern
webix.jsonp("http://data.mydomain.com/data.php", {}, function(data){
    table.parse(data);
});

Note that in comparison to Ajax, JSONP always provides structured data, not raw response text. That's why the server script must return encoded data:

//server-side pattern
$data = get_data_in_some_way();
$json_data = json_encode($data);
 
$jsonpname = $_GET["jsonp"];
 
header('content-type: application/json; charset=utf-8');
echo $jsonpname."(".$json_data.")";

As you can see, the response data is wrapped, encoded as JSON and is sent back combined with the "jsonp" parameter.

Wikipedia article about JSONP.

Advantages:

JSONP works in all browsers and doesn’t require server reconfiguration.

Drawbacks:

JSONP requires extra coding, but is limited to work only with structured data, as well as suitable only for GET requests. At the same time, it is prone to XSS attacks. It's recommended to resort to JSONP only if you need to support IE8 and IE9 browsers.

Back to top