js 原生jsonp怎么取出

要从 JavaScript 原生 JSONP 中取出数据，主要步骤包括：通过动态生成 <script> 标签加载数据、定义回调函数来接收数据、确保数据格式正确。这个过程的核心步骤包括：动态生成脚本标签、指定回调函数、处理跨域请求等。下面将详细描述这个过程，并提供相关示例代码。

在现代Web开发中，跨域请求（CORS）是一个常见的问题。JSONP（JSON with Padding）是一种解决跨域请求问题的技术。虽然由于安全性和灵活性的问题，JSONP逐渐被CORS和其他技术替代，但在某些场景下仍然有其应用价值。

一、动态生成`<script>`标签

JSONP的核心思想是利用<script>标签可以跨域加载资源的特性。我们可以动态生成一个<script>标签，并将其src属性设置为目标服务器的URL。

function loadJSONP(url) {
    const script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);
}

二、定义回调函数

在请求JSONP数据时，需要在URL中指定一个回调函数的名字。目标服务器会将数据包裹在这个回调函数中返回。我们需要提前定义好这个回调函数。

function handleResponse(data) {
    console.log(data);  // 处理接收到的数据
}

三、请求数据

将前面定义的回调函数名称作为参数传递给目标服务器，目标服务器会将数据包裹在这个回调函数中返回。

const url = 'https://example.com/data?callback=handleResponse';
loadJSONP(url);

四、示例代码整合

将上述步骤整合在一起，我们就可以通过JSONP方式从服务器获取数据了。

<!DOCTYPE html>
<html>
<head>
    <title>JSONP Example</title>
</head>
<body>
    <h1>JSONP Example</h1>
    <script>
        function loadJSONP(url) {
            const script = document.createElement('script');
            script.src = url;
            document.body.appendChild(script);
        }
        function handleResponse(data) {
            console.log(data);  // 处理接收到的数据
            // 这里可以进行更多的数据处理逻辑
        }
        const url = 'https://example.com/data?callback=handleResponse';
        loadJSONP(url);
    </script>
</body>
</html>

五、JSONP的优缺点

优点

简单易用：JSONP非常简单，不需要复杂的服务器配置。
跨域请求：能够轻松实现跨域请求，这是其最大的优势。

缺点

安全性问题：由于JSONP直接执行返回的脚本，存在XSS（跨站脚本攻击）的风险。
只支持GET请求：JSONP只能通过GET请求发送数据，限制了其应用场景。
依赖服务器支持：服务器需要支持JSONP并正确处理回调函数。

六、现代替代技术

虽然JSONP曾经是解决跨域请求问题的有效方法，但随着技术的发展，现代浏览器提供了更安全和灵活的解决方案，比如CORS（跨域资源共享）和服务器代理。

CORS

CORS是一种更安全和标准的跨域请求解决方案。通过服务器配置，可以允许特定的域名访问资源。

fetch('https://example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

服务器代理

通过服务器代理，可以在同源策略下实现跨域请求。服务器代理的基本思想是通过中间服务器转发请求，从而避免跨域问题。

const express = require('express');
const app = express();
const axios = require('axios');
app.get('/proxy', (req, res) => {
    const targetUrl = 'https://example.com/data';
    axios.get(targetUrl)
        .then(response => res.json(response.data))
        .catch(error => res.status(500).send(error));
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

七、总结

JSONP是一种古老但有效的跨域请求技术，通过动态生成<script>标签和回调函数实现数据交互。尽管存在安全性和灵活性的问题，但在某些特定场景下仍然有其应用价值。现代Web开发中，CORS和服务器代理是更加安全和灵活的跨域请求解决方案。无论选择哪种技术，都需要根据具体的应用场景和需求做出合理的决策。

在团队协作和项目管理中，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，这些工具能够帮助团队更高效地进行项目管理和任务分配。