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的区别的更多相关文章

  1. Atitit  rgb yuv  hsv HSL 模式和 HSV(HSB) 图像色彩空间的区别

    Atitit  rgb yuv  hsv HSL 模式和 HSV(HSB) 图像色彩空间的区别 1.1. 色彩的三要素 -- 色相.明度.纯度1 1.2. YUV三个字母中,其中"Y&quo ...

  2. JSONP、图片Ping、XMLHttpRequest2.0等跨域资源请求(CORS)

    跨域:当协议.主域名.子域名.端口号中任意一个不相同时都不算同一个域,而在不同域之间请求数据即为跨域请求.解决方法有以下几种(如有错误欢迎指出)以请求图片url为例: 1.通过XMLHttpReque ...

  3. 图像Ping技术

    在CORS出现以前,要实现跨域Ajax通信颇费一些周折.开发人员想出了一些办法,利用DOM中能够执行跨域清求的功能,在不依赖XHR对象的情况下也能发送某种请求.虽然CORS技术已经无处不在,但开发人员 ...

  4. 聊一聊 JSONP

    JSONP 说到 JSONP 就要说到同源策略(Same Origin Policy), 同源策略是浏览器最核心的也是最基本的安全功能. 浏览器的同源策略,限制了来自不同源的 “document” 或 ...

  5. SAR图像与光学图像区别

    按传感器采用的成像波段分类,光学图像通常是指可见光和部分红外波段传感器获取的影像数据.而SAR传感器基本属于微波频段,波长通常在厘米级.可见光图像通常会包含多个波段的灰度信息,以便于识别目标和分类提取 ...

  6. 关于安全性问题:(XSS,csrf,cors,jsonp,同源策略)

    关于安全性问题:(XSS,csrf,cors,jsonp,同源策略) Ajax 是无需刷新页面就能从服务器获取数据的一种方法.它的核心对象是XHR,同源策略是ajax的一种约束,它为通信设置了相同的协 ...

  7. js中各种跨域问题实战小结(一)

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

  8. js中各种跨域问题实战小结

    什么是跨域?为什么要实现跨域呢?   这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源 ...

  9. 读javascript高级程序设计15-Ajax,CORS,JSONP,Img Ping

    平时用惯了jQuery.ajax之类的方法,却时常忽略了它背后的实现,本文是学习了AJAX基础及几种跨域解决方案之后的一些收获. 一.AJAX——XMLHttpRequest 谈起Ajax我们都很熟悉 ...

随机推荐

  1. 使用FME对CAD管网数据进行过滤、聚合、中心点替换

    1.首先加载CAD数据,并暴露出需要使用到的相关字段.比如:block_number.fme_geometry.fme_color等字段. 2.对一个元素有多种类型部件的需要进行过滤,例如本次的检修井 ...

  2. 【NLP面试QA】激活函数与损失函数

    目录 Sigmoid 函数的优缺点是什么 ReLU的优缺点 什么是交叉熵 为什么分类问题的损失函数为交叉熵而不能是 MSE? 多分类问题中,使用 sigmoid 和 softmax 作为最后一层激活函 ...

  3. BP神经网络及异或实现

    BP神经网络是最简单的神经网络模型了,三层能够模拟非线性函数效果. 难点: 如何确定初始化参数? 如何确定隐含层节点数量? 迭代多少次?如何更快收敛? 如何获得全局最优解? ''' neural ne ...

  4. python中如何在一个for循环中遍历两个列表

    `其实就是用zip把两个列表包装起来:  for x, y in zip(list1, list2) 

  5. 使用IDEA编写JDBC

    省去下载MySQL的过程,创建数据库demo 首先在下载的Java服务中将此jar包复制到项目中的一个空文件夹中 在当前工程下新建目录lib(名字可自定) 找到MySQL的Java服务的jar包 打开 ...

  6. Unity 游戏框架搭建 2019 (二十六) 第一轮整理完结

    昨天呢我们把第八个示例整理完了.整理之后学习了类的第一作用:方法的集合,还有 Obselete 这个 API.并且在进行整理的时候贯彻了我们新的约定和规则:先确保功能有效,再去做变更和删除. 今天我们 ...

  7. AJAX对数据库增删改查实例

    前端代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><title&g ...

  8. djangoRestFrameWork的小知识

    djangoRestFrameWork的小知识 重写序列化器的save方法 有时候,.create()和.update()方法名称可能没有意义.例如,在联系表格中,我们可能没有创建新实例,而是发送了电 ...

  9. django_rest_framework视图传递参数给序列化器

    django_rest_framework视图传递参数给序列化器 视图中默认可以将request.data传递给序列化器,但request.data是不可更改的对象,但又想将额外的参数传递给序列化器 ...

  10. Swing组件中URL方法获取 图标

    13.3.2 图标的使用 1.创建图标 package lll; import java.awt.*; import javax.swing.*; public class DrawIcon impl ...