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:& ...
随机推荐
- 在Windows7中打开照片，提示“Windows 照片查看器无法显示此图片，因为计算机上的可用内存可能不足。....”
在Windows7中打开照片,提示"Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足.请关闭一些目前没有使用的程序或者释放部分硬盘空间(如果硬盘几乎已满),然后重试. ...
- VUE 安装项目
注意:在cmd中执行的命令 1,前提是安装了node.js 查看 npm 版本号 2,创建项目路径 mkdir vue cd vue 3,安装vue-cli (脚手架) npm install -个v ...
- roles学习笔记（模拟安装httpd服务）
这是目录(app 是模拟的角色) [root@test ansible]# tree.├── app_role.retry├── app_role.yml├── httpd_role.yml├── n ...
- 53.Qt-QPdfWriter绘制PDF,支持表单输出
之前打印PDF都是通过html形式来实现的,但是这次要做的东西,需要打印界面控件,所以需要使用QPdfWriter. 通过QPdfWriter来获取QPainter对象,就能实现在PDF上来画画啦. ...
- 是时候更新手里的武器了—Jetpack最全简析
前言 Android Jetpack想必大家都耳熟能详了,Android KTX,LiveData,Room等等一系列库都是出自 Jetpack.那么 Jetpack到底是什么?又包含哪些你还没用过的 ...
- day63 Pyhton 框架Django 06
内容回顾 1.装饰器 装饰器:是一个闭包函数,在不改变原函数的代码和调用方式的基础上,给原函数增加功能. def wrapper(func): def inner(*args,**kwargs): # ...
- python 使用pyinstaller打包程序
使用pyinstaller 打包.py脚本,在其他计算机可以直接运行,不需要python环境 安装pyinstaller库 pip install pystaller 打包程序 pyinstaller ...
- 聊聊简单又灵活的权限设计(RBAC)
你:我看完能知道个啥?我:也就以下两点吧一. 了解基于 RBAC 思路的表设计二. 表数据在实际开发场景中是如何使用的你:我觉得那应该还有点干货吧我:我不要你觉得,我要我觉得 (͡ ͡° ͜ つ ͡͡ ...
- C# 采用Basic Auth传递Post或者GET 数据
摘自:http://www.cnblogs.com/starcrm/p/4837971.html public class JiraApi{private string m_Username;priv ...
- 类型“DbContext”在未引用的程序集中定义。必须添加对程序及“EntityFramework，Version=6.0.0.0，Culture=neutral，PublicKeyToken=b77a5c561934e089”的引用。using语句中使用的类型必须可隐式转换为”System.IDisposable
其他层引用Model层的ef模型时会发生这个错误 解决方法: 在你要使用EF模型的层下点击添加引用 然后点击浏览 找到Model层文件下的bin>debug文件 引用这两个dll文件 如 ...