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则没有。
目录
相关文章
|
5月前
Ajax-jsonp跨域
Ajax-jsonp跨域
|
7月前
|
缓存 JSON 前端开发
Ajax:跨域与JSONP
Ajax:跨域与JSONP
41 1
|
10月前
|
JSON JavaScript 前端开发
jsonp解决Ajax跨域问题
jsonp解决Ajax跨域问题
79 0
|
前端开发
前端 利用jsonp解决跨域问题
前端 利用jsonp解决跨域问题
|
前端开发
利用jsonp解决跨域问题
这篇文章给大家分享的是利用jsonp解决跨域问题。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
75 0
|
JSON 安全 JavaScript
跨域访问(JSONP)
跨域访问(JSONP)
104 0
跨域访问(JSONP)
|
JSON 缓存 JavaScript
同源策略与跨域访问(jsonp和cors等)
同源策略与跨域访问(jsonp和cors等)
263 0
同源策略与跨域访问(jsonp和cors等)
|
JSON JavaScript 前端开发
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
219 0
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
|
Web App开发 前端开发 JavaScript
|
JSON JavaScript 数据格式
jsonp和cors实现跨域
jsonp实现的原理主要是利用src属性可以去加载跨域的资源,例如script、img。 动态的创建script标签,加载跨域资源
1151 0