使用img.src跨域请求
无刷新的页面请 求,被越来越多的应用。XMLHttp.Request只支持同域名的请求,Iframe支持跨域请求,但是跨域Javascript调用会被制止,使得 Iframe跨域请求没有办法做到CallBack。Script.Src的请求可以跨域,也可以写一个比较复杂的Script机制让它 CallBack(使用Script Request解决跨域请求问题), 这几种实现方式都是比较重的。在一些场景下需要一个小巧的跨域请求。比如统计某个A Href链接被点击了几次,某个图片被点击了几次。在这种场景下发送到服务器的数据量小,客户Script不关心服务器返回结果的内容,只关心这次请求是 否成功。在这种场景下完全可以使用Img.src做异步跨域请求。
应用场景:
假设有个点击统计服务器: http://CountHits.Com 它后面有数据库统计每天某个链接被点击了几次。它对外提供的REST访问接口是:
vender=venderID&href=urlHref&text=urlText&target=urlTarget
&style=urlStyle&location=pageLocation&refere=pageRefere.
vender 表示当前统计的投放者. location链接所在的页面. refere当前页面的来源页面。如果统计成功返回200 状态码,如果统计失败返回500状态码。
根据这样的REST-URL接口,使用Img.src发送点击统计请求。
[1] 只为某个链接加统计,失败时重试3次:
function countClick(item){ // create Img item = item!=null && item.tagName ? item : this; var image = document.createElement("IMG"); image.src = "http://CountHits.Com/Handler.ashx? vender=0&href="+encodeURIComponent(item.href)+"&text="+encodeURIComponent(item.innerHTML)+ "&target="+encodeURIComponent(item.target)+"&style="+encodeURIComponent(item.style.cssText)+ "&location="+encodeURIComponent(window.location.href) +"&referrer=" + encodeURIComponent(document.referrer) + "&t="+ new Date().getTime(); image.height = 0; image.width = 0; item.requestTimes = item.requestTimes ? item.requestTimes ++ : 0; image.onerror = Function.createDelegate(item, retry); image.onload = Function.createDelegate(item, clean); //send request. function retry() function clean() Function.prototype.createDelegate = function(instance, method) { |
<a href="http://www.zhangsichu.com" οnclick="countClick(this)" target="_blank">Test</a> |
[2] 给所有链接加统计,失败时重试3次:
function AddEventHandle(target,eventType,handler) { if(target.AddEventListener) { target.AddEventListener(eventType,handler,false); } else if(target.AttachEvent) { target.AttachEvent("on"+eventType,handler); } else { target["on"+eventType]=handler; } } function RemoveEventHandle(target,eventType,handler) function window_onload() { |
服务器端输出代码
public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { //Your code to sum hits // context.Response.ContentType = "image/gif"; System.Drawing.Bitmap image = new System.Drawing.Bitmap(1,1); image.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif); } public bool IsReusable { |
转自:http://zhangsichu.com/blogview.asp?Content_Id=102
转载于:https://www.cnblogs.com/johnwonder/archive/2010/11/03/1867753.html
使用img.src跨域请求相关推荐
- jQuery jsonp跨域请求
当前端和后端不属于同源策略就会访问不到数据 同源策略就是相同的协议,域名,端口.如果前后端不属于同源策略又想获得后端的数据我们就可以通过跨域开获得数据 跨域的安全限制都是对浏览器端来说的,服务器端是不 ...
- js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...
先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...
- 关于ajax跨域请求(cross Domain)
Cross Domain AJAX主要就是A.com网站的页面发出一个XMLHttpRequest,这个Request的url是B.com,这样的请求是被禁止的,浏览器处于安全考虑不允许进行跨域访问, ...
- AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- 浏览器同源策略以及跨域请求时可能遇到的问题
跨域请求基础知识 浏览器的同源策略 浏览器的源指的是 协议://域名:端口 这样的URL组合.我们首先要明确几点 www.foo.com 和 foo.com 是不同域 www.foo.com 和 ww ...
- 循序渐进Python3(十一) --6-- Ajax 实现跨域请求 jsonp 和 cors
Ajax操作如何实现跨域请求? Ajax (XMLHttpRequest)请求受到同源策略的限制. Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpReque ...
- JSONP实现Ajax跨域请求
前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
- 前端跨域请求get_HTTP--跨域真的有这么难吗
前言 以前写前端小项目的时候就听说过跨域这个词,什么 JSONP啊,CORS啊.感觉很高级,但是无奈项目太小没机会用上.今天就写篇博客总结一下常用的跨域操作. 为什么要跨域 一般来说写项目的时候都是自 ...
- AJAX 跨域请求(转发)
什么是JSONP:JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访 ...
最新文章
- 想获得50亿专项激励?关于穿山甲新星助推计划你必须了解的几件事
- 关于LateX的应用
- JS中toFixed()方法的问题及解决方案
- lc171. Excel Sheet Column Number
- DJANGO用户名认证一例
- 编程之美-只考加法的面试题整理
- ACM组队训练记录(Grooming)
- asp.net搜索关键词高亮显示函数
- 李宏毅自然语言处理——Self Attention
- 初见mybatis-plus(快速创建入门案例)
- TensorFlow/Python的一个范例代码及阅读说明
- 4.计算机网络 -- 4.6 综合布线
- JavaScript - 自定义鼠标右键菜单
- 基于Java实现大学生求职招聘信息网站系统
- CMake 之 BUILD_SHARED_LIBS 和 CMAKE_BUILD_TYPE 用法教程
- 建立“顾客购买图书”的活动图(使用泳道)
- 时间序列预测框架--Darts--快速开始(下)
- 项目销售实用技巧(精华,销售,售前必看)
- c++----随机数算法
- 生活简单案例,分析管理中的深奥道理
热门文章
- 谱聚类算法(Spectral Clustering)优化与扩展
- 关于static变量,请选择下面所有说法正确的内容
- sublime搭建C/C++编译环境(超完美的配置并配上内容详细讲解!!)
- [***]HZOJ 柱状图
- [剑指offer] 34. 第一个只出现一次的字符
- [洛谷P4726]【模板】多项式指数函数
- 关于TextBox控件字体颜色绑定
- 『TensorFlow』专题汇总
- 沼泽鳄鱼_SSL2511_矩阵乘法
- VS中的 MD/MT设置 【转】