文档章节

图像Ping技术

o
 osc_x4h57ch8
发布于 2018/04/24 10:06
字数 619
阅读 0
收藏 0
xhr

精选30+云产品,助力企业轻松上云!>>>

    在CORS出现以前,要实现跨域Ajax通信颇费一些周折。开发人员想出了一些办法,利用DOM中能够执行跨域清求的功能,在不依赖XHR对象的情况下也能发送某种请求。虽然CORS技术已经无处不在,但开发人员自己发明的这些技术仍然被广泛使用,毕竞这样不需要修改服务器端代码。本文将详细介绍图像Ping

 

基础

  图像Ping跨域请求技术是使用<img>标签。一个网页可以从任何网页中加载图像,不用担心跨域不跨域。这也是在线广告跟踪浏览量的主要方式。也可以动态地创建图像,使用它们的 onload 和 onerror事件 处理程序来确定是否接收到了响应

  动态创建图像经常用于图像Ping:图像Ping是与服务器进行简单、单向的跨域通信的一种方式。 请求的数据是通过査询字符串形式发送的,而响应可以是任意内容,但通常是像素图或204响应。通过图像Ping,浏览器得不到任何具体的数据,但通过侦听load和error事件,它能知道响应是什么时候接收到的

var img = new Image();
img.onload = img.onerror = function(){
    alert("Done!");
};
img.src = "test.html?sum=a";

  这里创建了一个Image的实例,然后将onload和onerror事件处理程序指定为同一个函数。这样无论是什么响应,只要请求完成,就能得到通知。请求从设置src属性那一刻开始,而这个例子在请求中发送了一个sum参数

 

示例

  图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。图像Ping有两个主要的缺点,一是只能发送GET请求,二是无法访问服务器的响应文本。因此,图像Ping只能用于浏览器与服务器间的单向通信

  下面是一个图片Ping的示例

复制代码
<input id="btn" type="button" value="跨域请求">
<div id="result"></div>
<script>
var add = (function(){
    var counter = 0;
    return function(){
        return ++counter;
    }
})();
btn.onclick = function(){
    var sum = add();
    var img = result.getElementsByTagName('img')[0];
    if(!img){
        var img = new Image();        
    }
    img.height="100";
    img.onload = img.onerror = function(){
        result.appendChild(img);
        var oSpan = document.getElementById('sum');
        if(!oSpan){
            oSpan = document.createElement('span');
            oSpan.id="sum";
        }
        oSpan.innerHTML = '发送请求的次数:' + sum;
        result.appendChild(oSpan);
    };    
    if(sum%2){
        img.src = "http://7xpdkf.com1.z0.glb.clouddn.com/eg_bulboff.gif?sum="+sum;    
    }else{
        img.src = "http://7xpdkf.com1.z0.glb.clouddn.com/eg_bulbon.gif?sum="+sum;    
    }
}
</script>
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Pycharm文件打开方式

Pycharm修改文件默认打开方式 新下载了一个Pycharm,建了个小demo,期间产生了一个sqlite3文件,由于是第一次打开,就弹出选择打开方式的对话框,手一块直接点了个Text,然后就乱码了: 那我...

osc_fi9eaftu
26分钟前
8
0
微信域名检测中反应速度的重要性

随着微信域名检测的普及,越来越多的人重视这方面有个客户是这样跟我说的,他现在用的那个检测有频率限制 最快只能一秒检测一个, 并发多的时候是不能边跳转边检测的, 只能写到计划任务里面...

mkapi01
27分钟前
18
0
状压dp大总结1 [洛谷]

前言 状态压缩是一种\(dp\)里的暴力,但是非常优秀,状态的转移,方程的转移和定义都是状压\(dp\)的难点,本人在次总结状压dp的几个题型和例题,便于自己以后理解分析状态和定义方式 状态压缩...

osc_s28jz759
28分钟前
17
0
aspnet core 2.1中使用jwt从原理到精通一

目录 原理; 根据原理使用C#语言,生成jwt; 自定义验证jwt; 使用aspnetcore 中自带的类生成jwt; 学有所得 了解jwt原理; 使用C#轻松实现jwt生成和验证 原理 jwt对所有语言都是通用的,只要...

osc_1ls4yaq1
29分钟前
11
0
github上DQN代码的环境搭建,及运行(Human-Level Control through Deep Reinforcement Learning)conda配置

最近师弟在做DQN的实验,由于是强化学习方面的东西,正好和我现在的研究方向一样于是我便帮忙跑了跑实验,于是就有了今天的这个内容。 首先在github上进行搜寻,如下图: 发现第一个星数最多...

osc_252iaxru
30分钟前
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部