JSONP 回调问题答案

【问题标题】：JSONP callback issueJSONP 回调问题
【发布时间】：2013-04-29 19:16:51
【问题描述】：

我正在尝试让 JSONP 与在 Arduino 上运行的服务器一起工作。这是我的 JS 代码：

window.onload = init;

function init()
{
    //alert("Test");
    SendRequest();
}

function SendRequest()
{
    alert("Sending request");
    var url = "http://192.168.1.177";
    var request = new XMLHttpRequest();
    request.open("GET", url);
    request.error = function(e) {
            alert("ERROR");
        };
    request.send(null);
}


function ArduinoJSONP()
{
    alert("Callback received!!!");
}

回调函数永远不会到达。

但如果我只是将浏览器直接指向 Arduino IP，我会在浏览器中看到以下内容：

ArduinoJSONP({"data": 12345})

所以看起来服务器正在以正确的 JSONP 格式发送响应，但不知何故该函数没有被调用。 JS调用该函数还需要其他什么吗？我什至尝试将函数移动到 HTML 正文，但它也没有帮助。

谢谢。

【问题讨论】：

标签： html callback jsonp

【解决方案1】：

您根本没有处理服务器响应。如果您在没有任何库的情况下执行此操作，则需要 eval 服务器返回的结果。

实际上 JSONP 实现不是 XHR，您必须将其作为脚本标记注入到具有正确 src 属性的 html 中。

只需使用已经为您抽象了所有这些逻辑的库。

只需将脚本标签注入 HTML 树：

function SendRequest()
{
    var element = document.createElement('script'); 
    var s = document.getElementsByTagName('script')[0];
    element.type = 'text/javascript'; 
    element.async = true;
    element.src = 'http://192.168.1.177';
    s.parentNode.insertBefore(element, s);
}

你可以用唯一的 id 来标记它。连接到 onload 事件并在执行后删除该脚本。

【讨论】：

谢谢。我是新手，所以请耐心等待细节。你说的对。 JSONP 不是 XHR，但 Arduino 服务器无法处理 JSONP 请求，所以我使用 XHR 只是为了连接到 Arduino 服务器。服务器将看到来自客户端的连接并使用 JSONP 进行回复。
谢谢。有效！我不知道需要“脚本”元素。将对此进行更多阅读。非常感谢。