淘淘商城笔记 - day04

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zdp072/article/details/78798323

1.跨域问题

浏览器对ajax请求的限制,不允许跨域请求资源。

http://www.a.com -> http://www.b.com 是跨域
http://www.a.com -> http://www.a.com:8080 是跨域
http://a.a.com -> http://b.a.com 是跨域
http://www.a.com -> http://www.a.com/api 不是跨域

综上: 不同的域名或不同的端口都是跨域请求。
为何不能跨域? 答: 浏览器出于安全考虑
如何解决跨域问题? 答: 使用jsonp

2.Jsonp

直接跨域请求报错:No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
script标签的src可以跨域请求资源,但是ajax请求不能跨域请求。

Jsonp的原理:

1、jsonp通过script标签的src可以跨域请求的特性,加载资源
2、加载的资源会被当做是js脚本解析,我们可通过一个方法名将数据进行包裹
3、定义一个回调函数,获取传入的数据

例子程序

test-json1.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function fun(data){
        alert(data.abc); 
    }
</script>
<script type="text/javascript" src="http://manage.taotao.com/json.jsp?callback=fun"></script>
</head>
<body>
</body>
</html>

json.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String callback = request.getParameter("callback");
    if(callback == null || "".equals(callback)){
        out.print("{\"abc\":123}");
    }else{
        out.print(callback+"({\"abc\":123})");
    }

%>

通过jquery使用jsonp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://manage.taotao.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.ajax({
            url : "http://manage.taotao.com/json.jsp",
            type : "get",
            dataType : "jsonp",
            success : function(data){
                alert(data.abc); // 正常弹出的话,证明,数据加载成功
            }
        });
    });
</script>
</head>
<body>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页