Menu
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!
419
2 Answers. AJAX is a set of (typically) client-sided web development techniques, while REST is an architecture style for sending and handling HTTP requests. So you can use AJAX to send RESTful requests. A REST API is typically not implemented using AJAX, but can be accessed by an AJAX client.
AJAX (Asynchronous JavaScript and XML) is a set of tools used to make calls to the server to fetch some data. In this article, we will see how to implement a simple API call using AJAX. Prerequisites: Basic knowledge of AJAX and its function. You can learn all the basics from here.
The A in Ajax stands for asynchronous. That means sending the request (or rather receiving the response) is taken out of the normal execution flow. In your example, $. ajax returns immediately and the next statement, return result; , is executed before the function you passed as success callback was even called.
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); } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
