After researching various CORS and JSON request discussions, I find myself puzzled as to why the first script functions correctly while the second one does not. I am eager to enhance my understanding of CORS, Javascript, XMLHTTPRequest2, and AJAX.
The following code works:
function wfs() {
var url = 'http://routes.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/api/0.3/51.22545,4.40730,%5B51.22,4.41,51.2,4.41%5D,51.23,4.42/car.js?lang=de&units=miles&callback=getRoute';
var script = document.createElement('script');
script.type="text/javascript";
script.src=url;
document.getElementsByTagName('head')[0].appendChild(script);
}
function getRoute(response) {
console.log(response);
}
The following code does not work:
function wfs() {
var url = 'http://routes.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/api/0.3/51.22545,4.40730,%5B51.22,4.41,51.2,4.41%5D,51.23,4.42/car.js?lang=de&units=miles';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function(e) {
if (this.status == 200) {
var json = this.response;
console.log(json);
}
};
xhr.send();
}
Firebug displays a Red 200 Null Response for the second code snippet.
Interestingly, the second script successfully executes when a different URL is used:
var url = 'http://ip.jsontest.com/?mime=2';