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>
