1.起因

js脚本做ajax异步调用的时候,直接呼吁普通文书存在跨域无权力访问的难题,不管你是静态页面、动态网页、web服务,只如果跨域请求,都爱莫能助成功;

如果上句话没精通,我们直接看例子。有七个一律的项目,一个webApp01,一个webApp02,分别在五个tomcat里启动,一个端口是8080,一个端口是9080。即三个访问地址是

http://localhost:8080/webApp01/
http://localhost:9080/webApp02/

花色布局也很粗略。

json 1

 

webApp01中的index.jsp的代码如下:

 1 <html>
 2 <script type="text/javascript" src="http://localhost:8080/webApp01/jquery-1.11.1.js"></script>
 3 <body>
 4 <script type="text/javascript">
 5 $(function (){
 6     $("#getOtherDomainThings").click(function () {
 7         
 8         $.get("http://localhost:8080/webApp01/jquery-1.11.1.js", function (data) {
 9             
10             alert(data);
11         })
12     })
13 })
14 </script>
15 <h2>Hello World!</h2>
16 <input type="button" value="submit" id="getOtherDomainThings"/>
17 </body>
18 </html>

当大家走访http://localhost:8080/webApp01/并单击submit按钮后,看到jquery的脚本成功获取到了,如下图

json 2

但当大家改一下代码,要异步获取的公文不在同一个域下会暴发怎么样?index.jsp代码改成如下所示

 1 <html>
 2 <script type="text/javascript" src="http://localhost:8080/webApp01/jquery-1.11.1.js"></script>
 3 <body>
 4 <script type="text/javascript">
 5 $(function (){
 6     $("#getOtherDomainThings").click(function () {
 7         $.get("http://localhost:9080/webApp02/jquery-1.11.1.js", function (data) {
 8             
 9             alert(data);
10         })
11     })
12 })
13 </script>
14 <h2>Hello World!</h2>
15 <input type="button" value="subbmit" id="getOtherDomainThings"/>
16 </body>
17 </html>

咱俩刷新一下http://localhost:8080/webApp01/并单击submit按钮后,看到jquery的脚本获取失败,如下图

 

json 3

看出来了吧,那就是js脚本做ajax异步调用的时候,直接呼吁普通文书存在跨域无权力访问的难题。请求压根就没有发出去。

 

json 4

2.1.JSONP和JSON关系

    JSON(JavaScript Object Notation)
是一种轻量级的数据沟通格式。那个地点(json.org)能够学学json。

    JSONP是JSON with
Padding的略称。它是一个不合法的商议,它同意在劳务器端集成Script
tags重临至客户端,通过javascript
callback的花样完毕跨域访问(那只是是JSONP不难的得以完毕方式)。

2.4贯彻-有参数有格式json

让我们接二连三改造webApp01的index.jsp,追加请求参数,代码如下

 1 <html>
 2 <script type="text/javascript" src="http://localhost:8080/webApp01/jquery-1.11.1.js"></script>
 3 <body>
 4 <script type="text/javascript">
 5 $(function (){
 6     $("#getOtherDomainThings").click(function () {
 7         $.getJSON("http://localhost:9080/webApp02/test.jsp?user=qyf404&callback=?", function (data) {
 8             alert("name=" + data.name + ",age=" + data.age);
 9         });
10     });
11 })
12 </script>
13 <h2>Hello World!</h2>
14 <input type="button" value="subbmit" id="getOtherDomainThings"/>
15 </body>
16 </html>

持续改造webApp02的test.jsp页面,代码如下

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2     pageEncoding="UTF-8"%>
3 <%
4 
5 String name = request.getParameter("user");
6 String callback = request.getParameter("callback");  
7 out.print(callback+"({ name:'"+name+"',age:'27'});");  
8 
9  %>

咱俩再一次刷新浏览器访http://localhost:8080/webApp01/并单击submit按钮后,看到jquery的脚本成功获取到了,而且json的内容也传过来了,如下图

json 5

没难题,好用的不行了。

 

最终让大家看看test.jsp到底再次来到了一个如何神奇的东东

jQuery111102533256879542023_1410490196678({ name:'qyf404',age:'27'});

json, 原来test.jsp是回来了一个足以在本土执行的js脚本。然而那个点子名jQuery111102533256879542023_1410490196678是jQuwey自动生成的。

 

演示代码下载

 

2.2.实现-无格式json

我们一而再改造我们的index.jsp的代码

 1 <html>
 2 <script type="text/javascript" src="http://localhost:8080/webApp01/jquery-1.11.1.js"></script>
 3 <body>
 4 <script type="text/javascript">
 5 $(function (){
 6     $("#getOtherDomainThings").click(function () {
 7         $.getJSON("http://localhost:9080/webApp02/jquery-1.11.1.js?callback=?", function (data) {
 8             
 9             alert(data);
10         })
11     })
12 })
13 </script>
14 <h2>Hello World!</h2>
15 <input type="button" value="subbmit" id="getOtherDomainThings"/>
16 </body>
17 </html>

咱俩刷新http://localhost:8080/webApp01/并单击submit按钮后,看到jquery的脚本成功获取到了,如下图

json 6

 等等,好像有点不规则,alert提醒窗口没弹出来,而且请求的公文地方全称是http://localhost:9080/webApp02/jquery-1.11.1.js?callback=jQuery1111049328906112350523_1410439234844&_=1410439234845 。

咱俩在一个新浏览器窗口打开这么些链接是尚未难点的(当然也不会有怎么着难题,那曾经不关乎到跨域的题材了)。

原本那种跨域请求只好回到json格式的多寡,假若大家把那几个webApp2上的jquery-1.11.1.js文件内容改成这些样子

1 {"name":"qyf404","age":123}

我们再一次刷新浏览器访http://localhost:8080/webApp01/并单击submit按钮后,看到jquery的脚本成功获取到了,如下图

json 7

结果和事先的从未有过分别,怎么回事?查了下资料,原来jsonp再次来到的json文本是有格式须求的。

2.解决办法

   
最简易的点子自然是让异步请求的数码在同一个域下了。但是伟大的攻城师找到了别样办法--jsonp。

jsonp的法则很简短,即便ajax不能跨域请求,可是富有有src标签的因素都能跨域请求,比
img、iframe、script等。

2.3.实现-有格式json

大家在webApp02项目中成立一个test.jsp,内容如下

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2     pageEncoding="UTF-8"%>
3 <%
4 String callback = request.getParameter("callback");  
5 out.print(callback+"({ name:'qyf404',age:'27'});");  
6 7  %>

大家把webApp01的index.jsp的代码改造一下,如下

 1 <html>
 2 <script type="text/javascript" src="http://localhost:8080/webApp01/jquery-1.11.1.js"></script>
 3 <body>
 4 <script type="text/javascript">
 5 $(function (){
 6     $("#getOtherDomainThings").click(function () {
 7         $.getJSON("http://localhost:9080/webApp02/test.jsp?callback=?", function (data) {
 8             
 9             alert("name=" + data.name + ",age=" + data.age);
10         });
11     });
12 })
13 </script>
14 <h2>Hello World!</h2>
15 <input type="button" value="subbmit" id="getOtherDomainThings"/>
16 </body>
17 </html>

咱俩再一次刷新浏览器访http://localhost:8080/webApp01/并单击submit按钮后,看到jquery的脚本成功获取到了,而且json的内容也传过来了,如下图

json 8

功勋卓著告成。等等,还有一个难点?异步请求多数会带参数,有参数怎么处理?

相关文章

网站地图xml地图