使用 JSONP 的 AJAX 跨域数据

Question

I'm trying to get data from Geobytes. One of the templates returns JSON and I need to cross-domain access it.

I wrote these 2 functions

function getCountry(ip) {
    var surl = "http://www.geobytes.com/IpLocator.htm?GetLocation&template=json.txt";
    $.ajax({
        url: surl,
        data: '{"ipaddress":"' + ip + '"}',
        dataType: "jsonp",
        processData: false,
        jsonpCallback: "jsonpcallback",
        error: function (xhr, status, error) {
            alert(xhr.responseText);
        }
    });
}

function jsonpcallback(rtndata) {
    alert(rtndata.message);
}

The call is executed successfully, these are my response headers:

HTTP/1.1 200 OK
Date: Sat, 17 Nov 2012 12:43:54 GMT
Expires: 0
Content-type: text/html
Transfer-Encoding: chunked

the returned data is JSON, but I get

warning: Resource interpreted as Script but transferred with MIME type text/html: "http://www.geobytes.com/IpLocator.htm?GetLocation&template=json.txt&callback=jsonpcallback&{%22ipaddress%22:%22200.167.254.166%22}&_=1353148931121"

Error on the remote IpLocator.htm: Uncaught SyntaxError: Unexpected token :

The error is thrown on the returned data at

{"geobytes":{"countryid":117,

I think is maybe because it's 117 and not "117" but I obviously can't control the returned data. Tried to add a "processData=false" but that didn't help.

I've added the error handling to the ajax and get "parsererror" on the status

How can I fix this?

Answer 1

Try to modify the field dataType like this:

...
dataType: "jsonp json",
...

In this way the data yo get will be parsed as json.

Following the documentation:

The type of data that you're expecting back from the server. If none is specified, jQuery will try >to infer it based on the MIME type of the response.

In your case the MIME you get is text/html, adding the "json" value to the dataType, you tell jQuery to treat the response as json and not text.

If the service do not support JSONP you can make your own proxy page to handle the request, or using YQL as described here: Cross-Domain request when server does NOT support JSONP

Answer 2

Thank you to no.andrea for pointing me to the right direction!

As I'm using MVC3 I've added a new controller

[HttpPost]
public JsonResult JsonGetCountry(string ip)
{
    try
    {
        var sb = new StringBuilder();
        sb.Append("http://www.geobytes.com/IpLocator.htm?GetLocation");
        sb.Append("&template=json.txt");
        sb.Append("&IpAddress=");
        sb.Append(ip);

        var webClient = new WebClient();
        var data = webClient.OpenRead(sb.ToString());

        if (data == null) { return Json(""); }

        var reader = new StreamReader(data);
        var msg = reader.ReadToEnd();
        data.Close();
        reader.Close();

        return Json(msg);
    }
    catch (Exception ex)
    {
        throw new Exception(ex.Message, ex);
    }
}

and updated my JQuery function to

function getCountry(ip) {
    $.ajax({
        type: "POST",
        url: "/My-Shop/IP/JsonGetCountry",
        data: '{"ip":"' + ip + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            var a = $.parseJSON(msg);
            alert(a.geobytes.iso2);
        },
        error: function (ex) {
            alert(ex.statusText);
    }
});

And that fixed all my problems :)