欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Ajax跨越请求失败,解决

程序员文章站 2023-01-22 16:20:48
跨越请求 1.1什么是跨域(两个不同系统之间的访问、调用) (1)域名不同,即两个不同的应用。 (2)域名相同,但是端口不同,即同一个应用中的不同子系统。 1.2 Ajax跨域请求的缺陷 (1)创建testJsonp.jsp页面 1.3测试Ajax跨越 测试发现,Ajax跨越请求失败了。 解决方案: ......

跨越请求

1.1什么是跨域(两个不同系统之间的访问、调用)

1)域名不同,即两个不同的应用。

Ajax跨越请求失败,解决

2)域名相同,但是端口不同,即同一个应用中的不同子系统。

Ajax跨越请求失败,解决

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跨越请求失败,解决

 测试发现ajax跨越请求失败了

 

解决方案jsonp跨域

 

在前面的测试中,我们发现ajax跨越请求时,json数据被浏览器禁用了。

 

原因:浏览器禁止远程加载json数据。(浏览器安全机制)

 

 

 

如何解决呢?

 

答:使用jsonp方式。

 

 2.1jsonp原理

2.1.1jsonp 实现的前提

  浏览器允许跨越加载同源数据

  即在javascript脚本中发送请求,就可以远程加载js格式数据

 

2.1.2请求原理:

  (1异步请求的时候加上一个名为callback的回调函数

  (2在接口中将返回的json格式数据伪装成js脚本格式

  (3)得到js格式数据后,提取里面的json数据。

 Ajax跨越请求失败,解决

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脚本。

 Ajax跨越请求失败,解决

2.4 再次发送ajax异步请求,使用jsonp方式

 Ajax跨越请求失败,解决

结论

  (1jsonpajax技术中的一种异步请求方式。

     2jsonp能实现跨越请求。

     3jsonp跨越时,需要指定一个回调函数,并使用该函数将返回的数据伪装成js脚本。

     4)获取返回的js脚本后,jsonp自动提取其中的json数据。