Ajax跨越请求失败,解决

时间 2019-12-15

标签 ajax 跨越请求失败解决栏目 Ajax 繁體版

原文原文链接

跨越请求

1.1什么是跨域（两个不一样系统之间的访问、调用）

（1）域名不一样，即两个不一样的应用。javascript

（2）域名相同，可是端口不一样，即同一个应用中的不一样子系统。html

1.2 Ajax跨域请求的缺陷

（1）建立testJsonp.jsp页面java

<%@ 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跨越请求失败了。jquery

解决方案：jsonp跨域

在前面的测试中，咱们发现Ajax跨越请求时，json数据被浏览器禁用了。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数据。