Making CORS Ajax GET requests
Asynchronous loading of data from a server in a different domain with modern browsers.
Retrieving data asynchronously from a server in a different domain in vanilla JavaScript is straight forward and very similar to same-origin Ajax GET requests. The following helper works in modern browsers and Internet Explorers 9+:
function getCORS(url, success) {
var xhr = new XMLHttpRequest();
if (!('withCredentials' in xhr)) xhr = new XDomainRequest(); // fix IE8/9
xhr.open('GET', url);
xhr.onload = success;
xhr.send();
return xhr;
}
// example request
getCORS('http://foo.bar/?p1=1&p2=Hello+World', function(request){
var response = request.currentTarget.response || request.target.responseText;
console.log(response);
});
Instead of onreadystatechange
, the onload
callback is used in CORS for receiving the returned data. The callback gets passed as single argument, the request object. Depending on the browser, the actual response is found in currentTarget.response
or target.responseText
.
Sources
http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/ https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS