There can be no Triumph without Loss,No Victory without Suffering,No Freedom without Sacrifice.
All you have to decide is what to do with the time that is given to you.
Get busy Living, or Get busy Dying?
  首页 | 留言给我 | 订阅 Rss | CLI | 黄白之恋 Posts:158   Hits: 1326867    Comments: 168    
 日历归档
<<  <  2018 - 11  >  >>
SuMoTuWeThFrSa
    123
45678910
11121314151617
18192021222324
252627282930
 About Me
 Name: ZhangSichu
 Sex: Male
 Age: 32
 Email: ZhangSichu@gmail.com
 MSN: ZhangSichu@hotmail.com
 Home: ZhangSichu.com
 WeiBo: weibo.com/zhangsichu
 个人推荐
 分类归档
  ·C++/C(5)  RSS
  ·软件工程(1)  RSS
  ·杂事/随感(26)  RSS
  ·.Net/Java(30)  RSS
  ·面向对象程序设计(5)  RSS
  ·汇编/破解(0)  RSS
  ·平面设计(3)  RSS
  ·SQL(5)  RSS
  ·COM/COM+(2)  RSS
  ·Web开发(81)  RSS
 My Friends
Back Forward Refresh Home 2018年11月15日 星期四 RSS CLI Mine Sweeper. In Javascript.

  使用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);
}
}


<a href="http://www.zhangsichu.com" onclick="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)
{
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: 本文示例代码
  Posted @ 1/20/2008 11:20:49 PM | Hits (18979) | Comment (0

  Post Comment
标题 *
作者 *
密码 记住我
评论 *
    


Stable in Firefox 1.5 2.0Stable in IE6 IE7Stable in MozillaStable in Netscape
ZhangSichu.com V0.1.7507
Powered By ZhangSichu
Copyright © ZhangSichu
Download ZhangSichu.com source code. Download source code