Since Amazon S3 supports CORS, you can make AJAX calls to a bucket from any domain. This example loads an alert message and conditionally updates the DOM, but the configuration is the same for any GET request (I haven’t played with POST yet).
- Create an S3 bucket and add a CORS policy.
<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
- Create
alert.json
(validate with JSONLint to be safe){ "enabled":true, "header":"Alert:", "body":"This is an alert message." }
- Upload
alert.json
to your bucket, set theContent-Type
header toapplication/json
, and grant Open/Download permissions to Everyone (or use a bucket policy) - Call jQuery 1.5+ and jQuery-ajaxTransport-XDomainRequest (for IE 8 & 9 support)
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script> <!--[if lte IE 9]> <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.0/jquery.xdomainrequest.min.js'></script> <![endif]--> <h3 id='globalalertheader'></h3> <p id='globalalertbody'></p>
- Now you can call jQuery.ajax()
$(function () { $.ajax({ // XDomainRequest protocol (IE 8 & 9) must be the same scheme as the calling page url: ('https:' == document.location.protocol ? 'https://' : 'http://') + 'example-bucket.s3.amazonaws.com/alert.json', dataType: 'json' }).done(function (data) { if (data.enabled === true) { $('#alertheader').html(data.header); $('#alertbody').html(data.body); } }); });
Update: If you prefer JSONP instead of CORS:
- Create
alert-jsonp.json
with a static wrapper function around the data (name doesn’t have to becontent
).content({ "enabled":true, "header":"Alert:", "body":"This is an alert message." });
- Upload
alert-jsonp.json
to your bucket, set theContent-Type
header toapplication/json
, and grant Open/Download permissions to Everyone (or use a bucket policy) - Call jQuery 1.5+ (no polyfill needed for IE)
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script> <h3 id='globalalertheader'></h3> <p id='globalalertbody'></p>
- Call jQuery.ajax() with
jsonpCallback
matching the wrapper function you declared inalert-jsonp.json
.$.ajax({ url: 'https://example-bucket.s3.amazonaws.com/alert-jsonp.json', dataType: 'jsonp', jsonp: false, jsonpCallback: 'content' }).done(function (data) { if (data.enabled === true) { $('#globalalertheader').html(data.header); $('#globalalertbody').html(data.body); } });