Ajax跨域和JSONP
跨域与JSONP
了解同源策略和跨域
同源策略
1.什么是同源
如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源
判断下表给出的URL地址与http://www.test.com/index.html页面是否同源
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yaJj9q4N-1647429113674)(Ajax笔记.assets/同源的判断.png)]
2.什么是同源策略
同源策略是浏览器提供的一个安全功能。
MDN官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
通俗理解:浏览器规定,A网站的JavaScript,不允许和非同源十五网站C之间,进行资源的交互,例如:
1、无法读取非同源网页的Cookie、LocalStora和IndexedDB
2、无法接触非同源网页的DOM
3、无法向非同源地址发送Ajax请求
跨域
什么是跨域
当两个协议、域名、端口不一致的URL进行交互时,就会出现跨域。
出现跨域的根本原因:浏览器的同源策略不允许非同源的URL之间进行资源交互。
例如网页:http://www.test.com/index.html 想要访问接口:http://www.api.com/userlist 里的内容,但以为二者的域名不同,就出现了跨域。
浏览器对跨域请求的拦截
如果不对跨域请求做任何的操作,浏览器就会报错,去阻止你的跨域请求。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ckHR8jDa-1647429113675)(Ajax笔记.assets/浏览器对跨域的拦截.png)]
注意:浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!
如何实现跨域数据请求
现如今,实现跨域数据请求,最主要的两种解决方案,分别是JSONP和CORS。
JSONP:出现的早,兼容性好。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持GET请求,不支持POST请求。
CORS:出现的较晚,它是W3C标准,属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。
JSONP
什么是JSONP
JSONP是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
JSONP的实现原理
由于浏览器同源策略的限制,网页中无法通过Ajax请求非同源的接口数据。但是< script >标签不受浏览器同源策略的影响,可以通过src属性,请求非同源的js脚本
因此,JSONP的实现原理,就是通过< script >标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据。
剖析JSONP的实现原理
1.先定义函数
<script>function abc(data){console.log('拿到了Data数据:')console.log(data)}
</script>
2.通过script标签的src属性去向服务器请求一个函数的调用,同时把函数的名字传过去
<script src="./js/getdata.js?jsoncallback=abc"></script> <!-- 函数的名字通过键值对的形式传递给服务器 -->
3.服务器返回一个函数的调用,在调用里面把数据传进发起请求的页面
abc({name:'ls',age:30})
4.服务器为什么会返回一个函数调用
因为在服务器端程序员用php语言写了一段代码,这段代码就是用来调用函数的,代码如下:(摘自“菜鸟教程”)
<?php
header('Content-type: application/json');
//获取回调函数名(就是第2步里面script标签里写的“jsoncallback=abc”,这个时候jsoncallback就被赋值为了abc)
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
自己实现一个简单的JSONP
定义一个success回调函数:
<script>function success(data){console.log('获取到了data数据:')console.log(data)}
</script>
通过script标签,请求接口数据:
<script src="http://ajax.frontend.itLjh.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>
JSONP的缺点
只能实现GET请求不能实现POST请求
注意:JSONP和Ajax之间没有任何关系,不能把JSONP叫做Ajax请求,以为它没有用到XMLHttpRequest这个对象
jQuery中的JSONP
jQuery提供的$.ajax()函数,除了可以发起真正的Ajax数据请求之外,还能够发起JSONP数据请求,例如:
$.ajax({url:'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',//如果要使用$.ajax()发起JSONP请求,必须指定datatype为jsonpdataType: 'jsonp',success:function(res){console.log(res)}
})
默认情况下,使用jQuery发起JSONP请求,会自动携带一个callback=jQueryxxx的参数,jQueryxxx是u随机生成的一个回调函数名称。
自定义参数及回调函数名称
$.ajax({url:'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',dataType:'jsonp',//发起到服务器的参数名称,默认值为callbackjsonp:'callback',//自定义的回调函数名称,默认值为jQueryxxx 格式jsonpCallback:'abc',success:function(res){console.log(res)}
})
jQuery中JSONP的实现过程
jQuery中的JSONP,也是通过script标签的src属性实现跨域数据访问的,只不过,jQuery采用的是动态创建和移除script标签的方式,来发起JSONP数据请求
- 在发起JSONP请求的时候,动态向< header >中append一个< script >标签:
- 在JSONP请求成功以后,动态从< header >中移除刚才append进去的< script >标签
Ajax跨域和JSONP相关推荐
- ajax跨域请求Jsonp实现,使用jsonp实现ajax跨域请求
Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example ...
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- 转: ajax跨域之JSONP
事件背景: 某个站点分为静态产品介绍页面(或由于某原因需要静态化),和一个独立的在线应用程序.静态产品页面属于www.a.com下,而在线应用程序作为一个相对独立的系统存在于app.a.com上. 在 ...
- AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索
目录 同源策略和跨域 同源策略 跨域 JSONP JSONP的实现原理 自己实现一个简单的JSONP JSONP的缺点 jQuery中的JSONP 自定义参数及回调函数名称 jQuery中JSONP的 ...
- Ajax——跨域与JSONP
目录 1. 了解同源策略和跨域 1.1 同源策略 1. 什么是同源 2. 什么是同源策略 1.2 跨域 1. 什么是跨域 2. 浏览器对跨域请求的拦截 3. 如何实现跨域数据请求 2. JSONP 2 ...
- ajax跨域jsonp并且post请求No 'Access-Control-Allow-Origin'以及执行error时readyState=4同时status=200的解决方法
ajax跨域jsonp并且post请求No 'Access-Control-Allow-Origin'以及执行error时readyState=4同时status=200的解决方法 [网上很多网友的回 ...
最新文章
- python输入输出流详解_输入输出流的概念
- c# webapi POST 参数解决方法
- 在Spring data中使用r2dbc
- [数据处理] Pandas利用groupby拆分csv
- Arduino录音时间延长_如何规划好自己的时间让它产生更大价值?
- 基于Linux CentOS搭建FTP服务
- [Spring+SpringMVC+Mybatis]框架学习笔记(四):Spring实现AOP
- idea中异常处理快捷键
- 太原科技大学计算机宿舍,太原科技大学宿舍怎么样
- 数据结构视频教程 清华大学严蔚敏主讲 全48讲完整版asf格式
- PHP实现讯飞语音转写demo
- 降噪效果好的蓝牙耳机该怎么选?盘点四款高品质降噪蓝牙耳机
- 1.3 数值分析 有效数字
- HTML设置水平分割线
- 如何自动注册推特推广号,推特注册的具体步骤
- 某游戏公司测试工程师面试题
- bandgap电路设计与仿真
- 论文阅读笔记:Unsupervised Feature Learning via Non-Parametric Instance Discrimination
- ui平面设计好学吗?ui设计哪些工具是需要掌握的?
- java个性签名_程序员用搞笑个性签名
热门文章
- wordpress谷歌字体_如何为您的WordPress网站设置Google Analytics(分析)目标
- 计算机作业制作邮票教程,如何利用photoshop来简单制作邮票
- 计算机变成游戏,你玩游戏变成渣,复旦大神在5年前在游戏“我的世界”里写学术论文展示,从0开始打造计算机有多难!...
- 分享海报以及微信模板消息推送
- vue url 地址中的 # 是什么?
- python字符串连接数字电视_自学计划 - python 小白基础教程 - 第三课:字符串和数字...
- 免费送10个机械键盘,不是粉丝的绕道!!!
- 如何从windows电脑远程iPhone手机?
- 红极一时的VB,输给时代,新型开发工具,或成未来
- App启动时间的测量和优化