Best IT Recipes

JQuery ajax REST service call

I am trying to make ajax call from jquery to a holiday service. The rest of the right service is directly from the mkyong blog tutorial, this is: http://www.mkyong.com/webservices/jax-rs/integrate-jackson-with-resteasy/

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

Here is the html page with 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 understand where I was wrong, could you tell me what I am doing wrong?

Thank!

+42
jquery rest
Aug 18 '11 at 19:00
source share
3 answers

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

One way to use JSONP . This allows cross site requests.

In JSON you will be returned:

 {a: 5, b: 6}

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

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

You need to edit the REST service to accept a parameter called callback , and then use the value of this parameter as the name of the function. 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. For this you need to add ?callback=? to the url.

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

If you use $.ajax , it will automatically add ?callback=? if you tell him to use jsonp .

 $.ajax({ type: "GET", dataType: "jsonp", url: "http://localhost:8080/restws/json/product/get", success: function(data){ alert(data); } });
+76
Aug 18 '11 at 19:15
source share

From using 8080, I assume that you are using the tomcat servlet container to serve your a priori. If so, you can also ask your web server proxy to request a servlet container.

With apache, you usually use mod_jk (although there are other alternatives) to serve the web server at port 80 instead of 8080, which resolved the cross-domain problem.

This is a common practice, having “static” content in the web server and dynamic content in the container, but both because of the same domain.

The URL for the rest of the api will be http://localhost/restws/json/product/get

Here's how to use mod_jk to connect apache to tomcat: http://tomcat.apache.org/connectors-doc/webserver_howto/apache.html

+1
Jul 15 '12 at 4:24
source share

I think there is no need to indicate

 'http://localhost:8080`"

in the URI part .. because. if you specify it, you will have to manually change it for each environment.

Only

 "/restws/json/product/get" also works
-2
Nov 05 '13 at 8:47
source share


More articles:


All Articles