通过JsonP解决跨域问题

最新推荐文章于 2023-11-25 22:02:45 发布

qq_40697588

最新推荐文章于 2023-11-25 22:02:45 发布

阅读量159

点赞数

文章标签：跨域请求 JavaScript JsonP

本文链接：https://blog.youkuaiyun.com/qq_40697588/article/details/100062471

版权

由于浏览器前端的同源策略，我们无法通过页面向非同源的地址发送ajax请求来进行交互，这时候，JsonP策略可以作为一种能够跨域交互的解决方案。

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

原理为，JavaScript标签是可以进行跨域访问的，因此可以通过JavaScript标签，将所需要的数据通过服务器传输到界面，并通过参数的传递想通过回调进行处理的函数，然后进行通过后台服务器进行拼装成js可执行代码返回前台，进行回调。

前台代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
function callbackFunction(result)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    $("#div1").html(html);
}
</script>
<script type="text/javascript" src="https://XXXXXXXXX/XXXX/xxx.do?jsoncallback=callbackFunction"></script>
</body>
</html>

后端返回：

xxx.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
${param.jsoncallback}(["JIM","LILY","ELLEN"])