Ajax跨越请求失败,解决
程序员文章站
2022-04-30 22:41:57
跨越请求 1.1什么是跨域（两个不同系统之间的访问、调用） （1）域名不同，即两个不同的应用。 （2）域名相同，但是端口不同，即同一个应用中的不同子系统。 1.2 Ajax跨域请求的缺陷 （1）创建testJsonp.jsp页面 1.3测试Ajax跨越 测试发现，Ajax跨越请求失败了。 解决方案： ......
跨越请求
1.1什么是跨域（两个不同系统之间的访问、调用）
（1）域名不同，即两个不同的应用。
（2）域名相同，但是端口不同，即同一个应用中的不同子系统。
1.2 ajax跨域请求的缺陷
（1）创建testjsonp.jsp页面
<%@ 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 http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/js/jquery-1.6.4.js"></script>
<title>insert title here</title>
</head>
<body>
<textarea id="text" style="width: 1200px; height: 200px;"></textarea>
<input type="button" value="测试异步跨越" onclick="testajax()" />
<script type="text/javascript">
function testajax(){
$.ajax({
url:"http://localhost:8081/category.json",
type: "get",
success: function (data) {
$("#text").val(json.stringify(data));
}
});
}
</script>
</body>
</html>
1.3测试ajax跨越
测试发现，ajax跨越请求失败了。
解决方案：jsonp跨域
在前面的测试中，我们发现ajax跨越请求时，json数据被浏览器禁用了。
原因：浏览器禁止远程加载json数据。（浏览器安全机制）
如何解决呢？
答：使用jsonp方式。
2.1jsonp原理
2.1.1jsonp 实现的前提：
浏览器允许跨越加载同源数据。
即在javascript脚本中发送请求，就可以远程加载js格式数据。
2.1.2请求原理：
（1）异步请求的时候，加上一个名为callback的回调函数
（2）在接口中，将返回的json格式数据，伪装成js脚本格式。
（3）得到js格式数据后，提取里面的json数据。
2.2 修改testjsonp.jsp，指定异步请求为jsonp方式。
<script type="text/javascript">
function testajax(){
$.ajax({
url:"http://localhost:8081/category.json",
type: "get",
datatype: "jsonp", //jsonp请求
jsonp:"callbackfunction", //请求参数名
jsonpcallback:"showdata", //回调函数名称
success: function (data) {
$("#text").val(json.stringify(data));
}
});
}
</script>
2.3修改category.json文件，将返回数据包装成js脚本。
2.4 再次发送ajax异步请求，使用jsonp方式
结论：
（1）jsonp是ajax技术中的一种异步请求方式。
（2）jsonp能实现跨越请求。
（3）jsonp跨越时，需要指定一个回调函数，并使用该函数将返回的数据伪装成js脚本。
（4）获取返回的js脚本后，jsonp自动提取其中的json数据。