Last active
August 29, 2015 14:28
-
-
Save dsample/4aad6d15d1fcf492da34 to your computer and use it in GitHub Desktop.
A few examples of loading data from an external server using JavaScript. The sinatra script is intended to be run as two websites. http://example.com and http://example.net. The client on http://example.com is trying to load a resource from http://example.net. Not all of these approaches work successfully.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/bin/env ruby | |
| require 'sinatra' | |
| require 'json' | |
| # set :bind, 'example.com' | |
| set :port, '80' | |
| get '/data.jsonp' do | |
| headers 'Access-Control-Allow-Origin' => 'http://example.com' | |
| content_type 'text/javascript' | |
| data = { | |
| text: 'Data from JS' | |
| } | |
| "jsData = #{data.to_json}" | |
| end | |
| get '/ajax.js' do | |
| headers 'Access-Control-Allow-Origin' => 'http://example.com' | |
| content_type :json | |
| { | |
| text: 'Data from AJAX' | |
| }.to_json | |
| end | |
| get '/event.js' do | |
| headers 'Access-Control-Allow-Origin' => 'http://example.com' | |
| content_type 'text/javascript' | |
| data = { | |
| text: 'Data from a JavaScript event' | |
| } | |
| "function dataViaEvent(){ var event = new CustomEvent('dataLoaded', { detail: #{data.to_json} }); document.dispatchEvent(event); };" + | |
| "function dataViaEventFromAJAX(){ $.get('http://example.net/ajax.js', function(data) { var event = new CustomEvent('dataLoaded', { detail: data }); document.dispatchEvent(event); });};" | |
| end | |
| get '/' do | |
| erb :index | |
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <script type="text/javascript" src="http://example.net/data.jsonp"></script> | |
| <script type="text/javascript" src="http://example.net/event.js"></script> | |
| <script type="text/javascript"> | |
| function showData(data) { | |
| var element = document.getElementById('data'); | |
| if (data) { | |
| element.innerHTML = data.text; | |
| } else { | |
| element.innerHTML = '<em>No data</em>'; | |
| } | |
| } | |
| function dataFromScriptTag() { | |
| showData(window.jsData); | |
| } | |
| function dataFromDynamicScriptTag(){ | |
| document.write(unescape("%3Cscript src='http://example.net/data.jsonp' type='text/javascript'%3E%3C/script%3E")); | |
| } | |
| function dataFromAJAX() { | |
| $.get('http://example.net/ajax.js', function(data) { | |
| showData(data); | |
| }) | |
| } | |
| function dataFromEvent() { | |
| // Call the event contained within the external JavaScript file | |
| dataViaEvent(); | |
| } | |
| function dataFromAJAXEvent() { | |
| dataViaEventFromAJAX(); | |
| } | |
| document.addEventListener('dataLoaded', function(e) { | |
| showData(e.detail) | |
| }, false); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Test</h1> | |
| <p> | |
| <button onclick="dataFromScriptTag()">Load from JSONP</button> | |
| <button onclick="dataFromEvent()">Load from Event</button> | |
| <button onclick="dataFromAJAX()">Load from AJAX</button> | |
| <button onclick="dataFromAJAXEvent()">Load from AJAX using Event</button> | |
| </p> | |
| <div id="data" style="border: 1px solid #000"> </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment