Programming an In-Text Advertising System under ASP.NET 3.5 - The JavaScript files

(Page 2 of 4 )

There are mainly three script files defined in this system, i.e. xmlhttp.js, ad.js and getAd.js. First, the xmlhttp.js file encapsulates the Ajax core (i.e. XMLHTTP) related calling code. Here, we are not going to delve into it because most developers are familiar with the basic Ajax-related concepts. You can refer to the source code to find out the details.

The second script file, ad.js, is really the core script. It takes the responsibility of rendering the in-text ad contents. The third script file, getAd.js, encapsulates the ad placing related code, which, in fact, further invokes several other files.

Now, let’s first look more closely at file getAd.js:

document.write('<script type="text/javascript" src="js/xmlhttp.js"></script>');

document.write('<script type="text/javascript" src="adArray.ashx"></script>');

document.write('<script type="text/javascript" src="js/ad.js"></script>');

Wherein, the adArray.ashx file is responsible for generating the ad keyword array dynamically, whose detailed implementation will be discussed later. The ad.js file, however, takes charge of generating the concrete ad code. To more clearly comprehend this file, Figure 2 shows the invoking relationships between the several functions inside of it.

Figure 2—the invoking relationships between the several functions inside the ad.js file

Now, let’s delve into the implementation of the matchAds function. First of all, we should create an HTML <div/> element that represents the ad window to show and specify the related attributes and styles as follows:

function matchAds(e)

{

var AdShowBox=document.createElement("div");

AdShowBox.id="AdShowBox";

AdShowBox.setAttribute("id","AdShowBox");

AdShowBox.setAttribute("name","aspx1");

AdShowBox.style.width=AdBoxWidth;

AdShowBox.style.height=AdBoxHeight;

AdShowBox.style.position="absolute";

AdShowBox.innerHTML="<div id="AdShowBoxBar" name="aspx1"><div id="AdShowBoxBartitle" name="aspx1"></div><div id="AdShowBoxBarClose" name="aspx1"><img name="aspx1" src="img/close.jpg" width="14" height="14" border="0" onclick="hiddenAdShowBox()" /></div></div><div id="AdShowBoxContent" name="aspx1"></a></div>";

……

Please pay special attention to the complex contents of the innerHTML element of the AdShowBox element above.

Next, as you will imagine, we should attach the above newly-created <div/> element to the HTML document:

document.body.appendChild(AdShowBox);

Next, we obtain the specified matching area, which is the only argument passed to the matchAds(); function: 

var obj=$(e);

if(!obj) obj = document.body.childNodes[0];

if(obj.innerHTML=="")obj = document.body.childNodes[1];

Next, continue to work with the matched element, to get its attribute innerHTML and iterate through it to find out all the keywords and replace them with the ad styled hyperlinks:

var tmp=obj.innerHTML;

for(var i=0;i<Ads.length;i++)

{

Adzz=eval("/"+Ads[i]+"/g");

tmp=tmp.replace(Adzz,"<a oncontextmenu="return false;" onmousemove="moveAdBox(event);" onmouseover="showAdsearch('"+Ads[i]+"',event);" style="color:Red" name="aspx1" target="_blank">"+Ads[i]+"</a>");

}

obj.innerHTML=tmp;//substitute

}

As you’ve seen, inside the matchAds function, the other functions (in Figure 2 above) are invoked, where the showAdsearch function undertakes the task of obtaining the ad contents related to some specified keyword, the moveAdBox function is responsible for moving the ad window, and the hiddenAdShowBox function can hide the ad window when needed. For brevity, we omit their code listings here.

Next: The Server-side Programming >>
 

More ASP.NET Articles
More By Xianzhong Zhu

Comments On: Programming an In-Text Advertising System under ASP.NET 3.5

>>> Be the FIRST to comment on this article!