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>
91
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
