使用Img.src跨域請(qǐng)求

無刷新的頁面請(qǐng) 求，被越來越多的應(yīng)用。XMLHttp.Request只支持同域名的請(qǐng)求，Iframe支持跨域請(qǐng)求，但是跨域Javascript調(diào)用會(huì)被制止，使得 Iframe跨域請(qǐng)求沒有辦法做到CallBack。Script.Src的請(qǐng)求可以跨域，也可以寫一個(gè)比較復(fù)雜的Script機(jī)制讓它 CallBack(使用Script Request解決跨域請(qǐng)求問題)， 這幾種實(shí)現(xiàn)方式都是比較重的。在一些場(chǎng)景下需要一個(gè)小巧的跨域請(qǐng)求。比如統(tǒng)計(jì)某個(gè)A Href鏈接被點(diǎn)擊了幾次，某個(gè)圖片被點(diǎn)擊了幾次。在這種場(chǎng)景下發(fā)送到服務(wù)器的數(shù)據(jù)量小，客戶Script不關(guān)心服務(wù)器返回結(jié)果的內(nèi)容，只關(guān)心這次請(qǐng)求是 否成功。在這種場(chǎng)景下完全可以使用Img.src做異步跨域請(qǐng)求。

應(yīng)用場(chǎng)景：

假設(shè)有個(gè)點(diǎn)擊統(tǒng)計(jì)服務(wù)器： http://CountHits.Com 它后面有數(shù)據(jù)庫統(tǒng)計(jì)每天某個(gè)鏈接被點(diǎn)擊了幾次。它對(duì)外提供的REST訪問接口是：
vender=venderID&href=urlHref&text=urlText&target=urlTarget
&style=urlStyle&location=pageLocation&refere=pageRefere.

vender 表示當(dāng)前統(tǒng)計(jì)的投放者. location鏈接所在的頁面. refere當(dāng)前頁面的來源頁面。如果統(tǒng)計(jì)成功返回200 狀態(tài)碼，如果統(tǒng)計(jì)失敗返回500狀態(tài)碼。

根據(jù)這樣的REST-URL接口,使用Img.src發(fā)送點(diǎn)擊統(tǒng)計(jì)請(qǐng)求。

[1] 只為某個(gè)鏈接加統(tǒng)計(jì)，失敗時(shí)重試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" οnclick="countClick(this)" target="_blank">Test</a>

[2] 給所有鏈接加統(tǒng)計(jì)，失敗時(shí)重試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)); } }

服務(wù)器端輸出代碼

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; } } }

轉(zhuǎn)自:http://zhangsichu.com/blogview.asp?Content_Id=102

轉(zhuǎn)載于:https://www.cnblogs.com/johnwonder/archive/2010/11/03/1867753.html

總結(jié)

以上是生活随笔為你收集整理的使用img.src跨域请求的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。