实现一个函数 jsonp(url, callback),发送 JSONP 请求

推荐答案

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

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

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

本题详细解读

1. 什么是JSONP?

JSONP(JSON with Padding)是一种跨域数据请求的技术。由于浏览器的同源策略,普通的AJAX请求不能跨域访问数据。JSONP通过动态创建<script>标签来绕过这一限制,因为<script>标签的src属性不受同源策略的限制。

2. 实现原理

  • 动态创建<script>标签:通过JavaScript动态创建一个<script>标签,并将其src属性设置为目标URL。这个URL通常包含一个回调函数名作为查询参数。
  • 回调函数:服务器端接收到请求后,会将数据包裹在回调函数中返回。例如,如果回调函数名为callbackName,服务器会返回类似callbackName(data)的响应。
  • 全局回调函数:在客户端,我们需要在全局对象(通常是window)上定义一个与回调函数名相同的函数。当<script>标签加载并执行时,这个全局函数会被调用,从而处理返回的数据。

3. 代码解析

  • 唯一回调函数名:为了避免全局命名冲突,我们使用Math.random()生成一个唯一的回调函数名。
  • 挂载回调函数:将回调函数挂载到window对象上,以便在<script>标签加载时能够调用。
  • 清理工作:在回调函数执行完毕后,删除全局对象上的回调函数,并移除<script>标签,以避免内存泄漏。

4. 使用示例

在这个示例中,jsonp函数会向https://example.com/api/data发送一个JSONP请求,并在数据返回时调用传入的回调函数。

纠错
反馈