jQuery.ajax Response is empty or undefined

Question

Hi I hava a big problem. I have to get some JSON form localhost:8080.

The server side is a restful based jax-rs server.

@Path( "/m" )
public class M {
  @GET
  @Path( "{id: [a-z]{1,4}-\\d{1,4}}" )
  @Produces( "application/json" )
  public Response getCar ( @PathParam( "id" ) final String id ) {
    final ResponseBuilder builder;
    builder = Response.ok( "{\"one\":\"bla\"}" );
    return builder.build();
  }
}

For the same origin policy I have the following script on localhost:8080/js/script.js

function test (file) {
    $.ajax( {
        type: 'GET',
        url: file + '?callback=?',
        dataType: 'json',
        success: function (data) {
            alert( 'works' );
        }
    } );
}

I don't like the '?callback=?' part, but without this the response is empty (HTTP-Body).

The problem now is, that the success method will never executed. When I change dataType to "script", the method will be called but the passed argument (data) is undefined. So what I do wrong?

Answer 1

Try this:

function test (file) {
    $.getJSON(file + '?callback=?', function(data){
        alert("works");
    });
}

Answer 2

If your main site is localhost:80 i.e. localhost, even if your calling script is at :8080 it won't work. It uses the domain/port of the HTML not the external JS files. The reason the callback=? might work is because its adding a script element to the page. The important thing is that the JSON on the server supports a callback.

For instance, if it were a PHP script, it would need to do something like this:

<?php 
  $json = json_encode(array('key' => "value"));
  echo isset($_GET['callback']) ? $_GET['callback'] . "($json);" : $json;

So the resulting output looks like this:

callback_function({"key" => "value"});

Finally, since you are using JSONP (JSON with a callback), just use $.getJSON:

$.getJSON(file + '?callback=?', function (data) {
  alert('It Works');
});

Answer 3

Why not simplify this and use the getJSON method:

function test (file,id) {
$.getJSON(file, {id:id}, function(data){
// do whatever with the returned data array, the id value can be left off if you do not need to reference a particular record.
alert( 'works' );   
});
}

I think this will get you what you want to do.

Answer 4

I create a simple test page on localhost:8080 and it works.

Seems so, I missunderstand the same origin policy problem.