文档章节

JS的jsonp是什么?5分钟学会jsonp跨域请求

o
 osc_w9s1w4o0
发布于 2019/04/05 17:35
字数 398
阅读 3
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一、jsonp是什么?

jsonp是解决跨域请求的一种技术。浏览器为了防止CSRF攻击会采用同源策略(协议/主机/端口均相同)限制,对非同源发起http请求(即跨域请求)会被浏览器阻止。

 

二、jsonp跨域请求的原理?

script标签的src属性不受同源策略限制,用此方式对非同源服务器请求资源,返回的JS代码会调用指定的函数,携带的参数就是所需的数据,这样就完成了跨域请求。

 

三、原生JS的jsonp跨域请求:

首先声明一个处理返回数据的函数,返回的JS代码会调用此函数:
function dosomething(data) {
    console.log(data)
}

然后创建script标签添加到页面,src设为请求地址,请求地址的参数规定了返回的函数名:

<script src="http://example.com/data.php?callback=dosomething"></script>

最后服务端会返回一段JS代码,它会调用指定的函数,携带的参数就是所需的数据,至此跨域请求就完成了。

dosomething({name:"逐逸"});

 

四、jQuery的jsonp跨域请求:

这里的success就跟上面的dosomething一样。

$.ajax({
  url: "http://example.com/data.php",
  type: "GET",
  dataType: "jsonp", //指定服务器返回的数据类型
  success: function(data) {
    console.log(data)
  }
});

 

五、jsonp的优点与缺点:

优点:它不被同源策略限制,而且兼容性更好,在古董浏览器中都可以运行。
缺点:它只支持 GET 请求,而不支持 POST 等其他类型的 HTTP 请求。 
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

unity列表控件Horizontal/Vertical/Grid Layout Group用法介绍

1. Grid Layout Group 为Panel控件添加Grid Layout Group,子控件为四个按钮,分别为Grid,Calendar,Gear,User: 默认属性为 为方便演示,按钮的底色为控件自带image,按钮上面的图标为其子...

路过暴风
22分钟前
19
0
Distinct()与lambda? - Distinct() with lambda?

问题: Right, so I have an enumerable and wish to get distinct values from it. 是的,所以我有一个可枚举的,并希望从中获得不同的值。 Using System.Linq , there's of course an ext......

法国红酒甜
28分钟前
8
0
学习编写编译器[关闭] - Learning to write a compiler [closed]

问题: Preferred languages : C/C++, Java, and Ruby. 首选语言 :C / C ++,Java和Ruby。 I am looking for some helpful books/tutorials on how to write your own compiler simply for......

技术盛宴
58分钟前
17
0
OSChina 周一乱弹 —— 毛巾又怎么样?!我在乎的是大姐姐温柔的怀抱!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雨 因你而下,于你而止》- Seto 手机党少年们想听歌,请使劲儿戳(这里) @Dan...

小小编辑
今天
41
1
MySQL 常用操作

1 创建/打开/删除数据库 create database db;create database db character set utf8mb4;use db;drop database db;alter database db character set utf8mb4; 2 修复表 mysqlcheck --a......

氷泠
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部