聊一聊JSONP和图像Ping的区别
JSONP
在讲 JSONP 之前需要再来回顾一下在页面上使用 script 引入外部的 js 文件时到底引入了什么?
先建立一个 index.js 文件。
console.log(123)
再建立一个 index.html 文件。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>JSONP</title>
</head>
<body>
<script src='index.js'></script>
</body>
</html>
上面的
<script src='index.js'></script>
等价于
<script>
console.log(123)
</script>
现在再来看 JSONP 就比较好理解了。
假设我现在需要向 www.abc.com 上请求一个资源 asset。我需要先创建一个 script 标签令其 src 等于这个源来访问这个资源
<script src= 'http://www.abc.com/?dataName=asset&callback=handleResponse'></script>
根据上面的举例我们知道 script 返回的就是一段 JS 代码,那么服务器在接收到我们的请求时,如果给我们返回一段 JS 代码,这段代码可以是一个函数执行的代码,而且函数的参数可以就是我们请求的资源。
例如上面的 handleResponse
函数在本地的定义如下:
handleResponse(asset) {
console.log('从服务端得到的资源 asset 为', asset)
}
服务端给我们返回的 JS 代码如下:
handleResponse(asset)
在script 标签就相当于
<sctript>
handleResponse(asset)
</sctript>
handleResponse
在本地又有定义,服务端的资源 asset 也通过函数参数的形式传递下来了。
由于 asset 的形式往往是 JSON 的格式,所以这种跨域的方式被称为 JSONP。
JSONP 由两部分构成,
参数(JSON格式,就是服务端需要传递给客户端的数据
回调函数
名字要和浏览器端代码中定义的名字相同,在上面的例子中浏览器端定义的是
handleResponse
,在服务端返回的函数名字也应该是handleResponse
,只有这样在浏览器端接收到后才能进行调用。
图像 Ping
我们知道使用 script 标签返回的是一段 JS 代码,请问下面这段代码返回的是什么。
<img src='http://www.abc.com/?dataName=img1'>
往往返回的是一张图片,因此浏览器端是没有办法接收到服务端的返回值的。
虽然它不像 JSONP 使用那么广泛,但是还是有一定的用武之地的。
例如用于统计某个广告的点击次数,创建一个 img 标签,然后绑定一个 click 事件,当点击图片时给 img.src
赋值,这个时候就会向 'http://www.abc.com/count'
发送请求,服务端在接收到这个请求之后就可以令点击次数加 1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
const img = document.createElement('img')
img.onclick = function () {
img.src='http://www.abc.com/count'
}
document.appendChild(img)
</script>
</body>
</html>
注意这个例子并不严谨,这里主要是说明统计点击某个广告次数的思路,使用图像 Ping 是可以实现的。
聊一聊JSONP和图像Ping的区别的更多相关文章
- Atitit rgb yuv hsv HSL 模式和 HSV(HSB) 图像色彩空间的区别
Atitit rgb yuv hsv HSL 模式和 HSV(HSB) 图像色彩空间的区别 1.1. 色彩的三要素 -- 色相.明度.纯度1 1.2. YUV三个字母中,其中"Y&quo ...
- JSONP、图片Ping、XMLHttpRequest2.0等跨域资源请求(CORS)
跨域:当协议.主域名.子域名.端口号中任意一个不相同时都不算同一个域,而在不同域之间请求数据即为跨域请求.解决方法有以下几种(如有错误欢迎指出)以请求图片url为例: 1.通过XMLHttpReque ...
- 图像Ping技术
在CORS出现以前,要实现跨域Ajax通信颇费一些周折.开发人员想出了一些办法,利用DOM中能够执行跨域清求的功能,在不依赖XHR对象的情况下也能发送某种请求.虽然CORS技术已经无处不在,但开发人员 ...
- 聊一聊 JSONP
JSONP 说到 JSONP 就要说到同源策略(Same Origin Policy), 同源策略是浏览器最核心的也是最基本的安全功能. 浏览器的同源策略,限制了来自不同源的 “document” 或 ...
- SAR图像与光学图像区别
按传感器采用的成像波段分类,光学图像通常是指可见光和部分红外波段传感器获取的影像数据.而SAR传感器基本属于微波频段,波长通常在厘米级.可见光图像通常会包含多个波段的灰度信息,以便于识别目标和分类提取 ...
- 关于安全性问题:(XSS,csrf,cors,jsonp,同源策略)
关于安全性问题:(XSS,csrf,cors,jsonp,同源策略) Ajax 是无需刷新页面就能从服务器获取数据的一种方法.它的核心对象是XHR,同源策略是ajax的一种约束,它为通信设置了相同的协 ...
- js中各种跨域问题实战小结(一)
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...
- js中各种跨域问题实战小结
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源 ...
- 读javascript高级程序设计15-Ajax,CORS,JSONP,Img Ping
平时用惯了jQuery.ajax之类的方法,却时常忽略了它背后的实现,本文是学习了AJAX基础及几种跨域解决方案之后的一些收获. 一.AJAX——XMLHttpRequest 谈起Ajax我们都很熟悉 ...
随机推荐
- 使用FME对CAD管网数据进行过滤、聚合、中心点替换
1.首先加载CAD数据,并暴露出需要使用到的相关字段.比如:block_number.fme_geometry.fme_color等字段. 2.对一个元素有多种类型部件的需要进行过滤,例如本次的检修井 ...
- 【NLP面试QA】激活函数与损失函数
目录 Sigmoid 函数的优缺点是什么 ReLU的优缺点 什么是交叉熵 为什么分类问题的损失函数为交叉熵而不能是 MSE? 多分类问题中,使用 sigmoid 和 softmax 作为最后一层激活函 ...
- BP神经网络及异或实现
BP神经网络是最简单的神经网络模型了,三层能够模拟非线性函数效果. 难点: 如何确定初始化参数? 如何确定隐含层节点数量? 迭代多少次?如何更快收敛? 如何获得全局最优解? ''' neural ne ...
- python中如何在一个for循环中遍历两个列表
`其实就是用zip把两个列表包装起来: for x, y in zip(list1, list2)
- 使用IDEA编写JDBC
省去下载MySQL的过程,创建数据库demo 首先在下载的Java服务中将此jar包复制到项目中的一个空文件夹中 在当前工程下新建目录lib(名字可自定) 找到MySQL的Java服务的jar包 打开 ...
- Unity 游戏框架搭建 2019 (二十六) 第一轮整理完结
昨天呢我们把第八个示例整理完了.整理之后学习了类的第一作用:方法的集合,还有 Obselete 这个 API.并且在进行整理的时候贯彻了我们新的约定和规则:先确保功能有效,再去做变更和删除. 今天我们 ...
- AJAX对数据库增删改查实例
前端代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><title&g ...
- djangoRestFrameWork的小知识
djangoRestFrameWork的小知识 重写序列化器的save方法 有时候,.create()和.update()方法名称可能没有意义.例如,在联系表格中,我们可能没有创建新实例,而是发送了电 ...
- django_rest_framework视图传递参数给序列化器
django_rest_framework视图传递参数给序列化器 视图中默认可以将request.data传递给序列化器,但request.data是不可更改的对象,但又想将额外的参数传递给序列化器 ...
- Swing组件中URL方法获取 图标
13.3.2 图标的使用 1.创建图标 package lll; import java.awt.*; import javax.swing.*; public class DrawIcon impl ...