jsonp是json的一种模式,专门用来解决前端跨域请求数据的问题。它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。
一般来讲,ajax请求数据是没有权限跨域请求的,只能请求本域名下的接口,再调用其他域名的服务,就是自己前端->自己后台->别人后台的这种模式,还是很不方便的。
自己前端->别人后台就是属于跨域请求了,尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,所以前端调用js文件是可以跨域的,只要是资源文件都是可以支持跨域的。
要支持跨域,除了前端脚本要实现jsonp模式请求,服务端还需要对返回数据封装成普遍的js文件格式,前端收到js文件格式的数据时会自动解析到数据,进行处理。而因为js是原生支持json的,所以服务端可以将数据以json格式处理。
在传输的过程中,前端可以传递一个callback参数,服务端解析到后作为函数名返回给前端,前端再对callback参数进行校验是否一致。
这种调用方式就是jsonp。
前端实现:
$.ajax({
url: "//xxx.com/xxx",
type: "get",
dataType: "jsonp",
data: "",
success: function(s) {
alert(s);
}
})
服务端实现:
1)servlet接口
@RequestMapping(value="/xxx")
public void doGet(HttpServletRequest request, HttpServletResponse response) {
String callback = request.getParameter("callback");
response.setContentType("application/x-javascript");
response.setCharacterEncoding("UTF-8");
try {
PrintWriter out = response.getWriter();
String jsonp = "jsonp data";
out.write(callback+ "(" + jsonp + ")");
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
2)rest接口
1.web.xml增加监听
<listener>
<listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>
</listener>
2.java实现:
HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
String callback = request.getParameter("callback");
String jsonp = "jsonp data";
return callback + "(" + jsonp + ")";
分享到:
相关推荐
原生Js利用Jsonp跨域实现百度搜索功能
html通过 ajax jsonp跨域请求接收和传送数据 使用HTML页面与后台跨域交互,获得后台数据或传输数据给后台
在js里使用Jsonp 实现跨域解决源代码实例
jsonp跨域请求数据实现手机号码查询实例分析.docx
ajax jsonp 跨域处理
jquery下利用jsonp跨域访问实现方法.docx
原生ajax库,实现jsonp跨域,短小精悍。
ajax jsonp跨域传参,里面有源码,不过写在txt中了,很适合调用别人的接口
ajax跨域CORS方案 JSONP跨域请求方案.zip
使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。
本文将给您介绍如何使用getJSON来实现异步跨域提交表单
使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js。 ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的 在chrome的调试窗口下看看百度搜索...
本文主要介绍了jsonp跨域请求实现示例。具有很好的参考价值。下面跟着小编一起来看下吧
jsonp跨域获取数据的基础教程.docx
jsonp跨域获取百度联想词的方法分析.docx
主要介绍了jsonp跨域及实现百度首页联想功能的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理
第25周-第06章节-Python3.5-JSONP跨域请求jQuery方式.avi
当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理。
了解了jsonp之后,大家应该也都明白了,jsonp主要就是用来实现跨域的获取数据,今天我们就来详细探讨下如何在实际中应用jsonp实现跨域