JSONP接口调用案例

在前端开发中，由于浏览器的同源策略限制，JavaScript无法直接调用跨域的接口。而JSONP（JSON with Padding）是一种跨域请求的解决方案。 JSONP通过动态创建`<script>`标签来实现跨域请求。具体步骤如下： 1. 在前端页面中创建一个回调函数，该函数用于处理从第三方接口返回的数据。 2. 构造一个包含回调函数名的URL，将该URL作为`src`属性赋值给`<script>`标签。 3. 第三方接口在接收到请求后，将数据包装在回调函数中返回给前端。 4. 前端页面中的回调函数被调用，从而获取到第三方接口返回的数据。 下面是一个简单的示例代码： ```javascript function handleResponse(data) { // 处理从第三方接口返回的数据 console.log(data); } // 构造URL并创建<script>标签 var url = 'http://example.com/api?callback=handleResponse'; var script = document.createElement('script'); script.src = url; // 将<script>标签添加到页面中 document.head.appendChild(script); ``` 在上述代码中，`handleResponse`函数是前端页面中定义的回调函数，用于处理从第三方接口返回的数据。`url`变量是构造的包含回调函数名的URL，其中`callback=handleResponse`表示将回调函数名传递给第三方接口。通过动态创建`<script>`标签并将URL赋值给`src`属性，实现了对第三方接口的调用。 需要注意的是，使用JSONP存在一些安全风险，因为它是通过动态创建`<script>`标签来加载外部脚本，所以需要确保第三方接口的可信性，避免被注入恶意代码。