2

My web application is trying to access the information from another server belonging to a different domain. Since it is a cross domain ajax call, i have used "dataType" as "JSONP" instead of JSON.

Now in the WebInspector-> Network Tab, I see the request is successful and the response is populated. But the success() function is never called. It always calls the error function with status = 200.

Since it is a JSONP request, jQuery appends "callback=?" to the end of the URL and the callback method was never called, even after getting the valid response. Not sure what went wrong?

$(document).ready(function() {
    // When you click the Get Instances button:
    $('#getInstances').click(function(){
        $.ajax({
            type: "GET",
            url: "http://178.28.167.221:8080/us-east-1/instance/list.json",
            contentType: "application/json; charset=utf-8",
            accept: "application/json",
            crossDomain: "true",
            headers: {'Access-Control-Allow-Origin','*'},
            dataType: "jsonp",
            success: function(msg) {
                result = JSON.stringify(msg);
                var obj = $.parseJSON(result);
                console.log(obj);
                $('#instancesTable').append('<tr><td>' + obj.autoScalingGroupName + '</td><td>' + obj.amiId + '</td><td>' + obj.instanceId + '</td><td>' + obj.instanceType +'</td></tr>');                                     
            },
            error: function(xhr, ajaxOptions, thrownError, textStatus, responseText) {
                console.log(name + ' environment failed with error: ' + xhr.status + "  " + thrownError);

                var errorMessage = "Error";
                if (xhr.status == 0) {
                    errorMessage = "Can't Connect";
                }
            }
        });
    });
});

I also verified by including the below in my ajax request:

        jsonp: 'callback',
        jsonpCallback: 'jsonpCallback'

and defining the callback function as below:

       function jsonpCallback(data){
         alert("jsonpCallback");
       }

jsonCallback was never called, even if the request is successful and response is available from the server (shown in Network Tab of WebInspector).

The response from the server is an Array of JSON objects. [{JSON1}, {JSON2} ..]

Note : I tried to change the contentType as "application/javascript" since the response was an array of JSON objects. But nothing worked :(

Jonathan
  • 1,542
  • 3
  • 16
  • 24
Vijayeswari Muruganandam
  • 51
  • 4
  • Are you trying to use CORS or JSONP? Or are you mixing them up? Which one does the server support? – Bergi Dec 02 '14 at 19:07
  • 2
    can you post the response you are seeing? – Benny Lin Dec 02 '14 at 19:12
  • `Access-Control-Allow-Origin` is a response header, not a request header. Trying to use it as a request header will break an otherwise correct CORS setup (because it's a non-simple request header). – apsillers Dec 02 '14 at 19:41
  • A JSONP response is just a script. That's it. If a response is not a script, it's not a JSONP response. When you request a resource from a server, the server decides whether or not it will serve you a script; there's nothing more you can do about it, unless you can reprogram the server. In this case, `[{JSON1}, {JSON2} ..]` is not a script (or at least, not a script that *does* anything). Therefore, it's not JSONP. Unless you control the server, you can't make the server start serving you script files like `doStuff([...])` instead of JSON files like `[...]`. – apsillers Dec 02 '14 at 19:48
  • @Bergi - I am using only JSONP. Need to check with my server implementation. – Vijayeswari Muruganandam Dec 02 '14 at 20:10
  • @BennyLin Sure will do. – Vijayeswari Muruganandam Dec 02 '14 at 20:11
  • @apsillers Thanks for the reply. I have not included any header in my real implementation of the request. Will check with the server implementation. – Vijayeswari Muruganandam Dec 02 '14 at 20:12
  • Server implementation is not returning a script in my case, instead it returns a JS object. So the error function is getting called. I will work on the server implementation. Thanks all for the replies. Its wonderful sharing knowledge in this forum. – Vijayeswari Muruganandam Dec 02 '14 at 20:38

1 Answers1

0

I had similar issue and resolved it. you have not specified what your service is. In my case, it was a WCF service.

i had to add this.

   <webHttpBinding>
        <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>

and set the binding configuration to the above in the service

i.e : bindingConfiguration="webHttpBindingWithJsonP"

this resolved the issue. They could be a similar means of achieving the same on PHP or other platforms

jordan koskei
  • 2,749
  • 1
  • 15
  • 12