利用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. c# 空接合(??)运算符的运用

    相信很多人都看到??运算符,但是不一定每个人都知道它是用来做什么的,之前我也看到过很多次,但是因为一直没有去用过,所以也没有了解他的作用,今天又看到了,所以查了的MSDN,原来??运算符叫做空接合运算 ...

  2. 【Python】 最简单的web服务

    python -m SimpleHTTPServer  8321 1.python 没有指定目录的参数 想启动目录 就cd到该目录下 2.在目录下创建一个index.html 3.启动web服务,(端 ...

  3. z470 装黑苹果 10.92

    1.分两个区,一个是mac安装区,一个是镜像拷贝区. 2.把镜像压进去. 3.安装好系统. 4.把镜像区的 extent拷贝到安装好的系统盘里去. 5.安装驱动,网盘里有.还有系统也在网盘里. 6.声 ...

  4. mysql数据库本地化操作

    <?php if(!defined('SITE_PATH')){ define('SITE_PATH',dirname(dirname(__FILE__))); } $dbconfig=incl ...

  5. matlab实现的嵌套乘法、高精度、二分法

    嵌套乘法的计算: \[ P(x) = 1 - x + x^2 - x^3 + ...+ x ^ {98} - x^{99} \] function y = nest( d, c, x, b ) if ...

  6. JPages分页插件的使用

    废话不多说,直接上代码. 首先下载JPages的js和css包,附上下载地址:http://dl.oschina.net/softfile/jpages/jpages-latest-138554713 ...

  7. JavaWeb常见错误总结

    错误1:(Ajax未加载问题) 今天我在学习AJAX的时候,想从一个JS文件中引入JQuery,然后在这个JS文件中使用AJAX的方法.结果V8引擎一直报错,错误类型是Uncaught Referen ...

  8. 面试问到struts1与struts2的解析对比

    一.struts1要继承一个抽象类.struts1是类编程而不是接口编程. struts2的action可以实现一个action接口,也可以实现其他的接口,使其成为可选的定制的服务. 二.struts ...

  9. ffmpeg 错误码

    av_read_frame, av_write_frame等 经常会返回负值也即写数据包失败.不同的负值代表不同的含义,可以根据错误码定义,定位问题. #define EPERM 1 /* Opera ...

  10. c# 应用程序部署发布

    转自:http://blog.csdn.net/chenyujing1234/article/details/7558185 最近做了C#软件,发布给客户用时,发现客户运行不起来,原因是客户电脑上没有 ...