日历归档 |
|
<< < 2024 - 10 > >> | Su | Mo | Tu | We | Th | Fr | Sa | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
|
|
|
About Me |
|
|
ZhangSichu |
|
Male |
|
32 |
|
ZhangSichu@gmail.com |
|
ZhangSichu@hotmail.com |
|
ZhangSichu.com |
|
weibo.com/zhangsichu |
|
|
|
个人推荐 |
|
|
|
|
分类归档 |
|
|
|
|
My Friends |
|
|
|
|
使用Img.src跨域请求
|
使用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. document.body.appendChild(image); return true; }
function retry() { if(this.requestTimes < 3) { this.requestTimes ++; countClick(this); } else { this.requestTimes = 0; } }
function clean() { this.requestTimes = 0; }
Function.prototype.createDelegate = function(instance, method) { return function() { return method.apply(instance, arguments); } }
|
[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) { if(target.RemoveEventListener) { target.RemoveEventListener(eventType,handler); } else if(target.DetachEvent) { target.DetachEvent("on"+eventType,handler) } else { target["on"+evnetType]=null; } }
function window_onload() { var links = document.getElementsByTagName("A"); //debugger; for(var i=0; i<links.length; i++) { AddEventHandle(links[i] , "click", Function.createDelegate(links[i], countClick)); } }
|
服务器端输出代码
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 { get { return false; } } }
|
File: 本文示例代码
|
|
#re:使用Img.src跨域请求 3/16/2022 10:35:58 AM sdfs
|
|
|
|
|
|