Jsonp跨域访问原理和实例-阿里云开发者社区

开发者社区> 范大脚脚> 正文

Jsonp跨域访问原理和实例

简介:
+关注继续查看

什么是跨域

出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,当前域名的js只能读取同域下的窗口属性,即同源策略。
而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。

一个网站的网址组成包括协议名,子域名,主域名,端口号。
比如http://www.cnblogs.com/8000/,其中http是协议名,www是子域名,cnblogs是主域名,端口号是8000,
当在页面中从一个url请求数据时,如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同,就会产生跨域问题。

解决跨域问题有以下几种方式:
使用JSONP
服务端代理
服务端设置Request Header头中Access-Control-Allow-Origin为指定可获取数据的域名

 

JSONP跨域的原理

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。

尽管浏览器不允许页面脚本跨域读取数据,但是允许html引用跨域的资源,比如脚本程序,css,图片等等,因为script,iframe的src是不存在跨域的。 
利用script标签的开放策略,加上服务端的配合,我们可以实现跨域请求数据。

当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码。

例如,假如需要从服务器(http://www.test.com/user?id=123)获取的数据如下:

1
{"id": 123, "name" : 张三, "age": 17}

那么使用JSONP方式请求(http://www.test.com/user?id=123?callback=data)的数据可以是这样:

1
data({"id": 123, "name" : 张三, "age": 17});

当然,如果服务端考虑得更加充分,返回的数据可能如下:

1
try{data({"id": 123, "name" : 张三, "age": 17});}catch(e){}

这时候我们只要定义一个data()函数,并动态地创建一个script标签,使其的src属性为

1
http://www.a.com/user?id=123?callback=data

便可以使用data函数来调用返回的数据了。

 

JSONP跨域实例

通常情况下,服务端代码只要判断请求是否带有callback参数,动态的添加callback函数,就可以实现一个支持JSONP的接口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
boolean isJsonp=StringUtils.isEmpty(callback)?false true;
        
       if (StringUtil.isEmpty(channelId)) {
           if(isJsonp)
               ResponseUtils.renderJson(response,callback +"("+"{\"channelId\":-1,\"data\":\"查询错误,channelId不能为空\"}"+")");
           else
               ResponseUtils.renderJson(response,"{\"channelId\":-1,\"data\":\"查询错误,channelId不能为空\"}");
           return;
       }
        
       Map<Object, Object> params=new HashMap<Object, Object>();
       params.put("channelId",channelId);
       try {
           List<Content> contentList=frontService.getPageListNews(channelId,pageNo,pageSize,1);
           JSONObject json=SFJsonUtil.toJSON(contentList,params);
           if(isJsonp)
               ResponseUtils.renderJson(response,callback +"("+json.toString()+")");
           else
               ResponseUtils.renderJson(response,json.toString());
       catch (Exception e) {
           ResponseUtils.renderJson(response,"{\"channelId\":-1,\"data\":\"查询错误\"}");
           log.debug(e.toString());
       }

  

 

 

本文转自邴越博客园博客,原文链接:http://www.cnblogs.com/binyue/p/3423326.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
php封装json通信接口详解及实例
php创建JSON数据详解: ``` <?php //创建一个字符数组 $arr=array( 'id'=>1, 'name'=>'david' ); echo json_encode($arr);//这个是创建JSON的关键函数 ?> ...
1624 0
Ajax实现跨域访问的三种方法
一、什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js       http:// (协议号)                www  (子域名)              google (主域名)                8080 (端口号) script/jquery.js (请求的地址) * 当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。
840 0
深入浅出JSONP--解决ajax跨域问题
取不到数据!   上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中取得的。
846 0
阿里云推出全球应用加速解决方案,快速提升跨域应用访问体验
近日,阿里云全球加速产品推出全球应用加速等多个新特性,融合云安全DDoS高防与WAF的安全防护能力,结合云解析智能DNS与GTM全局流量调度,保障企业全球应用部署的高质量、高安全、高可靠。另外邀请到在线互联网教育机构—豌豆思维,进一步分享了他们使用全球加速的经验。
567 0
MVC框架模式技术实例(用到隐藏帧、json、仿Ajax、Dom4j、jstl、el等)
前言: 刚刚学完了MVC,根据自己的感悟和理解写了一个小项目。 完全按照MVC模式,后面有一个MVC的理解示意图。 用MVC模式重新完成了联系人的管理系统: 用户需求: 多用户系统,提供用户注册、登录功能,对于没有登录的用户,不允许使用任何功能。
939 0
在ASP.NET MVC3 中利用JSONP跨域登“.NET技术”录WEB系统
  在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录。一般情况下我们需要在多系统之间使用多个用户名和密码。这样客户就需要在多个系统之间重复登陆。每次登录都需要输入用户名和密码。最近比较流行的就是OAuth。
711 0
+关注
3656
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载