jQuery Ajax Cross-site scripting

I had this very problem a while ago, when using an external webservice to retrieve Brazilian's zip code data (address and such). And I used the very same method you did.

There are a few points that need to be stressed out:

1) Ajax does not allow security protocol differences. That means that, if your page is secured behind a secure protocol (HTTPS), your browser will not allow an external server to return through an unsecured one (HTTP). (I found this late in my development, and the result was to use .NET's webrequest )

2) Setting datatype to "JSONP" doesn't transform a response to JSON. It allows it to be received as such.

3) JSONP is the only datatype acceptd for cross-domain requests. The error message you described is probably due to this reason.

So, to summarize:

When talking about cross-domain requests with ajax,"Arbitrary" contents are restricted to JSON(P). AND the data received MUST be JSON.

Also, until jQuery 1.5, if the response is not correctly typed as JSON, no errors are raised .

I wish I had known these issues before I started my development... Uploading a component to production servers unbeknownst of the fact that requesting data stored within HTTP from SSL-Layered servers is quite an embarassment. ... (Though still quite predictable, actually)

For more info : http://api.jquery.com/jquery.ajax/

You need to use Ajax-cross-origin a jQuery plugin.

This plugin let you use jQuery.ajax() cross domain.

Use it like this:

$.ajax({
    crossOrigin: true,
    url: url,
    success: function(data) {
        console.log(data);
    }
});

You can read more here: http://www.ajax-cross-origin.com/

Thanks for the responses. Very helpful. I decided to go with a proxy approach for which I found a simple solution here: http://www.paulund.co.uk/make-cross-domain-ajax-calls-with-jquery-and-php

For cut and paste simplicity I've added my code here.

I created a file called crossdomain.html. Included jquery library. Created the following Javascript function:

function requestDataByProxy()
    {
        var url = "http://UrlYouWantToAcccess.html";
        var data = "url=" + url + "&parameters=1&para=2";    

        $.ajax({
            url: "our_domain_url.php",
            data: data,
            type: "POST",
            success: function(data, textStatus, jqXHR){
                console.log('Success ' + data);
                $('#jsonData').html(data);
            },
            error: function (jqXHR, textStatus, errorThrown){
                console.log('Error ' + jqXHR);
            }
        });
    }

I also added a simple button and pre tag in HTML to load results:

<button onclick="requestDataByProxy()">Request Data By Proxy</button>

<h3>Requsted Data</h3>
<pre id="jsonData"></pre>

And then, the PHP file our_domain_url.php which uses cURL (make sure you have this enabled!)

<?php

//set POST variables
$url = $_POST['url'];
unset($_POST['url']);

$fields_string = "";
//url-ify the data for the POST
foreach($_POST as $key=>$value) { 
    $fields_string .= $key.'='.$value.'&'; 
}
$fields_string = rtrim($fields_string,'&');

//open connection
$ch = curl_init();

//set the url, number of POST vars, POST data
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_POST,count($_POST));
curl_setopt($ch,CURLOPT_POSTFIELDS,$fields_string);

//execute post
$result = curl_exec($ch);

//close connection
curl_close($ch);

?>

To me, this was a fairly straight-forward solution.

Hope this helps someone else!

Rob