JSONP: status code 200 OK and still returns $.Ajax(...error:Function()...)

Question

We’re having trouble making a request $.ajax, JSONP.
The problem is that even with the positive return (Status Code:200) the function shown below always returns the error check result as positive.

    $(document).ready(function() {
        $(document).on('click', '#checar', function(){
            $.ajax({
                type:     'GET',
                url:      'http://sinpesq.mpa.gov.br/rgp/web/sargp/index.php/atividade_pesca_profissional/atividade/RegularidadePescador',
                data:     {cpf: '37430564291', dtnascimento: '26-02-1970'},
                dataType: 'jsonp',

                error: function(xhr, status, error) {
                  console.log(error.message);
                },

                success: function(data){
                    console.log(data);
                }
            });

        });         
    });  

And nothing is returned. How to recover JSON data from this request?

Answer 1

JSONP is different from JSON. JSON is a data serialization format, when you make a request waiting for a JSON the server must return text content. And in fact, that’s what your server is returning.

[{bla},{bla},{bla}]

JSONP (JSON with padding), on the other hand, expects the answer to be a Javascript script. Why? Precisely because the tag <script> is one of the exceptions to the Same Origin Policy (and therefore a domain can include scripts on another domain page). For this to work, however, it takes a "trick":

1. The browser creates an element script, placing the URL to be consulted and an additional parameter specifying the name of a function. Example:

   <script type="text/javascript" src="http://dominio/url?callback=myCallback">
   

   (myCallback is just one example - any other function name could be used)

2. The server prepares the JSON response, normal, only when sending, it does it with the content-type text/javascript (or application/javascript, but if I remember correctly this gives problem in some older browsers) and the most important: putting a padding:

   myCallback([{bla}, {bla}, {bla}]);
   

   Without this myCallback( at the beginning and ); at the end the JSONP call does not work - after all, all that will come is a normal Javascript object:

   [{bla}, {bla}, {bla}]
   

   that will not execute any code, nor will it be saved in any variable, and nothing will happen...

Apparently you modified the server to serve the content-type correct, but forgot to add the padding. That’s why jQuery - found that the script was loaded and executed correctly, but the function of callback was not called - accuses error.

The solution is to modify the server to do the padding (remembering: is to use the name established in the parameter of query string, not necessarily myCallback). Now, if the server is not yours, but from a third party (so you can’t modify it), I’m afraid your only output is to use a proxy (for example, causing your own server to access the third party server and return the result to the client). In this case, you don’t need to mess with JSONP (or CORS) - you can just use JSON and you’re done...