javascript 从 localhost 或 file:// 访问 JSON 服务

Accessing JSON service from localhost or file://

提问by dtech

I am making a html page intended to be run locally on a PC, preferably without a local server runing (file://). I am also using jQuery to make manipulation/AJAX a little easier.

我正在制作一个打算在 PC 上本地运行的 html 页面，最好不要运行本地服务器（file://）。我还使用 jQuery 使操作/AJAX 更容易一些。

I am trying to load 2 results from the twitter API, but I get an error. The code is as follows:

我正在尝试从 twitter API 加载 2 个结果，但出现错误。代码如下：

$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?screen_name=someuser&count=9", {},
    function (data) {
        $.each(data.items, doSomething1);
    });
$.getJSON("http://search.twitter.com/search.json?q=somequery&result_type=recent&count=9", {},
    function (data) {
        $.each(data.items, doSomething2);
    });

I also tried the following code, but it didn't change the outcome.

我也试过下面的代码，但它没有改变结果。

$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json",
    {
        count:          "9",
        screen_name:    "someuser"
    },
    function(data) {
        $.each(data.items, updateAWTweets);
    });
$.getJSON("http://search.twitter.com/search.json",
    {
        q:              "somequery",
        result_type:    "recent",
        count:          "9"
    },
    function(data) {
        $.each(data.items, updateHashTagTweets);
    });

I get the following error in chrome (on a localhost server):

我在 chrome 中收到以下错误（在本地主机服务器上）：

XMLHttpRequest cannot load http://search.twitter.com/search.json?q=somequery&result_type=recent&count=9. Origin http://localhost:62153 is not allowed by Access-Control-Allow-Origin.

or (with a file:// link)

或（带有文件：//链接）

XMLHttpRequest cannot load http://api.twitter.com/1/statuses/user_timeline.json?screen_name=someuser&count=9. Origin null is not allowed by Access-Control-Allow-Origin.

Does anyone know how I can fix this?

有谁知道我该如何解决这个问题？

回答by no.good.at.coding

You're running into the same-origin policyrestriction - your script can't access any other domain apart from the one it was loaded from.

您遇到了同源策略限制 - 您的脚本无法访问除了加载它的域之外的任何其他域。

1. You could give JSONPa try - that's one common solution to getting data across domains:

   • http://www.chazzuka.com/blog/?p=221
   • http://jquery-howto.blogspot.com/2009/04/twitter-jsonjsonp-api-url.html

   Your code would look something like this (note the addition of callback=?to the URL):

   $.getJSON("http://search.twitter.com/search.json?q=somequery&result_type=recent&count=9&callback=?", 
             {},
             function (data) {
                     $.each(data.items, doSomething2);  
        });
   

2. Another option is to setup a proxy - you can use Apache httpd as a proxy/reverse proxy to get around this restriction.

1. 您可以尝试JSONP- 这是跨域获取数据的一种常见解决方案：

   • http://www.chazzuka.com/blog/?p=221
   • http://jquery-howto.blogspot.com/2009/04/twitter-jsonjsonp-api-url.html

   您的代码看起来像这样（注意添加callback=?到 URL 中）：

   $.getJSON("http://search.twitter.com/search.json?q=somequery&result_type=recent&count=9&callback=?", 
             {},
             function (data) {
                     $.each(data.items, doSomething2);  
        });
   

2. 另一种选择是设置代理 - 您可以使用 Apache httpd 作为代理/反向代理来绕过此限制。

回答by epascarello

Add the JQuery's JSONP callbackto the URL

将JQuery 的 JSONP 回调添加到 URL

$.getJSON("http://search.twitter.com/search.json?callback=?", {

回答by Abi

Don't use this $.getJSON()Its not flexible.. You can use

不要使用这个$.getJSON()它不灵活..你可以使用

$.ajax({
    url:"test.json",
    dataTypr:"json",
    async:false
}).responseText;

this can easily accessed by the html coding....

这可以通过 html 编码轻松访问....