浅谈 JSONP
什么是跨域
特别注意亮点: 什么是 JSONP
什么是同源策略
1. 建两个网页,一个端口是 8080 ,一个端口是 8081。2. 用 jQuery 发送跨域请求$('#redBtn').click(function() {
$.get("http://localhost:8081/js/jquery-3.1.1.min.js",function(data) {
console.log(data)
})
});
JSONP 要解决的就是这个问题。 拥有 src 属性一类 HTML 标签的跨域能力
<script type="text/javascript" src="http://localhost:8081/js/jquery-3.1.1.min.js"></script>
200,请求成功。8080端口向8081端口请求资源,通过 src 请求成功,这就是 JSONP 的基础。 利用 Script 获取 JSON 数据源8081端口新建一个 JOSN 文件,JS 加载完 jsonpcallback({"Email":"issacyoung@msn.cn","Name":"Issac Young"})
从 8080 端口访问 8081 的 JSON 文件,约定俗成的再 QueryString 后加上 callback 参数。 <script type="text/javascript"> function jsonpcallback(data){ console.log(data) } function CreateScript(src) { $("<script><//script>").attr("src",src).appendTo("body") } $('#redBtn').click(function() { CreateScript("http://localhost:8081/jsondata.json?callback=jsonpcallback"); }); </script>
输出成功! jQuery 获取 JSONP上面的方式略显繁琐,庆幸的是 jQuery 已经帮我们做好的封装。 function jsonpcallback(data) {
console.log(data)
}
$('#redBtn').click(function() {
$.ajax({
url: 'http://localhost:8081/jsondata.json',dataType: "jsonp",jsonp: "callback",success: function(data) {
console.log(data)
}
})
});
输出成功。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |