无法使用 javascript 访问 json 文件

Question

我想用javascript读取这个页面的json内容：http://89.92.40.250:8010/dreamteam/interface/get_event_detail.php?id=397。

所以我开始了这个脚本：

var req = new XMLHttpRequest();
    req.open("GET", "http://89.92.40.250:8010/dreamteam/interface/get_event_detail.php?id=397", true); 
    req.onreadystatechange = monCode;   
    req.send(null);      

    function monCode() { 
        if (req.readyState == 4) { 
            var doc = eval('(' + req.responseText + ')');
            alert(req.responseText);
        }
    } 

当我想显示我使用的内容时 alert(req.responseText);我没有看到内容。另外我有一个 Firebug 语法错误：语法错误：var doc = eval('(' + req.responseText + ')');

用 JSONP 不可能。

我们可以提取页面的内容，然后将其转换为JSON格式然后解析它吗？？

Answer 1

由于跨域限制，这是不可能的；您的页面应托管在同一主机上。

您可以投资以下替代方案：

• 使用 JSONP（可能不适用于您的情况）
• 在将拉取文件内容的同一主机上使用服务器端脚本（如代理）
• 查看配置跨域访问控制的方法：https://developer.mozilla.org/En/HTTP_access_control（您也不太可能选择）

Answer 2

由于您从 127.0.0.1 向 89.92.40.250:8010 发出请求，这将是一个跨域请求，即使您访问同一台机器上的不同端口（如 127.0.0.1），它也是一个跨域请求:8080。

如果您可以控制 89.92.40.250:8010 呈现的内容，您可以使用 jsonp 来绕过跨域限制，但它需要在后端进行一些更改，或者您可以使用 http://jsonp.jit.su/ 提供的功能基本上代表您联系服务器，创建一个您可以处理的jsonp 响应。

Answer 3

正如我在上面的评论中所说，您不能执行跨域 AJAX 请求。浏览器通常禁止这样做。

如果你真的想做一个跨域请求，有几个选项，一个是代理（配置你的本地网络服务器以将请求发送到远程服务器），另一个是JSONP）。

JSONP 基本上包括在您的 HTML 文档中添加一个额外的 script 标记，同时使用请求 URL 作为 src。这允许您绕过跨域安全控制，因为您始终可以包含来自其他站点的 JS 资源。但是，远程服务器必须知道它必须对请求应用前缀（即read_data({ /* JSON response */});，否则返回的信息将不会被处理。

更新

例如，jQuery 可以透明地处理 JSONP，就好像它是一个普通的 AJAX 请求：

http://api.jquery.com/jQuery.ajax/

即：

$.ajax({url:'http://your/request/url/',
        jsonp: 'your_desired_prefix',
        success: function(result) {
          /* result should hold you JSON data */
        });

Answer 4

如果你不能创建自己的代理，你应该使用YQL来避免跨域问题。

这是id=397 的示例网址，

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D'http%3A%2F%2F89.92.40.250%3A8010%2Fdreamteam%2Finterface%2Fget_event_detail.php%3Fid%3D397'&format=json&diagnostics=true

你可以像这样动态设置id，

var id = 397;
var baseurl = "http://query.yahooapis.com/v1/public/yql?q=";
var q = "select * from json where url = 'http://89.92.40.250:8010/dreamteam/interface/get_event_detail.php?id="+id+"'";  
var url = baseurl + encodeURI(q) + "&format=json&diagnostics=true";
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.onreadystatechange = monCode;
req.send(null);

function monCode() {
    if (req.readyState == 4) {
        var data = JSON.parse(req.responseText).query.results;
        console.log(data);
        //console.log(data.event);
        alert(data.event.title);
    }
}​

还有here is a jsFiddle DEMO

Usage Limits for YQL

• 每个应用程序限制（由您的访问密钥标识）：每天 100,000 次调用
• 每个 IP 限制：/v1/public/：每小时 2,000 个呼叫； /v1/yql/：每小时 20,000 次通话