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:& ...
随机推荐
- rustup命令速度慢
通过以下命令更换镜像: $ENV:RUSTUP_DIST_SERVER='https://mirrors.ustc.edu.cn/rust-static' $ENV:RUSTUP_UPDATE_ROO ...
- 联赛模拟测试12 C. sum 莫队+组合数
题目描述 分析 \(80\) 分的暴力都打出来了还是没有想到莫队 首先对于 \(s[n][m]\) 我们可以很快地由它推到 \(s[n][m+1]\) 和 \(s[n][m-1]\) 即 \(s[n] ...
- ORA-00019: maximum number of session licenses exceeded 超出最大会话许可数
ORA-00019: maximum number of session licenses exceededORA-00019: 超出最大会话许可数 Cause: All licenses ...
- 实验四 CSS样式的应用
实验四 CSS样式的应用 注意:以下实验项目皆以本文件为操作对象,实验结果用记事本保留后预览,最后将添加的CSS代码转载到实验报告中 另本网页中蓝色加下划线的字即为默认的超链接样式 实验目的: 掌握 ...
- Markdown语法及使用方法完整手册
欢迎使用 Markdown在线编辑器 MdEditor Markdown是一种轻量级的「标记语言」 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容 ...
- MeteoInfoLab脚本示例：格点数据散点图
绘制格点数据的散点图,用scaterm函数. 脚本程序: f = addfile('D:/Temp/GrADS/model.ctl') ps = f['PS'][0,(10,60),(60,140)] ...
- [leetcode] 剑指 Offer 专题（一）
又开了一个笔记专题的坑,未来一两周希望能把<剑指Offer>的题目刷完
- swoft实现自动重启服务 转
目的:1.上传代码后HTTP服务自动重启,不需要自己手动执行:php bin/swoft http:start2.自动重启适用于开发调试阶段,因为不能再后台运行所以在线上环境的话还是要重启http服务 ...
- Java9系列第8篇-Module模块化编程
我计划在后续的一段时间内,写一系列关于java 9的文章,虽然java 9 不像Java 8或者Java 11那样的核心java版本,但是还是有很多的特性值得关注.期待您能关注我,我将把java 9 ...
- python自测100题
如果你在寻找python工作,那你的面试可能会涉及Python相关的问题. 通过对网络资料的收集整理,本文列出了100道python的面试题以及答案,你可以根据需求阅读测试.如果你看了还是不懂可以加我 ...