从 Javascript 调用 JSONP Ajax 回调

Posted 2023-03-03

【中文标题】从 Javascript 调用 JSONP Ajax 回调

【英文标题】：Calling JSONP Ajax Callback from Javascript

【发布时间】：2012-09-12 01:12:53

【问题描述】：

我正在尝试发送 JSONP Ajax 请求（从 client.htm 到 proxy.htm），该请求由代理页面接收，该页面创建另一个不同的 Ajax JSONP 请求到服务（proxy.htm ---> 服务.php）。目前代理页面从服务接收 JSON 格式对象，但我坚持将对象返回到第一个初始 Ajax 请求。以下是我尝试运行的示例代码。 javascript可以做到这一点吗？如果是这样，我如何将对象返回给 clientCallback 函数。

Client.htm

// CLIENT ---> PROXY
$(document).ready(function () 
     $.ajax(
            type: 'GET',
            url: 'http://localhost/jsonp_proxy/listener.htm',
            dataType: 'jsonp',
            jsonpCallback: "clientCallback",
            success: function (theData) 
              alert("Success");
            ,
            error: function (xhr, ajaxOptions, thrownError) 
              alert("Error");
            
        );
      );
      window.clientCallback = function(results) 
        alert(results.uid);
      

Proxy.htm

      // PROXY ---> SERVER
      $(document).ready(function () 
        $.ajax(
          type: 'GET',
          url: 'http://localhost/jsonp_server/service.php',
          dataType: 'jsonp',
          jsonpCallback: "proxyCallback",      
          success: function (theData) 
//          alert("Success");
          ,
          error: function (xhr, ajaxOptions, thrownError) 
//          alert("Error");
          
        );
      );
      window.proxyCallback = function(resultData) 
        // HOW TO CALL CLIENT CALLBACK FUNCTION
      

Service.php

<?php
echo "proxyCallback("."'uid': 123, 'username': 'jdirt', 'name': 'Joe Dirt'".");";
?>

【参考方案1】：

eval 的少数半有效用途之一：

success: function (theData) 
  eval("(" + theData + ")");
  //alert("Success");

提醒一下，JSONP 存在黑客攻击和安全风险。你给予了第三者很大的信任和控制权。

【讨论】：

感谢您的回复，但这并不能返回 client.htm 页面。 Ajax 进入错误函数。

永远不要使用 eval()。使用 JSON.parse()。

@saml -- 通常我会同意，但JSONP 与JSON 略有不同。 JSONP 是可执行代码，必须是evaled，因为它包含一个内部回调处理程序。

@JeremyJStarcher JSONP 请求永远不会将源返回给您，除非将一些参数传递给您请求它的函数。您无法评估任何内容，因为只有在浏览器完成从远程服务器加载代码时才会触发成功和失败回调，即使回调本身会引发异常。

【参考方案2】：

只需从 window.proxyCallback 调用 window.clientCallback。

【讨论】：

“不起作用”是描述失败的一种极其模糊的方式。发生了什么？发生的事情没有按照您的预期进行怎么办？你实际尝试了什么？

好的，所以我尝试从 window.proxyCallback 调用 window.clientCallback 但是当我浏览 client.htm 请求进入错误函数请求。我尝试调用这些函数而不使它们成为全局函数，我得到了相同的结果。从 PHP 页面调用 proxyCallback 可以正常工作，但我似乎找不到使用 Javascript 执行相同操作的方法

你为什么使用 jsonp 这个？

很大程度上是对现有服务的轻微修改。实际服务是用 C# 编写的，并附带使用 JSONP 从服务获取数据的示例网页。请注意，网页和服务是完整的，但由于设计（我无法控制），我发现自己试图完成这项工作。根据您的问题和其他回复，这似乎不是最好的方法，这是正确的吗？如果是这样，有什么更好的方法？