jQuery ajax call to REST service

Question

I'm trying to make an ajax call from jquery to a rest service. The rest service used is right from a tutorial of mkyong's blog, this one: http://www.mkyong.com/webservices/jax-rs/integrate-jackson-with-resteasy/

The service works, but when i try to make a call from jQuery, in Firebug there is a 200 status code, but in the response section, nothing.

Here is the html page with the ajax call:

<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>

I can't figure it out where I went wrong, could you please tell me what i am doing wrong?

Thanks!

Is your site running on `http://localhost:8080` as well? If it's not (`http://localhost/` is [*not* the same](http://en.wikipedia.org/wiki/Same_origin_policy)), you'll have to make your API output [JSONP](http://en.wikipedia.org/wiki/JSONP). — gen_Eric, Aug 18 '11 at 19:02
no, it's just a simple html, it's running on double click :D — DaJackal, Aug 18 '11 at 19:05
You are getting blocked by the [same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy), you'll need to use JSONP. — gen_Eric, Aug 18 '11 at 19:08
@Jeremy: It would need to be served on the same server (on the same port). — gen_Eric, Aug 18 '11 at 19:15
@Rocket: Yeah, my bad. I always serve everything from 80, even during dev. — Jeremy, Aug 18 '11 at 19:24

gen_Eric · Accepted Answer · 2011-08-18T19:41:01.507

82

You are running your HTML from a different host than the host you are requesting. Because of this, you are getting blocked by the same origin policy.

One way around this is to use JSONP. This allows cross-site requests.

In JSON, you are returned:

{a: 5, b: 6}

In JSONP, the JSON is wrapped in a function call, so it becomes a script, and not an object.

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

You need to edit your REST service to accept a parameter called callback, and then to use the value of that parameter as the function name. You should also change the content-type to application/javascript.

For example: http://localhost:8080/restws/json/product/get?callback=process should output:

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

In your JavaScript, you will need to tell jQuery to use JSONP. To do this, you need to append ?callback=? to the URL.

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

If you use $.ajax, it will auto append the ?callback=? if you tell it to use jsonp.

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

edited Aug 18 '11 at 19:41

answered Aug 18 '11 at 19:15

gen_Eric

223,194
41
299
337

You're welcome. JSONP is kind of a 'hack' to get data from other URLs, it's pretty cool. – gen_Eric Aug 18 '11 at 19:19
i get a response now in firebug, but it doesn't enter in function(data). do you know why? – DaJackal Aug 18 '11 at 19:21
@DaJackal: Did you remember to have the webservice wrap the JSON in a function call? – gen_Eric Aug 18 '11 at 19:22
so i should wrap the json sended by the rest service in a callback(json), isn't, @Rocket? – DaJackal Aug 18 '11 at 19:28
When using JSONP, jQuery will send a GET parameter called `callback` to your REST service. You need to take that value and use it to wrap the JSON. – gen_Eric Aug 18 '11 at 19:31
@daJackal: Also, change the `Content-type` to `application/javascript`. – gen_Eric Aug 18 '11 at 19:40
i'm working on it, it's not working for now, but hopefully i will make it to work – DaJackal Aug 18 '11 at 19:47
i just posted a new question on SO, cause I have some problems at changing the rest service, if you can take a look, thanks! The question is here: http://stackoverflow.com/questions/7113572/rest-service-doesnt-work-after-a-simple-change – DaJackal Aug 18 '11 at 20:15
1

I did it after all, after understanding how query param in rest service works, thank you very much! – DaJackal Aug 18 '11 at 20:48
@DaJackal: Awesome! :-D I'm glad I could help :-) – gen_Eric Aug 18 '11 at 20:49
@DaJackal: hi.. can you show me your right code?? really need that code.. many thanks.. :) – Michael Frans Jan 10 '12 at 03:29
@RocketHazmat its not working if I send post request.. is this only work with post request ? – Aman Gupta Dec 06 '13 at 13:35
@Aman: You can't send a POST request to a JSONP page. JSONP works by appending a ` – gen_Eric Dec 06 '13 at 14:51
@RocketHazmat thanks and sorry for my typo, actual sentence was **is this only work with get request**. Thanks – Aman Gupta Dec 06 '13 at 14:53

score 1 · Answer 2 · edited Sep 28 '17 at 13:49

From the use of 8080 I'm assuming you are using a tomcat servlet container to serve your rest api. If this is the case you can also consider to have your webserver proxy the requests to the servlet container.

With apache you would typically use mod_jk (although there are other alternatives) to serve the api trough the web server behind port 80 instead of 8080 which would solve the cross domain issue.

This is common practice, have the 'static' content in the webserver and dynamic content in the container, but both served from behind the same domain.

The url for the rest api would be http://localhost/restws/json/product/get

Here a description on how to use mod_jk to connect apache to tomcat: http://tomcat.apache.org/connectors-doc/webserver_howto/apache.html

score -4 · Answer 3 · answered Nov 05 '13 at 08:47

-4

I think there is no need to specify

'http://localhost:8080`"

in the URI part.. because. if you specify it, You'll have to change it manually for every environment.

Only

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

answered Nov 05 '13 at 08:47

Amit

451
2
6
19

So irrelevant, no? – OverCoder Oct 11 '16 at 11:52

jQuery ajax call to REST service

3 Answers3

Linked