我道歉，如果这个问题已经有了答案。

我想使用jQuery阿贾克斯调用来检索从公开一个JSON接口REST Web服务数据。

当我打电话使用URL服务，jQuery的调用失败，虽然我得到一个HTTP状态code 200确定。

当我复制响应到一个文件在文件系统中检索此，相同的通话效果。

无论我访问的文件和Web服务我打电话都是在同一台机器上。

在URL中的一些注意事项用在code如下：

使用：

  URL：HTTP：//本地主机：9090 /应用/用户/ 861，
 

调用失败，进入.fail在所有浏览器。

URL本身将返回所有的浏览器的JSON：

  {
    用户id：861，
    为employeeno：123，
    jobdesc：开发，
    名字：碧玉，
    姓氏：Fitussi
}
 

当在本地文件系统下使用test.json的行为：

  URL：AJAX / test.json
 

在Firefox中，调用执行，进入.done并显示页面上的结果。

在Chrome浏览器，调用失败，状态为404和下面的消息 -

不访问控制 - 允许 - 原产地标头的请求的资源present。原产地'空'，因此是不允许进入。

我尝试了不同的组合，改变数据类型：JSONP，加入回调= 到年底？该URL，并包围在test.json的数据与'（'和'）'没有运气。

请理解我的新UI编程，JavaScript和jQuery的。

请帮我在做什么错。下面是JavaScript的：

 ＆LT;脚本SRC =HTTP：//$c$c.jquery.com/jquery-1.10.2.js类型=文/ JavaScript的＆GT;
＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $阿贾克斯（{
            键入：GET，
            网址：AJAX / test.json
            //下面的注释调用失败，进入.fail
            // URL：HTTP：//本地主机：9090 /应用/用户/ 861，
            的contentType：应用/ JSON
            接受：应用/ JSON
            数据类型：JSON
        }）
        .done（功能（数据）{
            警报（成功）;
            的console.log（数据）;
            变种项= [];
            $每个（数据，功能（键，VAL）{
                items.push（＆LT;李ID ='+键+'＆gt;中+ VAL +＆LT; /李＆GT;）;
            }）;
            $（＆LT; UL /＆gt;中，{
                类：我的新清单，
                的HTML：items.join（）
            }）appendTo（身体）。
        }）
        .fail（功能（数据）{
            的console.log（数据）;
            警报（失败）;
            }）
        。总是（函数（）{
            警报（在总）;
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

以下是输出，当我将URL粘贴到浏览器（AJAX / test.json还的内容）：

  {
    用户id：861，
    为employeeno：123，
    jobdesc：开发，
    名字：碧玉，
    姓氏：Fitussi
}
 

解决方案

您的问题不是关于用户界面的编程，它是关于现代浏览器的安全模式：P

访问控制 - 允许 - 产地的错误（即：加载JSON文件）从一个域从一个托管HTML页面不同。 在你的情况，你是从你的硬盘驱动器打开HTML文件（文件：///），并呼吁本地主机web服务

这是在所有的现代浏览器禁止从外部的web服务业主国外web服务获取数据授权您一个安全功能（或每个人，允许使用通配符）来调用它。

我建议你阅读从MDN以下指南，让你明白你为什么有这个问题。 然后，它会很容易解决。

https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS

如果你控制了Web服务的来源$ C ​​$ c或收留了它的网络服务器，您需要添加访问控制 - 允许 - 产地HTTP标头。

I apologize if this question has already been answered.

I am trying to retrieve data from a REST web service that exposes a JSON interface using jQuery .ajax call.

When I call the service using the URL, the jQuery call fails although I get a HTTP status code 200 OK.

When I copy the response into a file on the filesystem and retrieve this, the same call works.

Both the file I am accessing and the web service I am calling are on the same machine.

Some notes on the url used in the code below:

Using:

url: "http://localhost:9090/app/user/861", 

the call fails, goes into .fail on all browsers.

The URL itself returns the json on all browsers:

{
    "userid": 861,
    "employeeno": "123",
    "jobdesc": "Developer",
    "firstname": "Jasper",
    "lastname": "Fitussi"
}

when using "test.json" in the local filesystem following is the behavior:

url: "ajax/test.json",    

On Firefox, the call executes, goes into .done and displays the result on page.

On Chrome, the call fails with status 404 and the following message -

"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

I tried different combinations changing dataType:"jsonp", adding a ?callback=? to the end of the URL, and enclosing the data in the test.json with a '(' and a ')' without luck.

Please understand I am new to UI programming, javascript and jQuery.

Please help with what I am doing wrong. Here's the javascript:

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url:"ajax/test.json",    
            // the following commented call fails, goes into .fail
            // url:"http://localhost:9090/app/user/861", 
            contentType: "application/json",
            accepts: "application/json",
            dataType: "json"
        })
        .done(function(data) {
            alert("Success");
            console.log(data);
            var items = [];
            $.each( data, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val + "</li>");
            });
            $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
            }).appendTo( "body" );
        })
        .fail(function(data) {
            console.log(data);
            alert("Failed");
            })
        .always(function() {
            alert("In Always");
        });
    });
</script>

The following is the output when I paste the url into the browser (also the contents of ajax/test.json):

{
    "userid": 861,
    "employeeno": "123",
    "jobdesc": "Developer",
    "firstname": "Jasper",
    "lastname": "Fitussi"
}

Your problem is not about UI programming, it's about the security model of modern browsers :p

Access-Control-Allow-Origin errors occurs when you call a webservice (ie: load a JSON file) from a domain that is different from the one hosting your HTML page. In your case, you are opening the html file from your hard drive (file:///) and calling a webservice on localhost.

This is a security feature in all modern browsers that forbid getting data from a foreign webservice without the webservice owners authorizing you (or everyone, wildcards are allowed) to call it.

I recommend reading the following guide from MDN, so that you understand WHY you are having this problem. It will then be easy to resolve

https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS

If you control the source code of the webservice, or the webserver hosting it, you need to add Access-Control-Allow-Origin HTTP headers.