首页 > 编程语言 >javascript基础从小白到高手系列一千九百二十三:替代性跨源技术

javascript基础从小白到高手系列一千九百二十三:替代性跨源技术

时间:2024-09-02 23:55:28浏览次数:14  
标签:onload 白到 img 跨源 javascript 探测 JSONP 请求 图片

CORS 出现之前,实现跨源Ajax 通信是有点麻烦的。开发者需要依赖能够执行跨源请求的DOM特
性,在不使用XHR 对象情况下发送某种类型的请求。虽然CORS 目前已经得到广泛支持,但这些技术
仍然没有过时,因为它们不需要修改服务器。
图片探测
图片探测是利用标签实现跨域通信的最早的一种技术。任何页面都可以跨域加载图片而不
必担心限制,因此这也是在线广告跟踪的主要方式。可以动态创建图片,然后通过它们的onload 和
one rror 事件处理程序得知何时收到响应。
这种动态创建图片的技术经常用于图片探测(image pings)。图片探测是与服务器之间简单、跨域、
单向的通信。数据通过查询字符串发送,响应可以随意设置,不过一般是位图图片或值为204 的状态码。
浏览器通过图片探测拿不到任何数据,但可以通过监听onload 和onerror 事件知道什么时候能接收
到响应。下面看一个例子:
let img = new Image();
img.onload = img.onerror = function() {
alert(“Done!”);
};
img.src = “http://www.example.com/test?name=Nicholas”;
这个例子创建了一个新的Image 实例,然后为它的onload 和onerror 事件处理程序添加了同一
个函数。这样可以确保请求完成时无论什么响应都会收到通知。设置完src 属性之后请求就开始了,这
个例子向服务器发送了一个name 值。
图片探测频繁用于跟踪用户在页面上的点击操作或动态显示广告。当然,图片探测的缺点是只能发
送GET 请求和无法获取服务器响应的内容。这也是只能利用图片探测实现浏览器与服务器单向通信的
原因。
JSONP
JSONP 是“JSON with padding”的简写,是在Web 服务上流行的一种JSON 变体。JSONP 看起来
跟JSON 一样,只是会被包在一个函数调用里,比如:
callback({ “name”: “Nicholas” });
JSONP 格式包含两个部分:回调和数据。回调是在页面接收到响应之后应该调用的函数,通常回调
函数的名称是通过请求来动态指定的。而数据就是作为参数传给回调函数的JSON 数据。下面是一个典
型的JSONP 请求:
http://freegeoip.net/json/?callback=handleResponse
这个JSONP 请求的URL 是一个地理位置服务。JSONP 服务通常支持以查询字符串形式指定回调函
数的名称。比如这个例子就把回调函数的名字指定为handleResponse()。
JSONP 调用是通过动态创建

标签:onload,白到,img,跨源,javascript,探测,JSONP,请求,图片
From: https://blog.csdn.net/wanmeijuhao/article/details/141802937

相关文章

  • javascript基础从小白到高手系列一千九百二十四:Fetch API
    FetchAPI能够执行XMLHttpRequest对象的所有任务,但更容易使用,接口也更现代化,能够在Web工作线程等现代Web工具中使用。XMLHttpRequest可以选择异步,而FetchAPI则必须是异步。FetchAPI是WHATWG的一个“活标准”(livingstandard),用规范原文说,就是“Fetch标准定义请......
  • 浙江省会计人员继续教育刷课脚本-JavaScript编写
    脚本学习网站:浙江省会计人员继续教育:https://jxjy.czt.zj.gov.cn/front/jxjy.html脚本地址:浙江省会计人员继续教育-刷课脚本:https://greasyfork.org/zh-CN/scripts/506412-浙江省会计人员继续教育-刷课脚本教程1.插件安装(以MicrosoftEdge浏览器为例)打开最中间那个蓝色......
  • 浙江省住房和城乡建设行业继续教育刷课脚本-JavaScript编写
    脚本学习网站:https://zj.zjjsrc.cn/web/web_toUserSignUp.page脚本地址:浙江省住房和城乡建设行业专业技术人员继续教育-刷课脚本:https://greasyfork.org/zh-CN/scripts/506406-浙江省住房和城乡建设行业专业技术人员继续教育-刷课脚本教程1.插件安装(以MicrosoftEdge浏览器......
  • 浙江省建设人才远程继续教育平台刷课脚本-JavaScript编写
    脚本学习网站:https://zj.zjjsrc.cn/web/web_toUserSignUp.page脚本地址:浙江省建设人才远程继续教育平台刷课脚本:https://greasyfork.org/zh-CN/scripts/506406-浙江省住房和城乡建设行业专业技术人员继续教育-刷课脚本教程1.插件安装(以MicrosoftEdge浏览器为例)打开最中间......
  • 河北成人高等教育在线刷课脚本-JavaScript编写
    脚本学习网站:河北成人高等教育在线:http://www.hbcjpt.com/portal/脚本地址:河北成人高等教育在线刷课脚本-刷课脚本教程1.插件安装(以MicrosoftEdge浏览器为例)打开最中间那个蓝色绿色的浏览器,谷歌之类的浏览器也可以点击屏幕右上角三个点,图示位置,然后点击扩展点击获取......
  • 奥鹏教师教育网刷课脚本-JavaScript编写
    脚本学习网站:奥鹏教师教育网:http://www.ourteacher.com.cn/脚本地址:奥鹏教师教育网-刷课脚本教程1.插件安装(以MicrosoftEdge浏览器为例)打开最中间那个蓝色绿色的浏览器,谷歌之类的浏览器也可以点击屏幕右上角三个点,图示位置,然后点击扩展点击获取扩展搜索Tampermonk......
  • 青海专业技术人员学习网刷课脚本-JavaScript编写
    脚本学习网站:青海省专业技术人员继续教育平台:https://qh.ctet.org.cn青海专业技术人员学习网:https://qinghai.qgzjrcw.com.cn脚本地址:青海专业技术人员学习网-刷课脚本教程1.插件安装(以MicrosoftEdge浏览器为例)打开最中间那个蓝色绿色的浏览器,谷歌之类的浏览器也可以......
  • 山财培训网刷课脚本-JavaScript编写
    脚本学习网站:山财培训网首页-会计培训专家:http://training.sdufe.edu.cn/脚本地址:山财培训网-刷课脚本教程1.插件安装(以MicrosoftEdge浏览器为例)打开最中间那个蓝色绿色的浏览器,谷歌之类的浏览器也可以点击屏幕右上角三个点,图示位置,然后点击扩展点击获取扩展搜索T......
  • 成都继续教育刷课脚本-JavaScript编写
    脚本学习网站:www.cdjxjy.com,www.cdzjjj.com脚本地址:成都继续教育-刷课脚本教程1.插件安装(以MicrosoftEdge浏览器为例)打开最中间那个蓝色绿色的浏览器,谷歌之类的浏览器也可以点击屏幕右上角三个点,图示位置,然后点击扩展点击获取扩展搜索Tampermonkey,并点击获取那个......
  • 临沂市专业技术人员继续教育刷课脚本-JavaScript编写
    脚本学习网站:sdly.treewises.com脚本地址:临沂市专业技术人员继续教育-刷课脚本教程1.插件安装(以MicrosoftEdge浏览器为例)打开最中间那个蓝色绿色的浏览器,谷歌之类的浏览器也可以点击屏幕右上角三个点,图示位置,然后点击扩展点击获取扩展搜索Tampermonkey,并点击获取那......