getJSON不工作在IE为Youtube

Question

在这个函数中，我正在使用JSON从Youtube检索数据。此功能在Chrome和Mozilla中有效。但是在IE中不能运行

  function test(url){
      var youtube_id = url.replace(/^[^v]+v.(.{11}).*/,"$1");
     $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+youtube_id+'?v=2&alt=json', function(data) {
      var title = data.entry.title.$t;
      var description = data.entry.media$group.media$description.$t;
      var thumbnail = data.entry.media$group.media$thumbnail[0].url;
       var imgdata = "<img src ='"+thumbnail+"' />";
    alert(title);
      });
      // alert(youtube_id);// Use these variables somewhere
  }

你能帮我吗?

提前感谢!!

Answer 1

这是因为IE(直到IE 10)不支持跨域资源共享。

当您使用Firefox, Safari, Chrome, Opera等浏览器发出请求时，浏览器首先向服务器发出OPTIONS请求，并在标头中查找Access-Control-Allow-Origin，向浏览器解释允许哪些外部站点对该域名发出请求。

来自gdata API的头文件是:

HTTP/1.1 200 OK
X-GData-User-Country: US
Content-Type: application/json; charset=UTF-8
Access-Control-Allow-Origin: *
Expires: Tue, 15 Jan 2013 15:02:28 GMT
Date: Tue, 15 Jan 2013 15:02:28 GMT
Cache-Control: private, max-age=300, no-transform
Vary: *
GData-Version: 2.1
ETag: W/"C0EGQn47eCp7I2A9WhNbEks."
Last-Modified: Tue, 15 Jan 2013 14:53:43 GMT
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Server: GSE

Access-Control-Allow-Origin: *标头表示任何外部页面(即不是来自相同协议，主机和端口的页面作为正在访问的API)都允许调用该页。

但是，IE不能正确地支持该标准。 但是，您可以使用JSONP标准来绕过这个问题，gdata API确实支持JSONP标准。

改变你的$.getJSON调用，在URL的末尾包含一个?。这就是你如何向jQuery解释你想使用JSONP来进行调用，这允许外部站点。

例如:

var youtube_id = url.replace(/^[^v]+v.(.{11}).*/,"$1");
     $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+youtube_id+'?v=2&alt=json?', function(data) {
        var title = data.entry.title.$t;
        var description = data.entry.media$group.media$description.$t;
        var thumbnail = data.entry.media$group.media$thumbnail[0].url;
        var imgdata = "<img src ='"+thumbnail+"' />";
        alert(title);
      });