ajax的跨域请求
温故而知新。
今天主要来了解一下ajax的跨域请求，及原理，以及jsonp的使用
1.什么是跨域
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 不是
总结：
不同的域名或不同的端口都是跨域请求。
2.ajax的跨域请求原理
使用代码来说明ajax的原理：
taotao-manage-web项目:
json.jsp页面
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 out.print("{"abc":1222}"); 5 %>
test_json.htm页面：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" 7 src="http://manage.taotao.com/js/jquery-easyui-1.4.1/jquery.min.js"></script> 8 <script type="text/javascript"> 9 alert($); 10 $(function() { 11 $.ajax({ 12 type : "get", 13 url : "js/json.htm", 14 dataType : "json", 15 success : function(data) { 16 alert(data.abc); 17 } 18 }); 19 }); 20 </script> 21 </head> 22 <body> 23 24 </body> 25 </html>
以上是普通的通过啊Ajax获取数据，如果正确的话应该可以弹出两条信息
再写一个test_json2.htm
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" 7 src="http://manage.taotao.com/json.jsp"></script> 8 </head> 9 <script type="text/javascript"> 10 function fun(data) { 11 alert(data.abc); 12 } 13 </script> 14 <body> 15 </body> 16 </html>
总结 ：
此时页面报错，找不到方法：因为它通过src去找js方法，可是我们的json的页面只有一个json数据。
然后我们将test_json.htm的代码改为：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 function fun(data) { 8 alert(data.abc); 9 } 10 </script> 11 <script type="text/javascript" 12 src="http://manage.taotao.com/json.jsp?callback=fun"></script> 13 </head> 14 <body> 15 </body> 16 </html>
总结：
此时页面报错：原因为：它将我json.jsp页面的json数据当作js脚本语言运行
解决：只需要返回js脚本即可。
定义fun方法
此时我们将json.jsp页面的代码改为：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% out.print("fun({"abc":1222})"); %>
将json数据用一个括号抱住加一个方法名
将test-json.htm拷贝到前台系统进行测试
然后将test_json2.htm复制到另一个项目中，taotao-web，记得两个项目同时启动，此时你会发现页面只谈出一个，并没有将我们json.jsp页面的abc弹出来。
1、 alert($) 可以正常弹出
2、 alert(data.abc) 不能够正常的弹出，出现跨域问题
总结：
script标签的src可以跨域请求资源，但是ajax请求不可以跨域请求。
借助script的src跨域加载资源
test_json.htm页面：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 function a(data) { 8 alert(data.abc); 9 } 10 </script> 11 <script type="text/javascript" 12 src="http://manage.taotao.com/json.jsp"></script> 13 </head> 14 <body> 15 16 </body> 17 </html>
此时
1、 alert($) 可以正常弹出
2、 alert(data.abc)可以正常弹出
优化代码：
后台：json.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String callback = request.getParameter("callback"); if (callback != null || !callback.equals("")) { //跨域请求 out.print(callback + "({"abc":123})"); } else { out.print("({"abc":1222})"); } %>
前台：test_json.htm:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function a(data) { alert(data.abc); } </script> <script type="text/javascript" src="http://manage.taotao.com/json.jsp?callback=a"></script> </head> <body> </body> </html>
3.如何使用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"> alert($); $(function() { $.ajax({ type : "get", url : "http://manage.taotao.com/json.jsp", dataType : "jsonp", success : function(data) { alert(data.abc); } }); }); </script> </head> <body> </body> </html>
总结：
我主要通过一个maven后台项目到前台项目的数据的传送来说明了 ajax的跨域请求问题，通过后台查询数据，@ResponseEntity返回json格式的数据，使用easyUi接收数据。展示jsp页面。