Access Jersey based RESTful service using jQuery

Question

I am trying to access RESTful service, created on Java and deployed with help of Jersey using jQuery.

If I access it using browser I will get the result, but from jQuery, I am getting an error and can not see any results on the page.

Page with the script is hosting on local Apache server and the Service is running separately using Jersey/Grizzly on the same machine.

I can see that service is sending the response and it has 200 code, but I keep getting error from .ajax, without any details and Any suggestions what is wrong?

Service:

@Path("/helloworld")

public class HelloWorldResource {

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

}

Main:

 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);
                }
            });
        }

score 7 · Answer 1 · edited Jul 24 '11 at 21:06

After a couple of days of research and experiments I discovered that the problem was in the headers of the response. To be able to use the response from the service, I added custom header field:

"Access-Control-Allow-Origin: *"

New service looks like this:

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


    @GET
    @Produces
    public Response test(){

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

Lem · Answer 2 · 2013-10-21T11:16:17.353

0

if you are using a javascript function to replace a typical form submission then pay attention to the fact that you should return false; at the end of your javascript function!

you can check a similar issue here http://forum.jquery.com/topic/jquery-newbie-3-9-2011

actually it is nota a matter of jersey but a matter of javascript

edited Oct 21 '13 at 11:16

answered Oct 21 '13 at 11:08

Lem

419
5
4

Rafay · Answer 3 · 2011-07-22T22:32:32.893

you have to set crossDomain to true to make cross domain requests

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

if your service required the authentication may be you can do it like this

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);
                    }
                });
            }

also use jquery 1.5.1 or higher because the crossDomain and some other options are not available in the earlier versions. For reference see this link http://api.jquery.com/jQuery.ajax/

Thank you for the quick response! But it did not solve my problem, I am still not able to get the data and getting alert " 0 error"... — Alex, Jul 22 '11 at 22:02
its `dataType` **NOT** `DataType` also set `async` to false and `cache` false... see the answer i haved edited it, also **set** `dataType` to html — Rafay, Jul 22 '11 at 22:05
I've tried this, now the xhr.responseText become "undefined", but still no result... — Alex, Jul 22 '11 at 22:11
confirm one more thing the url you are trying to access it requires authentication? — Rafay, Jul 22 '11 at 22:21
it's 1.6.2 and also I tried 1.5 and it is very simple service, do not need any authentication, I can just click on the link and get results.. — Alex, Jul 22 '11 at 22:32
updated the answer... and you didnt tell that whether your service uses authentication or not? i have assumed it that it requires authentication and updated the answer — Rafay, Jul 22 '11 at 22:33

Access Jersey based RESTful service using jQuery

3 Answers3

Linked