Jsonp跨域访问原理和实例

本文涉及的产品
.cn 域名,1个 12个月
简介:

什么是跨域

出于安全方面的考虑,页面中的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,如需转载请自行联系原作者

相关文章
|
20天前
|
前端开发
|
JSON 前端开发 JavaScript
跨域问题的解决方案 jsonp cros原理
当浏览器端运行了一段ajax代码(无论是使用XMLHttpRequest还是fetch api),浏览器会首先判断它属于哪一种请求模式
跨域问题的解决方案 jsonp cros原理
|
前端开发
前端学习案例2-jsonp实现跨域方式2
前端学习案例2-jsonp实现跨域方式2
60 0
前端学习案例2-jsonp实现跨域方式2
|
前端开发
前端学习案例3-jsonp实现跨域方式3
前端学习案例3-jsonp实现跨域方式3
68 0
前端学习案例3-jsonp实现跨域方式3
|
前端开发
前端学习案例5-jsonp实现跨域方式5
前端学习案例5-jsonp实现跨域方式5
65 0
前端学习案例5-jsonp实现跨域方式5
|
前端开发
前端学习案例1-jsonp实现跨域方式
前端学习案例1-jsonp实现跨域方式
54 0
前端学习案例1-jsonp实现跨域方式
|
前端开发
前端学习案例4-jsonp实现跨域方式4
前端学习案例4-jsonp实现跨域方式4
72 0
前端学习案例4-jsonp实现跨域方式4
|
JSON 安全 JavaScript
跨域访问(JSONP)
跨域访问(JSONP)
138 0
跨域访问(JSONP)
|
JavaScript 前端开发 PHP
通过js(ajax)请求另外一个域名的接口时会产生跨域问题解决办法
通过js(ajax)请求另外一个域名的接口时会产生跨域问题解决办法
291 0
|
JSON 前端开发 JavaScript
jsonp的原理·jsonp是不是ajax中实现跨域访问的技术
jsonp的原理·jsonp是不是ajax中实现跨域访问的技术
168 0