【问题标题】:3 questions about JSON-P formatJSON-P格式的3个问题
【发布时间】:2011-02-09 10:31:02
【问题描述】:

我必须编写一个托管在不同域上的脚本。该脚本必须从我的服务器获取信息。

所以,stackoverflow 的用户告诉我,我必须使用 JSON-P 格式,经过研究,这就是我要做的。 (JSON-P 中提供的数据用于在其他网站上显示我的服务器上托管的一些信息)

  1. 如何从我的服务器输出 JSON-P?和PHP中的json_encode函数一样吗

  2. 如何设计输出 JSON-P 的树形模式 (你知道,比如:({“name”:“foo”,“id”:“xxxxx”,“blog”:“http://xxxxxx.com”}); 我可以从我的 XML 输出中窃取它吗? (http://bit.ly/9kzBDP)

  3. 每次访问者浏览我的小部件所在的网站时,它都会在我的服务器上发出请求,请求在客户端显示 JSON-P 数据。 这会显着增加 CPU 负载(网站上的 1 个访问者将拥有脚本 = 1 个 SQL 请求在我的服务器上输出数据),所以 有什么方法可以“缓存” JSON-P 信息输出 每天仅刷新一到两次并将其存储到“文件”中(在哪个扩展名中?)。

但另一方面我会说直接请求 JSON-P 数据(不缓存它)是一个优点,因为将集成脚本的网站 只想显示他们的信息,而不是全部数据。所以,用类似的东西制作一个脚本:

jQuery.getJSON("http://www.something.com/json-p/outpout?filter=5&callback=?", function(data) {
................);
});

过滤器=网站想要显示的信息。

  • 额外问题:我必须使用 JS 框架来读取 JSON-P 吗?还是 JS pure 没有任何框架可以包含在页面上?

你怎么看?

非常感谢 ;)

【问题讨论】:

    标签: jquery json cross-domain jsonp


    【解决方案1】:

    您可以使用json_encode 函数获取对象的JSON 字符串表示,然后在其周围添加填充,即:

    $json = json_encode($myObj);
    echo $callback . "(" . $json . ");";
    

    大多数 JSON 结构都严格复制 XML 结构和命名约定。没有后代的单个节点成为属性,重复的 XML 节点将是 JSON 数组,而具有后代的节点是对象。请参阅http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=396 以了解以两种格式表示的数据的并排视图。

    至于在服务器上缓存数据,如果您的流量不太大,大多数缓存方法都可能有点矫枉过正。如果您仍然坚持需要它,请参阅this answer 我自己的问题之一和this answer recommending memcached。您可以使用客户端缓存控制标头expires 来确保客户端即使跨多个页面/刷新也只获取一次数据。

    奖励答案:JSON-P 的美妙之处在于您不需要任何库来解析它。格式是纯 javascript,向页面添加 JSON-P 就像向页面添加脚本一样简单:

    <script 
       type="text/javascript" 
       src="http://myurl.com/jsonp.php?callback=test&filter=5">
    </script>
    

    【讨论】:

    • 好的,谢谢。所以没有 jquery 它会像: document.write(x[i].getElementsByTagName('name')[0].childNodes[0].nodeValue); ? (这个是针对 XML 的,但我不知道如何解析 JSON-P 格式)
    • @Tristran:JSON-P 被浏览器解析为脚本。您的脚本设置了一个功能,例如function myCallback(response) { ... },作为回调函数传递给 JSON-P。当 JSON-P 添加到文档中时,您的回调函数将使用解析的 JSON 对象作为第一个参数(在本示例中为 response)来执行。对象的所有属性都可以通过脚本本地访问,例如var blog = response.blog;.
    • 如果不使用 jQuery,您需要在页面中添加一个脚本元素来为您执行请求,并在成功时解析响应:var scrEl = document.createElement("script"); scrEl.src = "http://myurl.com/jsonp.php?callback=test"; document.getElementsByTagName("head")[0].appendChild(scrEl);
    • 我成功地使用 JSON-P 和 jQuery,但很抱歉,但在 PURE JS 中我无法获得它。请你说得更具体一些,就像 macek 在他的回复中所做的那样?非常感谢!
    【解决方案2】:

    JSONP 请求

    $.ajax({
      type: "get",
      dataType: "jsonp",
      url: "mothership.com/widget_data",
      data: {whatever: "here", requested_from: "someonesblog.com" },
      cache: true,
      success: function(data, textStatus, XMLHttpRequest){
        // respond to ajax call here
    
        // debug: make sure your data is getting loaded properly
        console.log(data);
    
        // do other necessary things here
      }
    });
    

    从服务器编码和输出 JSON

    <?php
      header("Content-Type: application/json");
    
      # You can access data from the jQuery.ajax() call with $_GET here
    
      $data = array(
        "name" => "foo",
        "id"   => 1234,
        "blog" => $_GET["requested_from"]
      );
      echo $_GET["callback"] . "(" . json_encode($data). ");" ;
    
      # this will output something like
      # jsonp1255285823({"name":"foo","id":1234,"blog":"someonesblog.com"});
    
      exit;
    ?>
    

    【讨论】:

    • 谢谢。我想知道知道谁提出请求有什么意义? (允许某些域并阻止其他域?)
    • @Tristan,我不知道你想要什么信息。我使用的数据只是示例数据。调整此示例以满足您的要求:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-21
    • 1970-01-01
    • 1970-01-01
    • 2018-12-12
    相关资源
    最近更新 更多