ajax跨域jsonp —— javascript
目录
jsonp是什么
jsonp作用：解决跨域问题
为什么有跨域问题？
“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
这是一个用于隔离潜在恶意文件的重要安全机制。”
同源：相同协议，域名，端口号。
所以当ajax请求的地址，存在协议，域名，端口号不同时，则存在跨域问题，浏览器会报错。
jsonp时解决跨域的其中一种方法。
缺点：只支持GET请求而不支持POST等其它类型的HTTP请求
jsonp原理
- ajax 请求无法访问不同源的地址
- jsonp 不是一种新技术，可以说是一种小技巧，换种方式请求
- 首先，script 标签可以引入不同源的地址，这样不会报错
- 此时，如果 script 标签引入需要调用的后台数据接口，就可以拿到数据了，但是没有直接这么简单
- 先定义获取数据成功后的操作函数，如下面的 success 函数
- 使用 script 标签，引入需要调用的后台数据接口，参数必须附带，获取数据成功后的操作函数success
原生js使用jsonp
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>控制台</h3>
<script type="text/javascript">
function success(data){
console.log('数据：', data);
// 之后对数据的处理
}
</script>
<script src="http://localhost/aa.php?callback=success¶m1=val1"></script>
</body>
</html>
<?php
// aa.php
// 获取请求参数里面的callback，获取数据成功后调用的函数名
$callback = $_GET['callback'];
$param1 = $_GET['param1']; $res = array(
array("id"=>1, "name"=>"name1"),
array("id"=>2, "name"=>"name2")
);
$res = json_encode($res); echo $callback . "(" . $res . ")"; ?>
解析：
- 先定义 success 函数，对获取数据后的操作
- 然后通过 script 标签引入后台数据接口
- 我这里后端使用 php 写的
- 先获取请求参数中 callback 的值，以及其他参数
- 对数据进行获取，编码，拼接字符串，调用 success 函数。
jquery使用jsonp
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>控制台</h3>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$.ajax({
type: "get",
url: "http://localhost/aa.php?param1=val1",
dataType: "jsonp",
jsonp: "callback",
// 传递给后台接口，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",
// 自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，
// 也可以写"?"，jQuery会自动为你处理数据
success: function(data){
console.log('数据：', data);
// 之后对数据的处理
},
error: function(){
alert('fail');
}
});
</script>
</body>
</html>
ajax跨域jsonp —— javascript的更多相关文章
- 百度的一个Ajax跨域方法 JavaScript是没有域的限制
baidu的通行证处理都是在二级域名passport.baidu.com中处理的,但是baidu很多地方登录都好像是用ajax处理的,他是怎么做的呢?研究了一下,发现一个小技巧. 在http://zh ...
- jQuery的ajax跨域 Jsonp原理
1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...
- 【JS】AJAX跨域-JSONP解决方案（一）
AJAX跨域介绍 AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面 由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求 ...
- ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...
- 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...
- 由浅入深学习ajax跨域(JSONP)问题
什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...
- jQuery $.ajax跨域-JSONP获取JSON数据（转载）
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- ajax跨域jsonp
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
- Ajax 跨域，这应该是最全的解决方案了
https://segmentfault.com/a/1190000012469713 前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了 ...
随机推荐
- kotlin 简单处理 回调参数 加？
Kotlin Parameter specified as non-null is null 2017年10月18日 17:21:49 amiko_ 阅读数:9017 版权声明:本文为博主原创文 ...
- 手动清空微信PC客户端数据
微信PC客户端,用久了之后,会产生大量数据,包括聊天记录.聊天图片.视频等等,非常占存储空间,除非很重要的聊天记录或文件,建议额外保存,其他的可以手动删掉就好,可以节省存储空间. 1.找到[C:\Us ...
- dvm 的进程和 Linux 的进程, 应用程序的进程是否为同一个概念？
dvm 指 dalvik 的虚拟机. 每一个 Android 应用程序都拥有一个独立的 Dalvik 虚拟机实例,应用程序都在它自己的进程中运行.而每一个 dvm 都是在 Linux 中的一个进程,所 ...
- committed与urgent的区别
Committed跟Urgent都是time automaton 中用来表示state的关键词. 它们的主要区别是: Committed前后的两个状态改变(transition)是串行发生,不可打断的 ...
- Eureka入门一（了解概念）
Eureka注册中心(8761端口) IDEA(开发工具) 1,创建项目勾选Eureka Server 2, 创建yml文件,拷贝配置,下面配置必须为false,意为,该项目不要作为客户端注册,因为本 ...
- Jmeter (四)聚合报告详解
- Linux_系统破坏性修复实验
目录 目录 修改系统用户密码 grub修复 系统修复 最后 修改系统用户密码 随便介绍一个修改Linux系统用户密码的方法. 步骤: 开机读秒时按任意键 进入grub列表项配置按e 选择系统kerne ...
- Git 提交 .gitignore文件
问题描述 不知道小伙伴有木有遇到这种情况:想在工程里增加 .gitignore 文件,用于在以后提交后,过滤哪些文件或者目录. 但是,在当前工程的根目录下,执行如下执行命令后,依然不能把 .gitig ...
- Flutter异步Future
一.认识Future 1.创建Future void testFuture(){ Future future = new Future(() => null); future.then((_){ ...
- 关于ElementUI中日期选择器时间选择范围限制
1.组件代码 <el-date-picker v-model="value1" type="date" placeholder="选择日期&qu ...