一:入门小demo:
在工程1添加一个新页面test1.jsp,内容如下:(工程1url地址: http://localhost:8084/test1.jsp)
该页面主要内容:添加一个按钮,请求地址为工程2的test2.jsp页面,关键代码:
<bdy>
<button type="button" id="testJsonp">jsonp Demo</button>
</body>
<script type="text/javascript">
$("#testJsonp").click(function(){
$.get("http://localhost:8083/test2.jsp", function (data) {
console.log(data);
})
})
</script>
在工程2天假一个新页面test2.jsp内容如下:(工程2url地址:
http://localhost:8083/test2.jsp )
当点击该按钮时,报错,信息如下:
错误的大概意思就是:远程资源加载失败。
二:同源策略
到这里,就要普及一个概念:“同源策略”
所谓同源策略,就是指,域名,协议,端口相同。说白了,就是当前域不能访问其他域的东西。如下图所示:
为了实现跨域访问,我们了解了jsonp…...
JSONP 是 JSON with padding(填充式 JSON 或参数式JSON)的简写。
1·JSONP实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的src不受同源策略约束来跨域获取数据。
2·JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
三 实现跨域方法
方法一:动态生成script标签,向该标签添加src属性值。
为什么这样可以?(凡是拥有“src”这个属性的标签都拥有跨域的能力,比如<script>,<img>,<iframe>等等。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP实现跨域2</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript">
function handleResponse(response){
console.log(response);
}
</script>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
};
};
</script>
</html>
方法二:通过jquery的$.ajax调用异域的内容。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta charset="UTF-8">
<title>jQuery实现JSONP</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "GET",
dataType : "jsonp", // 返回的数据类型,设置为JSONP方式
jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback: 'handleResponse', //设置回调函数名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log('状态为:' + status + ',状态是:' + xhr.statusText);
console.log(response);
}
});
});
});
</script>
</html>
方法三:$.getJSON()方法跨域。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta charset="UTF-8">
<title>jQuery实现JSONP</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){
console.log(data);
});
});
});
</script>
</html>