原生js实现jsonp 跨域

JSONP（JSON with Padding）是一种通过<script>标签实现跨域请求的技术。由于浏览器的同源策略限制，通常情况下，JavaScript只能请求与其自身来源相同的资源。JSONP通过动态创建<script>标签，利用其不受同源策略限制的特性，实现跨域数据交互。

基础概念

JSONP 的工作原理是利用 <script> 标签的 src 属性没有跨域限制的特点，服务器返回的数据会被包裹在一个函数调用中，这个函数名通常由客户端指定并通过 URL 参数传递给服务器。

优势

兼容性好：JSONP兼容所有浏览器，包括一些较老的浏览器。
实现简单：只需服务器端配合返回特定格式的数据即可。

类型

JSONP主要分为两种类型：

简单JSONP：客户端定义一个回调函数，服务器返回的数据直接调用这个函数。
动态JSONP：客户端动态创建<script>标签，并设置其src属性为跨域请求的URL。

应用场景

跨域获取数据：当需要从其他域名获取数据时，可以使用JSONP。
第三方API集成：很多第三方服务提供的API支持JSONP，以便在不同域名下使用。

实现示例

以下是一个简单的原生JavaScript实现JSONP的例子：

function jsonp(url, callbackName, callback) {
    // 创建一个全局回调函数
    window[callbackName] = function(data) {
        callback(data);
        // 清理工作：删除script标签和全局回调函数
        document.body.removeChild(script);
        delete window[callbackName];
    };

    // 创建script标签
    var script = document.createElement('script');
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
    document.body.appendChild(script);
}

// 使用示例
jsonp('http://example.com/api/data', 'myCallback', function(data) {
    console.log('Received data:', data);
});

可能遇到的问题及解决方法

问题1：回调函数未定义

原因：服务器返回的数据中没有正确调用客户端指定的回调函数。
解决方法：检查服务器端代码，确保返回的数据格式正确，如myCallback({"data": "value"})。

问题2：安全问题

原因：JSONP容易受到XSS攻击，因为它允许执行跨域的JavaScript代码。
解决方法：尽量只在可信的网站上使用JSONP，并考虑使用CORS作为更安全的替代方案。

问题3：错误处理

原因：如果请求失败（例如，URL错误或服务器无响应），JSONP不会有任何错误提示。
解决方法：可以通过设置一个超时机制来处理请求失败的情况，例如使用setTimeout并在超时后删除script标签和回调函数。

function jsonp(url, callbackName, callback) {
    var script = document.createElement('script');
    var timeoutId;

    function cleanup() {
        if (script.parentNode) script.parentNode.removeChild(script);
        window[callbackName] = undefined;
        clearTimeout(timeoutId);
    }

    window[callbackName] = function(data) {
        cleanup();
        callback(data);
    };

    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
    document.body.appendChild(script);

    timeoutId = setTimeout(function() {
        cleanup();
        console.error('JSONP request timed out');
    }, 5000); // 设置超时时间为5秒
}

通过以上方法，可以在一定程度上解决JSONP实现过程中可能遇到的问题。