首页 > 代码库 > jsonp跨域原理解析

jsonp跨域原理解析

2024-07-24 05:44:20   211人阅读

前言： 跨域请求是前台开发中经常遇到的场景，但是由于浏览器同源策略，导致A域下普通的http请求没法加载B域下的数据，跨域问题由此产生。但是通过script标签的方式却可以加载非同域下的js，因此可以利用这一特性，进行跨域数据请求。

先看一下跨域导致的问题，测试域分别为 localhost 和 www.icity366.com, 下文分别对应A域和B域，测试文件为A域下的 data.jsp, 我们在A(localhost)域下请求B(www.icity366.com)域下的数据，看一下data.jsp中关键代码：

　　　　$.ajax({		url : "http://www.icity366.com:8080/addresslist/test/Data.do?method=getData",		data : {callback : "getData"},		//dataType : "json",		type : "get",		success : function(data){			alert(data);		},		error : function(XmlHttpRequest,textStatus,errorThrown){			//debugger;			alert(textStatus);		}	　　})

　结果为alert("error"),浏览器提示跨域:

　　

利用script标签解决跨域

在data.jsp页面中定义好回调方法，

function getData(data){　　alert(data.name);}

通过script标签引用js：

<script type="text/javascript" src="http://www.icity366.com:8080/addresslist/test/Data.do?method=getData&callback=getData"></script>

服务器端java代码如下：

String callback = request.getParameter("callback");Map<String,String> data = http://www.mamicode.com/new HashMap();"name", "Liyx");data.put("age", "25");String dataJson = JsonUtils.convertToString(data);//Map->jsonresponse.getWriter().write(callback+"("+dataJson+")");

　请求结果：

  java端返回　　getData({"age":"25","name":"Liyx"})，页面执行getData(),弹出 Liyx, 说明<script>标签可跨域获得数据。

 

　JSONP方式跨域写法

　　json核心就是：允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。先看一下写法：

var url = "http://www.icity366.com:8080/addresslist/test/Data.do?method=getData&callback=?";	$.getJSON(url,function(data){		alert(data.name);　　//Liyx	})

　　callback=? 先传递?过去，jquery会自动生成一个全局函数来替换callback=?中的问号，看一下java端的输出，

jQuery171004718876606784761_1411549835461({"age":"25","name":"Liyx"})，长串即为生成的全局函数,该function会自动销毁，并把数据传递到回调方法中。

 

jsonp跨域原理解析


联系
我们