使用 JSONP 的 AJAX 跨域数据

Question

我正在尝试从 Geobytes 获取数据。 其中一个模板返回 JSON，我需要跨域访问它。

我写了这两个函数

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);
}

调用成功执行，这些是我的响应头：

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

返回的数据是 JSON，但我得到

警告：资源被解释为脚本但使用 MIME 类型 text/html 传输：“http://www.geobytes.com/IpLocator.htm?GetLocation&template=json.txt&callback=jsonpcallback&{%22ipaddress%22:%22200.167.254.166%22} &_=1353148931121"

远程 IpLocator.htm 上的错误：Uncaught SyntaxError: Unexpected token :

在返回的数据上抛出错误

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

我认为可能是因为它是 117 而不是“117”，但我显然无法控制返回的数据。 试图添加一个“processData=false”，但这没有帮助。

我已将错误处理添加到 ajax 并在状态上获得“解析器错误”

我怎样才能解决这个问题？

Answer 1

尝试像这样修改字段 dataType：

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

这样你得到的数据将被解析为json。

按照文档：

您期望从服务器返回的数据类型。 如果没有指定，jQuery 将尝试根据响应的 MIME 类型推断它。

在您的情况下，您获得的 MIME 是 text/html，将“json”值添加到 dataType，您告诉 jQuery 将响应视为 json 而不是文本。

如果该服务不支持 JSONP，您可以制作自己的代理页面来处理请求，或使用 YQL 如下所述： 服务器不支持 JSONP 时的跨域请求

Answer 2

感谢no.andrea为我指明了正确的方向！

当我使用 MVC3 时，我添加了一个新控制器

[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);
    }
}

并将我的 JQuery 函数更新为

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);
    }
});

这解决了我所有的问题:)