Javascript CORS JSON/JSONP Request

Javascript CORS JSON/JSONP Request

本文关键字：JSONP Request JSON CORS Javascript      更新时间：2023-09-26

我已经浏览了大多数CORS和JSON请求主题，并且无法理解为什么第一个脚本有效，而不是第二个脚本。我很想接受CORS和Javascript以及XMLHTTPRequest2和AJAX的教育。

这有效：

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

这不起作用：

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 显示红色 200 空响应。

但是，当我使用不同的 url 时，第二个脚本确实有效：

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

第一个域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 不实现 CORS（即不发送可用的Access-Control-Allow-Origin标头）。 http://ip.jsontest.com/?mime=2确实如此。 对此你无能为力 - 这取决于服务器。

第一个代码块使用 JSONP。 这实际上的作用是将脚本标签注入到文档中。 脚本标记可以具有外部源（如果它们不是同一方案，则出于安全原因可能会阻止它们）。 这允许服务器基本上向您发送插入到立即运行的<script>中的 javascript 代码。

相关文章：