Executing cross domain javascript never hits code in .done

Question

@People downvoting this issue: what's wrong with it? Which info am I not providing?

I'm trying to do a cross-domain service call via javascript from domainA to domainX, but somehow the line console.log('OK'); is never hit. The line console.log('1'); is hit.

How can I make sure the line console.log('OK'); is executed?

www.domainA.com/test.aspx

<script type="text/javascript">
    (function () {
        var ttScript = document.createElement('script'); ttScript.async = true;
        ttScript.src = '//www.domainX.com/js/test.js?v=1';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ttScript);
    })();
</script>

www.domainX.com/js/test.js

(function () {
    console.log('1');
    $.ajax({
        url: "//www.domainX.com/iplookup.php",
        data: null,
        type: 'GET',
        async: false,
        crossDomain: true,
        dataType: 'jsonp'
    }).done(function (data) {
        console.log('OK');
    });
})();

I tried jsonp and json as dataType. But when setting it to json or setting crossDomain to false I get: XMLHttpRequest cannot load http://www.domainX.nl/iplookup.php?callback=jQuery1102023322901595383883_1419031985295&_=1419031985296. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

www.domainX.com/iplookup.php

I tried with and without Access-Control-Allow-Origin

<?php
    header('content-type: application/json; charset=utf-8');
    header('Access-Control-Allow-Origin: *');
    $data = json_encode($_SERVER['REMOTE_ADDR']);
    echo "jsonp_callback($data);";
    //print json_encode($_SERVER['REMOTE_ADDR']);
?>              

With the above configuration I get NO errors in my Chrome console. Under network I see that the test.js is loaded succesfully when requesting page www.domainA.com/test.aspx

I checked under Net tab under the Response tab and I see the call being made to //www.domainX.com/iplookup.php" which returns the value I'd expect, in this case an IP address.

What more can I do?

Answer 1

When using jsonp you are atually requesting a file like this:

 jsonp_callback(yourDataHere);

And this file is included into your document making the values accessible when the function is called. So your php-file has to echo something like this:

<?php
    $data = json_encode($_SERVER['REMOTE_ADDR']);
    echo $_GET['jsonp_callback']."($data);";
?>

Note that you have to add the jsonp-function to the $.ajax:

$.ajax({
    url: "//www.domainX.com/iplookup.php",
    async: false,
    jsonp: 'jsonp_callback', 
    dataType: 'jsonp'
}).done(function(data){
    console.log(data);
});

Btw: Why would you do that call syncronous?

Edit: I wrote kinda crap. I updated my answer. The file you are requesting is just calling a function with your data as parameters. The callback is then the function itself. Jquery should normally handle that for you and make the data available in .done(). Read through the manual here!