jQuery JSONP
同源策略
浏览器不允许跨域发送Ajax请求，如你在http://127.0.0.1:8000/下发送一个Ajax请求去获取http://127.0.0.1:9000/的资源。
如何解决这个问题？其实jQuery的JSONP已经帮你做好了。但是在此之前我们有必要了解一下原生的方式究竟是什么。
原生解决
仔细想一想，是不是有一些标签可以突破这个同源策略？比如<img>，<link>，<script>这些标签？
他们的src属性都可以突破同源策略，从异端服务器上获取到数据。
所以我们可以用Js新建一个<script>标签，通过src属性来访问远程服务端，那么这样就能获取到数据。
并且！异端的这个接口肯定会提供给你一个回调函数的名字，我们可以自行来书写这个回调函数，拿到想要的数据。
所以这是一个双向的过程，异端服务器必须与其他的请求做好约定，你必须有callback函数才行。
如下代码所示：
# http://127.0.0.1:8000/
<body>
<button>点我异端发送请求</button>
</body>
<script>
"use strict";
window.onload = function () {
document.querySelector("button").addEventListener("click", function () {
let script = document.createElement("script");
script.src = "http://127.0.0.1:9000";
document.head.append(script);
document.head.removeChild(script);
})
}
function callback(res) {
console.log(res); // 异端服务器返回的结果
}
</script>
# http://127.0.0.1:9000/ 异端服务器返回的数据
def test(request):
return HttpResponse("callback('我给你的数据')"); # 代表，你需要运行callback函数
$.ajax
其实jQuery中的Ajax的原理和上面这个一模一样，只不过它封装了接口使用起来更方便。
<body>
<button>点我异端发送请求</button>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
window.onload = function () {
document.querySelector("button").addEventListener("click", function () {
$.ajax({
url:"http://127.0.0.1:9000/",
type:"GET",
dataType:"JSONP",
jsonp: "callback", // 执行的回调函数名称
})
})
}
function callback(res) {
console.log(res); // 异端服务器返回的结果
}
</script>
jQuery JSONP的更多相关文章
- jquery jsonp请求错误处理
jQuery将ajax方法进行了封装,jsonp可以轻松实现跨域请求. $.ajax({type: 'GET', url: "<%= SysUtils::TASK_CENTER_URL ...
- jQuery jsonp跨域请求
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...
- jquery jsonp实现跨域
html代码: $("#testJsonp").click(function(){ $.ajax({ url: "http://www.test.cc/1.php&quo ...
- JQuery jsonp使用小记
在一个不支持PHP的主机上,需要对某些页面做访问统计.我的方案是在静态的HTML页面上,用JSONP向能够执行PHP的主机进行跨域请求,从而使用PHP解决这个访问量统计问题. 在服务器端,PHP页面返 ...
- 【javascript】jquery jsonp跨越请求
<html> <head> <meta charset="utf-8"> <title></title> <scr ...
- 跨域Ajax请求（jQuery JSONP MVC）
通过jQuery的$.ajax方法发送JSONP请求 js代码 <script type="text/javascript"> function jsonptest2( ...
- jQuery jsonp跨域请求详解
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...
- jquery Jsonp 跨域访问
$(function () { $.ajax({ url: 'http://ihisuns.vicp.cc:8765/PcClient.aspx', data: { "ModuleName& ...
- JQuery Jsonp 跨域
需求:两个不同域的网站想利用ajax交互数据 客户端:ajax的dataType参数设置成jsonp,然后设置一个回调函数(jsonCallBack) 服务器端:返回callfunName([{a:& ...
随机推荐
- Centos7系统下Docker开启认证的远程端口2376配置教程
docker开启2375会存在安全漏洞 暴露了2375端口的Docker主机.因为没有任何加密和认证过程,知道了主机IP以后,,任何人都可以管理这台主机上的容器和镜像,以前贪图方便,只开启了没有认证的 ...
- git pull设置为无需密码
https方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受https带来的极速 设置记住密码(默认15分钟): git config --global credenti ...
- Docker(Docker Toolbox)配置镜像加速更换国内源
自己当时装的是Win10专业工作室版本,不知道为什么不支持window for docker, 所以选择了Docker Toolbox 的方式,主要是为了学习,虽然这种方式是不建议安装的,但是基础的学 ...
- 技术心得丨一种有效攻击BERT等模型的方法
Is BERT Really Robust? A Strong Baseline for Natural Language Attack on Text Classification and Enta ...
- 多测师讲解rf--定位元素--高级讲师肖sir
注意点: 注意点: rfbug:rf 点击勾选一个运行就运行两个出现用例执行 注释快捷键: 改字体大小: 快捷键:显示关键字信息 (ctrl+鼠标悬浮) 注解不能空格在注解 未保存提示 定位方法 : ...
- EV加密播放器的分析过程+过虚拟机方法
开启了OD载入播放器进行分析,发现如下问题:1.播放器会进行翻录检测2.防止虚拟机播放3.视频播放后,可直接对内存操作提取出源视频翻录检测:主要是对指定的文件名或进程名对比虚拟机检测:是针对虚拟机特征 ...
- df du linux空间清理，查看文件大小
df -h ,这个命令用于查看服务器空间,运行后的效果图如下: [root@localhost /]# df -h Filesystem Size Used Avail Use% Mounted on ...
- 圆形进度条的模仿1-DrawArc,DrawCircle,DrawText讲解
1:画弧 canvas.drawArc(oval,startAngle,sweepAngle,useCenter,paint) 第一个参数:绘制的区域,oval可以是被定好了的一个区域,也可以将ova ...
- 使用creata-react-app脚手架创建react项目时非常慢的问题
创建react项目必须要有下面两个步骤 cnpm install -g create-react-app //创建react全局变量 create-react-app my-app //创建一个re ...
- 在电脑上操作手机屏幕scrcpy工具就搞定了
手机安卓版本:10 电脑:win64 使用步骤 电脑步骤 下载scrcpy scrcpy 是免费开源的投屏软件,支持将安卓手机屏幕投放在 Windows.macOS.GNU/Linux 上,并可直接借 ...