利用img.src可以发送http请求,但是发送http请求不是img.src的真正用意。

同样,用script.src去请求jsonp格式的接口数据也不是script元素的最初设计用途。

但是这些歪门邪道的技术都是利用了img/script等DOM元素能发跨域请求的特性。

(new Image()).src="包含用户行为数据的url"

另外再写一个img.src和204响应结合的一个应用场景:实现DNS预解析和TCP链接的建立!

Youtobe的前端工程师说他们使用img.src请求来实现preloading video connection。

实现方式是在html的head部分有下面一段script代码:

var img = new Image();
img.src = videoConnectionUrl;

这样做的结果是:

  • Resolves DNS while page is rendering, before it is needed
  • Maintains an open connection for later use

看,又是一个剑走偏锋的用途!但是它比正规的dns-prefetch更强大,而且不存在低版本浏览器不支持的问题。

内容来源:http://hzxiaosheng.bitbucket.org/work/2014/04/09/img-onerror-event-triggered-by-204-response/

利用 img 和 script 发送跨域请求的更多相关文章

  1. Vue(八)发送跨域请求

    使用vue-resource发送跨域请求 axios不支持跨域 1 安装vue-resource并引入 cnpm install vue-resource -S 2 基本用法 使用this.$http ...

  2. Vue-cli3.x中使用Axios发送跨域请求的配置方法

    Vue-cli3.x中使用Axios发送跨域请求的配置方法 安装axios npm i axios -s main.js中引入 import axios from 'axios' //将axios挂载 ...

  3. xhr.withCredentials发送跨域请求凭证

    一.前言 今天遇到一个坑,浏览器请求数据的时候gg了.浏览器报错如下图: 因为请求头部设置了credentis mode is 'include', 从上面可以看出是Access-Control-Al ...

  4. 利用jsonp进行Ajax跨域请求

    在进行Ajax请求的时候经常会遇到跨域的问题,这个时候一般就会用到jsonp. 关于json和jsonp,网上有很多原理解释,这里就不多赘述,需要的自行搜索. 下面是一个简单的ajax跨域请求示例: ...

  5. 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例

    部署环境:Window 7 SP1+IIS7 成功方案: 其成功解决问题的几个重要因素如下: 1.       由于WebService默认不支持Get请求,所以要在Web.config配置文件内的& ...

  6. 利用Jquery处理跨域请求

    在项目制作过程中,可能会用到ajax来提高用户体验,这里终于研究出来,利用jquery来进行跨域请求,在用$.getJSON这个方法时,前台页面中需这样写 $.getJSON(“需要提交处理的url? ...

  7. JSON跨域请求

    原理:首先客户机会注册一个callback,在发送跨域请求之前,会在url后附带注册的callback参数(如:callback1982342322),随后服务器拿到了callback参数,获取数据后 ...

  8. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  9. Django跨域请求之JSONP和CORS

    现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...

随机推荐

  1. mapreduce 实现pagerank

    输入格式: A 1 B,C,D B 1 C,Dmap: B A 1/3 C A 1/3 D A 1/3 A |B,C,D C B 1/2 D B 1/2 B |C,Dreduce: B (1-0.85 ...

  2. Arrays.asList的使用及异常问题

    将数组转成List问题,通常我们习惯这样写成:List<String> list = Arrays.asList("1","2"); 于是我们这样就 ...

  3. Extjs 4.2 grid 分页问题,点击下一页参数没带过去

    最初的store写法: var store = Ext.create('Ext.data.Store', { model: 'PKU',//这个地方CarPKU不是一个对象,而是一个类 remoteS ...

  4. 小兵眼中的Java Struts2

        老魏终于可以回园子了,但是这次要慢慢的回来,不能一下子回来,这段时间除了要照顾刚出生的小女儿,还要做项目.说实在的老魏时间真是有限,不能照顾到园子的文章了,所以只能慢慢的回来写文章了.抱歉! ...

  5. topcoder 673

    DiV1 300:给一组士兵再给一组战马都有权值. 安排战马的顺序的方案数,是第一个士兵和其战马的权值乘积最大. 做法:随便暴力就好. 枚举战马和第一个士兵匹配.其他士兵按权值从大到小排序,战马权值按 ...

  6. WPF 多线程处理(3)

    WPF 多线程处理(1) WPF 多线程处理(2) WPF 多线程处理(3) WPF 多线程处理(4) WPF 多线程处理(5) WPF 多线程处理(6) 首先我们需要几个属性来保存取得的数据,因为在 ...

  7. 从OGRE,GAMEPLAY3D,COCOS2D-X看开源

    OGRE,大家都很熟悉咯. 说到这一点真的有点好笑,我见过很多人说认识OGRE,但是却不知道D3D和OPENGL是什么东东的,可能是我的笑点真的很低,反正是莫名喜感.前天在COCOS2D-X的一个群里 ...

  8. Netty4.x中文教程系列(三) ChannelHandler

    Netty4.x中文教程系列(四)  ChannelHandler 上一篇文章详细解释了Hello World示例的代码.里面涉及了一些Netty框架的基础. 这篇文章用以解释ChannelHandl ...

  9. Eclipse中创建标准web工程以及标准目录结构说明

    最近公司有个Web项目,项目结构如下: 虽然运行没有错,但是实在是别扭,标准的web应用一般不采用这种结构: 因此总结一下:     1.如何在Eclipse中创建一个标准的Web应用.     2. ...

  10. 【Ural】【1057】Amount of degrees

    数位DP 2009年刘聪<浅谈数位类统计问题> 例题一 从组合数 以及 数位DP的角度都可以做…… 首先转化成求1~n内K进制下只有0.1的数的个数: 考虑K进制下第一个为1的位,剩下的数 ...