原生 JSON

现代 JSON 处理

在现代浏览器中（如 Firefox 3.5 和 IE8），已经原生支持 JSON 对象，因此可以直接使用以下方法处理 JSON 数据：

解析 JSON：

var myObject = JSON.parse(myJSONtext);

创建 JSON：

var myJSONText = JSON.stringify(myObject);

旧方法

在旧版浏览器中，可以使用以下语法解析 JSON 数据：

var myObject = eval("(" + myJSONtext + ")");

注意： 这种方法存在安全问题，如跨站脚本攻击 (XSS)，因此不推荐使用。

JSONP

什么是 JSONP？

JSONP（JSON with Padding）是一种解决跨域限制的方法。由于浏览器的跨域限制（如仅通过 HTML5 的服务器头或非标准方式允许跨域），JSONP 使用动态插入 HTML <script> 标签的方式，加载目标站点的 JSON 数据。目标站点返回的数据通常被包装在一个函数调用中，该函数名由请求者通过 callback 参数指定。

简单的 PHP 示例

以下是一个简单的 JSONP 响应示例：

<?php
if (isset($_GET['callback'])) {
  header('Content-Type: application/javascript');
  $our_site_data = ...; // 设置要返回的数据
  print $_GET['callback'] . '(' . json_encode($our_site_data) . ');';
}
?>

自定义 JSONP 请求代码

使用以下自定义代码发送 JSONP 请求：

<script>
var JSONP = function(global) {
  function JSONP(uri, callback) {
    function JSONPResponse() {
      try { delete JSONP[src]; } catch(e) { JSONP[src] = null; }
      documentElement.removeChild(script);
      if (typeof callback === 'string') {
        document.getElementById(callback).innerHTML = arguments[0];
      } else {
        callback.apply(this, arguments);
      }
    }
    var src = '_' + id++,
        script = document.createElement("script");
    JSONP[src] = JSONPResponse;
    documentElement.insertBefore(
      script,
      documentElement.lastChild
    ).src = uri + (uri.indexOf('?') === -1 ? '?' : '&') + "callback=JSONP." + src;
  }
  var id = 0, documentElement = document.documentElement;
  return JSONP;
}(this);

// 示例：调用 MediaWiki API 获取页面解析后的 HTML 内容
JSONP('http://en.wikibooks.org/w/api.php?action=parse&format=json&page=JavaScript/Handling_JSON',
  function (data) {
    alert(data.parse.text['*']);
  }
);
</script>

注意事项

  1. 跨站脚本攻击 (XSS)
    JSONP 代码可能会运行目标站点的代码，如果目标站点或返回的数据不受信任，可能会导致 XSS 攻击。因此，仅在可信任的数据源中使用 JSONP。

  2. 跨域限制替代方案
    使用现代技术（如 CORS 或服务器代理）解决跨域问题是更推荐的方式。

参考资料

Last modified: Monday, 13 January 2025, 3:15 PM