Request.js lets you make cross-domain requests to different domain or sub-domain for JSON data sources. For a simple demonstration, visit the demo page or download a tagged release and open demo
directory.
It uses the window.name technique for secure cross-domain browser based data transfer. It works by loading a external HTML file on the remote domain in an iframe. The HTML file makes a local XMLHttpRequest
request, sets its window.name
to the string content of the response. The value of window.name
is available as a response.
This project was originally put together here so I could host JSON on a DropBox account and access it from anywhere without a proxy. It is not limited at all to just JSON.
This project does not rely on jQuery or any other framework except for an implementation of JSON.parse
. It does however require a little thought to the initial setup.
To use Request.js, it's easiest to download a packaged release.
The parent directory contains these two files; request.js
and bell.html
Moved these to the site in which you intend to make the cross-domain requests from.
There are two files of interest within the remote-site
directory; json2-min.js
and xmlhttprequest.html
Move these to the remote site in which contains JSON files you intend to access.
Here is a simple example of how to make a request. In this case it is assumed that request.js
and bell.html
are in the same directory as the example.
Include the following in the <head>
of your document:
<script src='/path/to/request.js'></script>
And the example:
<script>
var url = "http://dl.dropboxusercontent.com/u/362483/Project/HN/news.js"; // Regenerated from Hacker News (http://news.ycombinator.com/) every 30 minutes
var options = {
callback: function(response){
if (response.status!=200) {
return;
}
console.log(response.responseText);
},
bell: "bell.html",
tunnel: "http://dl.dropboxusercontent.com/u/123029/request/xmlhttprequest.html"
};
new Request(url, options);
</script>
The value for bell
must be the full relative path to website. So if the full path to the file is:
http://www.example.com/path/to/bell.html
Then you should have:
bell: "/path/to/bell.html",
tunnel: "http://dl.dropboxusercontent.com/u/123029/request/xmlhttprequest.html"
Instead of passing bell
and tunnel
each time you make a request, you can modify request.js
to provide default values:
var pathBell = "bell.html";
var uriTunnel = "http://dl.dropboxusercontent.com/u/123029/request/xmlhttprequest.html";
Passing values for bell
and tunnel
in a request will over-ride defaults.
The heavy lifting was done by Pau Santamases a good many years ago when we both worked on a now defunct project called TimesPeople. Also, to Douglas Crockford for json-js
script.