JavaScript CORS JSON / JSONP请求

Question

I have browsed most CORS and JSON request topics, and cannot understand why this first script works, but not the second. I would love to be educated in the ways of CORS and Javascript and XMLHTTPRequest2 and AJAX.

This 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);
}

This 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 shows a Red 200 Null Response.

However, the second script does work when I use a different url:

var url = 'http://ip.jsontest.com/?mime=2';

Answer 1

The first domain, 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 , does not implement CORS (ie does not send a usable Access-Control-Allow-Origin header). http://ip.jsontest.com/?mime=2 does. There is nothing you can do about this -- it depends on the server.

The first block of code uses JSONP. What this actually does is inject a script tag into the document. Script tags can have external sources (if they are not of the same scheme, they may be blocked for security reasons). This allows the server to essentially send you javascript code that you insert into a <script> that gets run immediately.