使用 jQuery 访问基于 Jersey 的 RESTful 服务

Question

我正在尝试访问 RESTful 服务，该服务是在 Java 上创建的，并在 Jersey 的帮助下使用 jQuery 进行部署。

如果我使用浏览器访问它，我将得到结果，但从 jQuery 中，我收到错误，并且在页面上看不到任何结果。

包含脚本的页面托管在本地 Apache 服务器上，并且服务使用 Jersey/Grizzly 在同一台计算机上单独运行。

我可以看到该服务正在发送响应并且它有 200 代码，但我不断从 .ajax 收到错误，没有任何详细信息并且 有什么建议吗？有什么问题吗？

服务：

@Path("/helloworld")

public class HelloWorldResource {

@GET
@Produces
public String test(){
    System.out.println("Sending response");
    return "test";
}

}

主要：

 public static void main(String[] args) throws IOException {

    final String baseUri = "http://localhost:9998/";
    final Map<String, String> initParams = new HashMap<String, String>();
    initParams.put("com.sun.jersey.config.property.packages",
            "resources");
    System.out.println("Starting grizly");
    SelectorThread threadSelector = GrizzlyWebContainerFactory.create(baseUri, initParams);

    System.out.println(String.format(
            "Jersey app started with WADL available at %sapplication.wadl\n"
            + "Try out %shelloworld\nHit enter to stop it...", baseUri, baseUri));
    System.in.read();
    threadSelector.stopEndpoint();
    System.exit(0);

}

JavaScript：

var serviceAddress = "http://192.168.1.2:9998/helloworld";
        function loadDeviceData(){
            $.ajax({
                DataType: "text",
                url: serviceAddress,
                success: function (data) {
                    alert("Data loaded: " + data);
                },
                error: function (xhr) {
                    alert(xhr.responseText + ' ' + xhr.status + ' ' + xhr.statusText);
                }
            });
        }

Answer 1

经过几天的研究和实验，我发现问题出在响应的标题中。为了能够使用服务的响应，我添加了自定义标头字段：

“Access-Control-Allow-Origin：*”

新服务如下所示：

@Path("/helloworld")
public class HelloWorldResource {


    @GET
    @Produces
    public Response test(){

        return Response.ok("test").header("Access-Control-Allow-Origin", "*").build();
    }
}

Answer 2

您必须将 crossDomain 设置为 true 才能发出跨域请求

var serviceAddress = "http://192.168.1.2:9998/helloworld";
        function loadDeviceData(){
            $.ajax({
                dataType:'html',
                type:'GET',
                crossDomain:true,
                cache:false,
                async:false,                    
                url: serviceAddress,
                success: function (data) {
                    alert("Data loaded: " + data);
                },
                error: function (xhr) {
                    alert(xhr.responseText + ' ' + xhr.status + ' ' + xhr.statusText);
                }
            });
        }

UPDATE

如果您的服务需要身份验证，您可以这样做

var serviceAddress = "http://192.168.1.2:9998/helloworld";
            function loadDeviceData(){
                $.ajax({
                    dataType:'html',
                    type:'GET',
                    crossDomain:true,
                    cache:false,
                    async:false,
                    xhrFields: {
                      withCredentials: true
                    },
                    username:'yourUsername', //not sure about the username and password options but you can try with or without them
                    password:'thePass',                    
                    url: serviceAddress,
                    success: function (data) {
                        alert("Data loaded: " + data);
                    },
                    error: function (xhr) {
                        alert(xhr.responseText + ' ' + xhr.status + ' ' + xhr.statusText);
                    }
                });
            }

也可以使用 jquery 1.5.1 或更高版本，因为crossDomain 和其他一些选项在早期版本中不可用。有关参考，请参阅此链接 http://api.jquery.com/jQuery.ajax/

Answer 3

如果您使用 JavaScript 函数来替换典型的表单提交，那么请注意您应该返回 false；在你的 javascript 函数的末尾！

您可以在这里检查类似的问题 http://forum.jquery.com/ topic/jquery-newbie-3-9-2011

实际上这不是球衣的问题，而是 javascript 的问题