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:& ...
随机推荐
- shell-脚本开发基本规范及习惯
1.shell-脚本开发基本规范及习惯 1.开头指定脚本解析器 #!/bin/sh 或#!/bin/bash 2.开头加版本版权等信息 #Date: 2018/3/26 #Author: zhangs ...
- devops-jenkins-Pipeline实战
1) 配置gitlab的分支项目 点击红色标记的创建 project 项目 点击Create project创建Pipeline-demo项目 项目创建完成,然后我们创建一个Add README 然后 ...
- thinkphp6.0.x 反序列化详记（一)
前言 这几天算是进阶到框架类漏洞的学习了,首当其冲想到是thinkphp,先拿thinkphp6.0.x来学习一下,体验一下寻找pop链的快乐. 在此感谢楷师傅的帮忙~ 环境配置 用composer指 ...
- 【Jenkins】active choices reactive parameter & Groovy Postbuild插件使用！
注:以上俩插件安装下载直接去jenkins官网或者百度下载即可 一.active choices reactive parameter 插件的使用 1.被关联的参数不做改动 2.添加active ch ...
- day31 Pyhton 面向对象的基础 三大特性
一.内容回顾 封装 1.概念 笔记 2.__名字 在类的外部就不能用了 3.私有化的 不能被子类继承,也不能在其他任何类中调用 三个装饰器方法(装饰类中的方法) 1.不被修饰的 普通方法,会使用对象 ...
- 【C语言C++编程入门】——编译机制和语言标准！
编程机制 编写程序时必须遵循确切步骤主要是取决于你的计算机环境.因为 C语言是可以移植的,所以它在许多环境中可用,其中包括 UNIX,Linux,Windows等等 . 不过,让我们首先来看一看许多环 ...
- centos8平台使用journalctl管理systemd-journald日志
一,systemd-journald的作用 1,什么是systemd-journald? systemd-journald 是 systemd 自带的日志系统,是一个收集并存储各类日志数据的系统服务. ...
- wifi - 无线相关命令
1.Linux环境下的无线相关操作命令 interface 指代当前网卡 一般是 wifi0 , eth0 , ath1等 ifconfig - 常用查看网络设定及控制网卡(Windows下是ip ...
- Dubbo系列之 （七）网络层那些事（2）
辅助链接 Dubbo系列之 (一)SPI扩展 Dubbo系列之 (二)Registry注册中心-注册(1) Dubbo系列之 (三)Registry注册中心-注册(2) Dubbo系列之 (四)服务订 ...
- 《NASA对N+3代先进飞行器概念设计最终报告》阅读笔记
民用航空的爆炸式增长已是未来的必然,灿烂的前景也意味着巨大的挑战,谁能发掘到未来技术的潜力,谁就能称霸下一个30年的天空! 文章目录 总概述 单双争霸 四点发现 方案分析 多维度分析 设计要求 品质因 ...