JSONP - 跨域篇

简介: JSONP - 跨域篇

前言

Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。

同源策略,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略。

使用JSONP解决跨域问题,只改前端不改后端报语法错误(如图中第二条错误)的原因:JSONP是使用动态创建的一个script标签,而script标签返回的是JS代码,但是服务器后台代码没有做任何改动,返回的还是json对象。浏览器会把json对象和字符串当作是JS代码来解析所以就会报错了。解决方法:需要修改后台代码,新建一个类在构造方法里写super("callback")。

Jsonp实现原理:

1、Jsonp的请求类型是script,而非一般ajax的请求类型:xhr,这样浏览器就不会做安全校验;

2、Jsonp的返回类型是js,而非一般ajax的返回类型:json对象;

3、Jsonp请求携带一个前后台约定的参数(eg:callback),便于让后台识别是jsonp请求,后台则返回js数据而非json数据。

4、默认值:callback

若要修改约定的默认值话,需要修改2处:

(1)ajax代码中jsonp:"callback2",或者请求参数中的callback修改成对应的callback2。

(2)后台 super("callback2")。

5、后台与前台约定使用相同的如callback函数,服务器返回的就会是javascript脚本,不是json。jsonp除了callback还有一个_的函数,是防止缓存的。如果cache设置为true,就没有_函数了。

JSONP的弊端:

  • 服务器需要改动代码支持-如果调用的接口不是我们自己的,那么改动就很麻烦。
  • 只支持GET方法,JSONP是通过动态创建一个script发送请求的,而script只支持GET方法。
  • 发送的不是XHR请求,XHR有许多新的特性,如异步、各种事件等,JSONP则没有。
目录
相关文章
|
缓存 JSON 前端开发
Ajax:跨域与JSONP
Ajax:跨域与JSONP
79 1
|
JSON JavaScript 前端开发
jsonp解决Ajax跨域问题
jsonp解决Ajax跨域问题
107 0
|
JSON 安全 JavaScript
跨域访问(JSONP)
跨域访问(JSONP)
144 0
跨域访问(JSONP)
|
前端开发
利用jsonp解决跨域问题
这篇文章给大家分享的是利用jsonp解决跨域问题。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
97 0
|
JSON 缓存 JavaScript
同源策略与跨域访问(jsonp和cors等)
同源策略与跨域访问(jsonp和cors等)
311 0
同源策略与跨域访问(jsonp和cors等)
Ajax-21:设置CORS响应头实现跨域
Ajax-21:设置CORS响应头实现跨域
230 0
|
JSON JavaScript 前端开发
ajax实现JSONP跨域
简单的说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果
3519 0
|
Web App开发 前端开发 JavaScript
|
JSON JavaScript 数据格式
jsonp和cors实现跨域
jsonp实现的原理主要是利用src属性可以去加载跨域的资源,例如script、img。 动态的创建script标签,加载跨域资源
1182 0