jQuery调用REST服务的ajax请求

Question

jQuery调用REST服务的ajax请求

51

我想从jquery中发起一个ajax调用到rest服务。所使用的rest服务源自mkyong博客上的一个教程，链接如下：http://www.mkyong.com/webservices/jax-rs/integrate-jackson-with-resteasy/

这个服务本身是能够工作的，但是当我尝试从jQuery中发起调用时，在Firebug中的状态码显示为200，但在响应部分中没有任何内容。

以下是带有Ajax调用的HTML页面：

<html>
<head>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>

<body>  

<button id="ajax">ajax call</button>
<button id="json">json</button>

<script type="text/javascript">
    $('#json').click(function(){ 
        alert('json');
         $.getJSON("http://localhost:8080/restws/json/product/get",
         function(data) {
            alert(data);         
          });   
    });

    $('#ajax').click(function(){ 
        alert('ajax');
         $.ajax({ 
             type: "GET",
             dataType: "json",
             url: "http://localhost:8080/restws/json/product/get",
             success: function(data){        
                alert(data);
             }
         });
    });

</script>



</body>

</html>

我不知道哪里出错了，你能告诉我吗？

谢谢！

- DaJackal

1

你的网站也是运行在 http://localhost:8080 上吗？如果不是（http://localhost/ 不是同源策略），那么你需要将API输出改为 JSONP。 - gen_Eric

不，这只是一个简单的HTML文件，双击即可运行 :D - DaJackal

我是指指向此页面的URL是什么？ - gen_Eric

1

你正在受同源策略的阻止，你需要使用JSONP。 - gen_Eric

@Rocket：是的，我的错。我总是从80端口提供所有服务，即使在开发过程中也是如此。 - Jeremy

显示剩余2条评论

3个回答

1

从使用8080端口来看，我猜测您正在使用Tomcat Servlet容器来提供REST API服务。如果是这种情况，您也可以考虑让Web服务器代理请求到Servlet容器。

在Apache中，您通常会使用mod_jk（尽管还有其他替代方案）通过Web服务器在80端口后面提供API，而不是8080，这将解决跨域问题。

这是一种常见的做法，将“静态”内容放在Web服务器中，将动态内容放在容器中，但两者都从同一个域名后面提供服务。

REST API的URL将为http://localhost/restws/json/product/get 这里是如何使用mod_jk将Apache连接到Tomcat的说明： http://tomcat.apache.org/connectors-doc/webserver_howto/apache.html

- user1526458

-4

我认为没有必要指定

'http://localhost:8080`"

在URI部分...因为如果你指定它，你将不得不手动更改每个环境。

仅此而已。

"/restws/json/product/get" also works

- Amit

那么无关紧要，不是吗？ - OverCoder

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gen_Eric · Accepted Answer

您正在从与您请求的主机不同的主机上运行HTML。因此，您受到同源策略的阻止。

解决此问题的一种方法是使用JSONP。这允许跨站点请求。

在JSON中，您将返回：

{a: 5, b: 6}

在JSONP中，JSON被包装在一个函数调用中，因此它变成了一个脚本而不是一个对象。

callback({a: 5, b: 6})

你需要编辑你的REST服务，使其接受一个名为callback的参数，并将该参数的值用作函数名称。还应将content-type更改为application/javascript。

例如：http://localhost:8080/restws/json/product/get?callback=process 应输出：

process({a: 5, b: 6})

在你的JavaScript中，你需要告诉jQuery使用JSONP。为此，你需要将?callback=?附加到URL上。

$.getJSON("http://localhost:8080/restws/json/product/get?callback=?",
   function(data) {
     alert(data);         
   });

如果您使用$.ajax，并告诉它使用jsonp，它将自动添加?callback=?。

$.ajax({ 
   type: "GET",
   dataType: "jsonp",
   url: "http://localhost:8080/restws/json/product/get",
   success: function(data){        
     alert(data);
   }
});