这篇文章主要为大家详细介绍了jsonp跨域请求的相关资料,激活了所有接口支持浏览器跨域请求的封装,具有一定的参考价值。
分开说明:
一、jsonp:
直观的理解:
就是在客户端动态注册一个函数
function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的
function a(data),从而实现了跨域.
诞生背景:
1、ajax直接请求普通文件存在跨域无权访问的问题,甭管是静态页面、动态网页、web服务、wcf、只要是跨域请求,一律不行。
2、不过,web页面上调用js文件时则不受此影响
3、进一步推广,我们发现,凡是拥有src属性的标签都有跨域能力,如:3f1c4e4b6b16bbbd69b2ee476dc4f83aa1f02c36ba31691bcfe87b2722de723bd5ba1642137c3f32f4f4493ae923989c
4、于是,当前如果想通过纯web端(activex控件、服务端代理、属于未来的html5之websocket等方式不算)跨域访问数据,就只能使用如下方式:就是在远程服务器上设法把数据装进js格式的文本里,供客户端调用和进一步处理。
5、json就是一种纯字符数据格式,且能呗js原生支持。
6、这样解决方案出炉:web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以json为后缀)。
7、客户端在对json文件调用成功后,也就得到了所需数据,剩下的就是按照自己的需求进行处理了。
8为了便于客户端使用数据,逐渐形成了一种非正式的传输协议,称之为jsonp。该协议的一个要点就是允许用户传递一个callback参数给服务器,然后服务器返回数据时会将这个callback参数作为函数名来包裹住json数据,这样客户端就可以随意定制自己的函数来处理返回数据了。
具体实现:
不管jquery也好,extjs也罢,又或者是其他支持jsonp的框架,他们幕后所做的工作都是一样的,下面我来循序渐进的说明一下jsonp在客户端的实现:
1、我们知道,哪怕跨域js文件中的代码(当然指符合web脚本安全策略的),web页面也是可以无条件执行的。
远程服务器remoteserver.com根目录下有个remote.js文件代码如下:
alert('我是远程文件');
话不多讲,见核心代码
1.定义一个类,继承mappingjackson2httpmessageconverter,重写writeinternal方法,方法里简单判断一下是否带有callback参数,没有直接返回数据,有的话将数据用callback参数的值括号包裹起来返回。
import java.io.ioexception;
import javax.servlet.http.httpservletrequest;
import org.apache.commons.io.ioutils;
import org.apache.commons.lang3.stringutils;
import org.springframework.http.httpoutputmessage;
import org.springframework.http.converter.httpmessagenotwritableexception;
import org.springframework.http.converter.json.mappingjackson2httpmessageconverter;
import org.springframework.web.context.request.requestcontextholder;
import org.springframework.web.context.request.servletrequestattributes;
import com.fasterxml.jackson.core.jsonencoding;
import com.fasterxml.jackson.core.jsonprocessingexception;
public class callbackmappingjackson2httpmessageconverter extends mappingjackson2httpmessageconverter {
// 做jsonp的支持的标识,在请求参数中加该参数
private string callbackname;
@override
protected void writeinternal(object object, httpoutputmessage outputmessage) throws ioexception,
httpmessagenotwritableexception {
// 从threadlocal中获取当前的request对象
httpservletrequest request = ((servletrequestattributes) requestcontextholder
.currentrequestattributes()).getrequest();
string callbackparam = request.getparameter(callbackname);
if (stringutils.isempty(callbackparam)) {
// 没有找到callback参数,直接返回json数据
super.writeinternal(object, outputmessage);
} else {
jsonencoding encoding = getjsonencoding(outputmessage.getheaders().getcontenttype());
try {
string result = callbackparam + "(" + super.getobjectmapper().writevalueasstring(object)
+ ");";
ioutils.write(result, outputmessage.getbody(), encoding.getjavaname());
} catch (jsonprocessingexception ex) {
throw new httpmessagenotwritableexception("could not write json: " + ex.getmessage(), ex);
}
}
}
public string getcallbackname() {
return callbackname;
}
public void setcallbackname(string callbackname) {
this.callbackname = callbackname;
}
}
2.定义java bean,注意修改class扫描路径,这样每次请求过来都会调起mappingjackson2httpmessageconverter类里的riteinternal这个方法,如果请求带上了callback参数,则将以callbackvalue('data')格式的数据返回给前端。
<!-- 定义注解驱动 -->
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<bean
class="xxx.xxx.xxx.callbackmappingjackson2httpmessageconverter">
<property name="callbackname" value="callback" />
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
3.前端通过jquery封装的ajax方式调用,这里做了一些代码节省,关键代码已红色标出
<script type="text/javascript">
var feedback = {
init: function(){
var self = feedback;
self.bind();
},
test: function(data){
console.log("测试jsonp",data)
},
bind: function(){
var self = feedback;
var par = {};
par.callback = 'feedback.test';
$.ajax({
url:"http://manage.danong.com/rest/open/queryinvitelist",
data: par,
datatype:'jsonp',
jsonp:'callback',
timeout:3000
});
}
}
feedback.init();
</script>
4.浏览器打印log
以上就是jsonp跨域请求的相关介绍的详细内容。