JSONP 教程

JSONP(JSON with Padding)是一种跨域数据请求方式,它利用了 HTML <script> 标签没有跨域限制的特性来实现跨域数据请求。虽然 JSONP 已经被 CORS 所替代,但在一些特定场景下仍然有其用武之地。

JSONP 的原理

JSONP 的原理其实很简单,就是利用 script 标签的跨域特性来加载一个远程脚本,该脚本返回一个函数调用,函数的参数就是需要传递的数据。这样就实现了跨域数据请求。

JSONP 的使用步骤

  1. 创建一个 script 标签
  2. 设置 script 标签的 src 属性为目标 API 地址,并在 URL 中指定一个回调函数名
  3. 在全局范围内定义一个与回调函数名相同的函数,该函数的参数就是需要处理的数据
  4. 当 script 标签加载完毕后,会自动执行定义的回调函数,从而获取到数据

JSONP 示例代码

--------- -----
----- ----------
------
    ----- ----------------
    ----- ---------------------------- ------------------
    ----- --------------- ---------------------------- -------------------
    ------------ ---------------
-------
------
    --------
        -------- ---------------- -
            ------------------
        -

        ----- ------ - ---------------------------------------------------
        ----- ------ - ---------------------------------
        ---------- - -------
        ----------------------------------
    ---------
-------
-------

在上面的示例代码中,我们创建了一个名为 handleData 的全局函数来处理返回的数据,并通过设置 script 标签的 src 属性来加载远程数据。

这就是 JSONP 的基本用法,通过这种方式可以实现跨域数据请求,但需要注意的是 JSONP 存在一些安全风险,因为它是通过动态加载脚本来实现的,可能会被注入恶意代码。因此在使用 JSONP 时要注意数据的安全性。


上一篇:JSON 使用