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

推荐答案

// www.javascriptcn.com code example
function jsonp(url, callback) {
    // 创建一个唯一的回调函数名
    const callbackName = `jsonp_callback_${Math.random().toString(36).substr(2)}`;

    // 将回调函数挂载到全局对象上
    window[callbackName] = function(data) {
        // 调用传入的回调函数
        callback(data);
        // 清理全局对象上的回调函数
        delete window[callbackName];
        // 移除script标签
        document.body.removeChild(script);
    };

    // 创建script标签
    const script = document.createElement('script');
    script.src = `${url}?callback=${callbackName}`;
    document.body.appendChild(script);
}

本题详细解读

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', function(data) {
    console.log('Received data:', data);
});

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