资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

JSONP Example

创作时间:

作者:

@小白创作中心

JSONP Example

引用

来源

https://docs.pingcode.com/baike/2543746

jsonp如何用js提取：通过动态创建script标签、使用回调函数、设置跨域请求。JSONP（JSON with Padding）是一种解决跨域请求问题的技术。具体来说，它通过动态创建script标签来发送请求，并使用回调函数处理返回的数据。下面我们将详细解释如何使用JSONP进行跨域请求，并提取数据。

一、JSONP的基本概念

JSONP是一种非官方协议，它允许网页从另一个域获取数据，而不会受到同源策略的限制。JSONP的核心思想是利用script标签的src属性可以加载并执行跨域的JavaScript代码。通过在请求中指定一个回调函数名，服务器将回调函数名和数据一起返回，浏览器解析并执行这段代码，从而实现跨域数据的获取。

二、动态创建script标签

动态创建script标签是实现JSONP请求的第一步。在JavaScript中，可以使用

document.createElement

方法创建一个新的script标签，并设置其src属性为目标URL。这个URL包含了请求参数和回调函数名。


function loadJSONP(url, callbackName) {  

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

在这个例子中，我们定义了一个

loadJSONP

函数，它接受两个参数：目标URL和回调函数名。然后，我们创建一个新的script标签，并将其src属性设置为目标URL和回调函数名的组合。最后，我们将script标签添加到文档的body中。

三、使用回调函数处理返回数据

JSONP请求的关键在于使用回调函数处理返回的数据。服务器返回的数据会被包裹在一个函数调用中，这个函数的名字就是我们在请求中指定的回调函数名。为了处理返回的数据，我们需要在页面中定义这个回调函数。


function handleResponse(data) {  

    console.log('Received data:', data);  
}  
loadJSONP('https://example.com/api', 'handleResponse');

在这个例子中，我们定义了一个名为

handleResponse

的函数，它接受一个参数data，并将其打印到控制台。然后，我们调用

loadJSONP

函数，传入目标URL和回调函数名

handleResponse

。当服务器返回数据时，它会调用

handleResponse

函数，并传入数据作为参数。

四、处理JSONP请求中的跨域问题

JSONP的优势在于可以绕过同源策略的限制，实现跨域请求。然而，这种方法也有其局限性。首先，JSONP只能用于GET请求，而不能用于POST请求。其次，JSONP存在一定的安全风险，因为它执行的是跨域脚本，容易受到XSS（跨站脚本攻击）的威胁。

为了提高安全性，可以在服务器端进行一些安全检查，如验证请求的来源、对返回的数据进行编码等。此外，尽量避免在生产环境中使用JSONP，而是使用更安全的跨域请求方法，如CORS（跨域资源共享）。

五、JSONP的应用场景

JSONP主要用于以下几个场景：

跨域数据获取：当需要从不同域获取数据时，可以使用JSONP来绕过同源策略的限制。
第三方API调用：许多第三方API（如微博、Twitter等）提供了JSONP接口，方便开发者在网页中调用。
动态脚本加载：通过JSONP，可以动态加载并执行外部JavaScript代码，实现模块化开发。

六、JSONP的替代方案

虽然JSONP在一定程度上解决了跨域请求的问题，但它也存在一些局限性和安全风险。为了更好地处理跨域请求，现代浏览器和服务器提供了更安全、更灵活的解决方案，如CORS（跨域资源共享）和服务器代理。

CORS（跨域资源共享）：CORS是一种标准的跨域请求方法，它允许服务器通过设置HTTP头部，来指定哪些域名可以访问资源。相比JSONP，CORS更加安全和灵活。

服务器代理：通过在服务器端设置代理，可以将跨域请求转发到目标服务器。这样，客户端只需与本地服务器通信，而不需要直接与目标服务器进行跨域请求。

七、总结

JSONP通过动态创建script标签、使用回调函数、设置跨域请求，解决了同源策略的限制，实现了跨域数据的获取。然而，JSONP也存在一些局限性和安全风险。在实际应用中，可以根据具体需求选择合适的跨域请求方法，如CORS或服务器代理。

核心要点：通过动态创建script标签、使用回调函数、设置跨域请求。

JSONP是一种简便的跨域请求技术，但在现代Web开发中，建议优先选择更安全和灵活的解决方案，如CORS或服务器代理。

八、示例代码

为了更好地理解JSONP的工作原理，下面是一个完整的示例代码：


<!DOCTYPE html>  

<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>JSONP Example</title>  
</head>  
<body>  
    <h1>JSONP Example</h1>  
    <div id="result"></div>  
    <script>  
        function handleResponse(data) {  
            document.getElementById('result').innerText = 'Received data: ' + JSON.stringify(data);  
        }  
        function loadJSONP(url, callbackName) {  
            const script = document.createElement('script');  
            script.src = `${url}?callback=${callbackName}`;  
            document.body.appendChild(script);  
        }  
        loadJSONP('https://example.com/api', 'handleResponse');  
    </script>  
</body>  
</html>

在这个例子中，我们创建了一个简单的HTML页面，包含一个

div

元素用于显示返回的数据。我们定义了一个

handleResponse

函数，用于处理返回的数据，并将其显示在页面上。然后，我们调用

loadJSONP

函数，发送JSONP请求。

通过这个示例代码，可以直观地看到JSONP如何通过动态创建script标签、使用回调函数、设置跨域请求，来实现跨域数据的获取。