-
json如果要进一步的衍生,那么就可以使用jsonp的概念了
-
模拟一个跨域的访问问题
-
为了可以配置不同的域名,建议修改hosts文件:
- C:\Windows\System32\drivers\etc\hosts
-
本机的IP地址为:192.168.0.104,下面就以这个IP地址配置两个域名.
-
在hosts文件结尾添加一下两行语句
127.0.0.1 www.a.com
127.0.0.1 www.b.com
-
虽然有两个两个域名,但是最终也需要进行数据的读取,所以为了方便起见,此时需要两个不同的Tomcat环境
-
在tomcat的根目录下的Root目录中编写一个json.jsp页面
<% page pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
%>
{"name":"maoshu","url":"www.maoshu.com"}
- 复制ROOT目录中的json.jsp文件,WEB-INF文件夹,和jQuery的js文件拷贝到磁盘中的另一个目录下,例如:E:/jsonpws
- 然后将这个目录配置到tomcat的虚拟目录,修改tomcat安装路径中的Tomcat\apache-tomcat-9.0.13\conf\server.xml文件
- 在server.xml文件中在 <HOST>元素中添加一下内容
<Context path="/" docBase="e:\jsonpws" reloadable="true"/>
-
随后在外部打开tomcat
-
随后在网页中访问,可以配置不输入端口号
http://www.a.com:8080/read_data.html
- 在e:/jsponws目录下创建一个read_data.html文件,用于读取数据操作.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<title>Ajax异步处理</title>
<script type="text/javascript">
$(function(){
$.post("json.jsp",{},function(data){
$("#showDiv").append("<p>name="+data.name+",url="+data.url+"</p>");
},"json");
});
</script>
</head>
<body>
<!--请求回应显示层-->
<div id="showDiv">
</div>
</body>
</html>
- 如果此时在同一个与名下进行数据的异步加载,可以轻松实现,如果换种形式,在www.a.com read_data.html.而读取的是的是在www.b.com/json.jsp,那么ajax代码修改如下
$(function(){
$.post("http://www.b.com:8080/json.jsp",{},function(data){
$("#showDiv").append("<p>name="+data.name+",url="+data.url+"</p>");
},"json");
});
- 表示在当前的环境之中,www.a.com.read_data.html页面无法异步加载www.b.com/json.jsp数据信息,在这种情况下,如果非要进行跨域数据的访问,那么就必须使用jsonp来进行处理.
处理jsonpcallback
- 要进行jsonp处理,只需在请求路径中添加一个参数"jsonpcallback=参数内容",告诉服务器,此次请求使用jsonp处理完成
修改json.jsp文件
<%@ page pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String jsonpcallback = request.getParameter("jsonpcallback");
//将数据打印到页面之中
out.print(jsonpcallback+"({\"name\":\"maoshu\",\"url\":\"www.maoshu.com\"})");
%>
- 对于此时的前台页面,由于要使用jsonp来进行处理了,所以数据之中无法再进行直接的调用,那么需要使用ajax()元素函数来进行处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<title>Ajax异步处理</title>
<script type="text/javascript">
$(function(){
$.ajax({
url:"http://www.b.com:8080/json.jsp",
method:"post",
data:{
msg:"hello",
did:10
},
dataType:"jsonp",//返回的数据类型为jsonp类型
jsonp:"jsonpcallback",
success:function(data){
$("#showDiv").append("<p>name="+data.name+",url="+data.url+"</p>");
},
error:function(){
alert("请求错误");
}
});
});
</script>
</head>
<body>
<!--请求回应显示层-->
<div id="showDiv">
</div>
</body>
</html>
- 实际上在jQuery处理过程之中,也考虑到用户可能的需求简化操作,提供有一个"$.getJSON()"处理函数这个处理函数可以直接实现JSONP的处理,但是需要记住,JSONP需要一个jsoncallback的参数.
使用getJSON()函数处理
- 在e:/jsonpws目录下新建一个read_data2.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<title>Ajax异步处理</title>
<script type="text/javascript">
$(function(){
var url="http://www.b.com:8080/json.jsp?jsonpcallback=?";
$.getJSON(url,{msg:'hello',did:10},function(data){
$("#showDiv").append("<p>name="+data.name+",url="+data.url+"</p>");
},
"json");
});
</script>
</head>
<body>
<!--请求回应显示层-->
<div id="showDiv">
</div>
</body>
</html>
- 执行http://www.a.com:8080/read_data2.html结果
- getJSON()函数可以简化取得JSON数据对象