AJAX案例：MP3网站

作者:51itcn 日期:2009-03-20

内容：百度Mp3的试听页面
特点：采用Ajax技术加载歌词，并且歌词根据词曲滚动，并自动把正在演唱的歌词加重显示

前几天偶然发现百度MP3的试听歌曲可以实现歌词动态滚动，看了下源文件，终于发现了Ajax的痕迹。准确的说是AJAH，呵呵，而且Only For IE。

主要是一个JS函数来实现这个效果，代码如下：

复制内容到剪贴板

代码:

function lrcInterface(pID,lrcID)
 {
     var tmpOutput=document.getElementById('LrcShower');
     var count=0;
     tmpOutput.innerHTML="<br><br><br><br><br><br><span style='font-size:12px;margin-left:12px'>&nbsp;正在加载歌词信息，请您稍等片 刻....";
     var tmp=setInterval(getObject,200);
 function getObject()
 {
     bdLRC=new bdSyncLRC();
     if(bdLRC!=null)
     {
         clearInterval(tmp);
         bdLRC.setPlayer(pID);
         bdLRC.setURL(lrcID);
         bdLRC.setOutput("LrcShower");
         bdLRC.Exchange();
         bdLRC.begin();
     };
     else
     {
         if(count==25)
         {
             clearInterval(tmp);
             tmpOutput.innerHTML="<br><br><br><br><br><br><span style='font-size:12px;margin-left:12px'>&nbsp;可能是因为网络的原因，系统没有找到合适 的歌词。请稍后重试";
         };
         else count++;
     };
 };
 };
 function bdSyncLRC()
 {
     var playerObj=null;
     var playerTypeStr=null;
     var lrcURL="";
     var lrcShower="";
     var lrcContent="";
     var lrcObjArray=new Array();
     this.preLRC=new Array();
     this.offsetTime=0;
     this.scrollMoveLen=20;
     if(arguments.length>=1)this.setPlayer(arguments[0]);
     if(arguments.length>=2)this.setURL(arguments[1]);
     if(arguments.length>=3)this.setOutput(arguments[2]);
 };
 bdSyncLRC.prototype.setPlayer=function()
 {
     if(arguments.length>=1)
     {
         arg=arguments[0];
         playerTypeStr=String(arg);
         if(typeof(arg)=="string")this.playerObj=document.getElementById(arg);
         else if(typeof(arg)=="object")this.playerObj=arg;
     };
 };
 bdSyncLRC.prototype.getPlayer=function()
 {
     if(typeof(document.getElementById("this.playerObj"))=='object')return this.playerObj;
     else return null;
 };
 bdSyncLRC.prototype.setURL=function()
 {
     if(arguments.length>=1)
     {
         var lrcDir,lrcFileName;
         lrcDir=String(Math.floor((parseInt(arguments[0])/100)));
         lrcFileName=arguments[0]+".lrc";
         this.lrcURL="/bdlrc/"+lrcDir+"/"+lrcFileName;
     };
 };
 bdSyncLRC.prototype.getURL=function()
 {
     return this.lrcURL;
 };
 bdSyncLRC.prototype.setContent=function()
 {
     if(arguments.length>=1)this.lrcContent=arguments[0];
 };
 bdSyncLRC.prototype.getContent=function()
 {
     return this.lrcContent;
 };
 bdSyncLRC.prototype.setLRC=function()
 {
     if(arguments.length>=1)this.lrcObjArray=arguments[0];
 };
 bdSyncLRC.prototype.getLRC=function()
 {
     return this.lrcObjArray;
 };
 bdSyncLRC.prototype.setOutput=function(showerId)
 {
     this.lrcShower=showerId;
 };
 bdSyncLRC.prototype.getOutput=function()
 {
     if(this.lrcShower!="")
     {
         arg=this.lrcShower;
         if(typeof(arg)=="string")return document.getElementById(arg);
         else if(typeof(arg)=="object")return arg;
     };
     return null;
 };
 bdSyncLRC.prototype.multiLRC=function(lrcLine)
 {
     thisObj=this;
     tmpVar=lrcLine.split("]");
     if(tmpVar.length>=2)
     {
         lrcText=tmpVar[tmpVar.length-1];
         for(j=0;j<tmpVar.length-1;j++)
         {
             lrcTime=tmpVar[j]+"]";
             thisObj.preLRC.push(lrcTime+""+lrcText);
         };
     };
 };
 bdSyncLRC.prototype.preSyncLRC=function()
 {
     if(this.getContent()==null||this.getContent()=="")return;
     lrcLines=this.getContent().split("\n");
     tmpArr=new Array();
     for(i=0;i<lrcLines.length;i++)this.multiLRC(replaceStr(lrcLines[i]));
     this.preLRC.sort();
     var tmpVar="aaa";
     for(i=this.preLRC.length-1;i>=0;i--)if(this.preLRC[i]==tmpVar)
     {
         tmpVar=this.preLRC[i];
         this.preLRC.splice(i,1);
     };
     else tmpVar=this.preLRC[i];
     preTime=0;
     indexLRC=1;
     tmpArr[0]=new LRCItem(0,"");
     for(i=0;i<this.preLRC.length;i++)
     {
         if(this.preLRC[i].length>9)
         {
             tmpTime=getLyrcTime(this.preLRC[i]);
             tmpLrc=getLyrc(this.preLRC[i]);
             if(tmpTime<preTime)continue;
             preTime=tmpTime;
             var tmpItem=new LRCItem(tmpTime,tmpLrc);
             tmpArr[indexLRC++]=tmpItem;
         };
     };
     var tmpItem=new LRCItem(3600,"Over...");
     tmpArr[indexLRC]=tmpItem;
     this.setLRC(tmpArr);
 };
 function replaceStr(tmpStr)
 {
     return tmpStr.replace(/^\s*|\s*$/g,"");
 };
 function getLyrc(tmpStr)
 {
     try
     {
         tmpArray=tmpStr.split("]");
         return tmpArray[tmpArray.length-1];
     }
     catch(e)
     {
     };
     return"";
 };
 function getLyrcTime(tmpStr)
 {
     try
     {
         tmpChar=tmpStr.split("]")[0].split("[")[1];
         tmpVar=tmpChar.split(":");
         if(tmpVar.length<2)return 0;
         min=tmpVar[1].split(".")[0];
         tmpInt=parseInt(tmpVar[0])*60+parseFloat(min);
         if(!isNaN(tmpInt))return tmpInt;
     }
     catch(e)
     {
     };
     return 0;
 };
 function LRCItem()
 {
     var lrcTime=-1;
     var lrcContent="";
     if(arguments.length>=2)
     {
         this.lrcTime=arguments[0];
         this.lrcContent=arguments[1];
     };
 };
 bdSyncLRC.prototype.Exchange=function()
 {
     var xmlhttp=null;
     if(window.XMLHttpRequest)
     {
         xmlhttp=new XMLHttpRequest();
     };
     else
     {
         if(window.ActiveXObject)
         {
             try
             {
                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
             catch (ee)
             {
                 xmlhttp=new ActiveXObject("MSXML.XMLHTTP");
             };
         };
     };
     var tmpURL=this.getURL();
     thisObj=this;
     var tmpStr="";
     try
     {
         xmlhttp.open("GET",tmpURL,false);
         xmlhttp.onreadystatechange=function()
         {
             if((xmlhttp.readyState==4)&&(xmlhttp.status==200))
             {
                 tmpStr=bdBytes2Str(xmlhttp.responseBody);
                 thisObj.setContent(tmpStr);
             };
         };
         xmlhttp.send(null);
     }
     catch(ee)
     {
     };
 };
 bdSyncLRC.prototype.begin=function()
 {
     thisObj=this;
     tmpPlayerObj=thisObj.getPlayer();
     var tmpOutput=document.getElementById('LrcShower');
     var tmpI=setInterval(getlrc,100);
     var count=0;
 function getlrc()
 {
     if(typeof(thisObj.getContent())!="undefined")
     {
         clearInterval(tmpI);
         thisObj.preSyncLRC();
         var tmp,i,tmpArray;
         tmpArray=thisObj.getLRC();
         tmp="<br>"+"<br>"+"<br>"+"<br>"+"<br>"+"<br>"+"<br>";
         for(i=0;i<tmpArray.length;i++)tmp+="<span style='font-size:12px;margin-left:12px'>&nbsp;<font color=#000000>"+replaceStr(tmpArray[i].lrcContent)+"</font></span><br>";
         thisObj.getOutput().innerHTML=tmp;
         getPlayingTime(thisObj.getPlayer(),thisObj);
     };
     else
     {
         if(count==50)
         {
             clearInterval(tmpI);
             tmpOutput.innerHTML="<br><br><br><br><br><br><span style='font-size:12px;margin-left:12px'>&nbsp;可能是因为网络的原因，系统没有找到合适 的歌词。请稍后重试";
         };
         else count++;
     };
 };
 };
 function getPlayingTime(playerObj,bdLRCObj)
 {
     try
     {
         tmpbdLRCObj=bdLRCObj;
         var tmpPlayerObj=playerObj;
         if(typeof(tmpPlayerObj)=="string")tmpPlayerObj=document.getElementById(tmpPlayerObj);
         window.setTimeout("getPlayingTime(tmpPlayerObj,tmpbdLRCObj)",1000);
         bdsyncLyrc(tmpbdLRCObj);
     }
     catch(e)
     {
         document.title="getPlayingTime..."+e.toString();
     };
 };
 var preMatchLrcLine=-1;
 function bdsyncLyrc(bdLRCObj)
 {
     try
     {
         tmpPlayer=bdLRCObj.getPlayer();
         if(playerTypeStr=="MediaPlayer1")playerStatus=tmpPlayer.PlayState;
         else playerStatus=tmpPlayer.GetPlayState();
         if(playerStatus!=2&&playerTypeStr=="MediaPlayer1")return;
         if(tmpPlayer)
         {
             if(playerTypeStr=="MediaPlayer1")currentTime=tmpPlayer.CurrentPosition;
             else        currentTime=tmpPlayer.GetPosition()/1000;
             bdLRCObj.preSyncLRC();
             tmpLrcs=bdLRCObj.getLRC();
             tmpScroll=bdLRCObj.getOutput();
             tmpScrollId=bdLRCObj.getOutput();
             perLength=bdLRCObj.scrollMoveLen;
             var tmpLrcContent=new Array(20);
             var color=new Array(21);
             var lineCount=new Array(tmpLrcs.length);
             var perLineCount=new Array(tmpLrcs.length);
             var i;
             for(i=0;i<tmpLrcs.length;i++)
             {
                 lineCount[i]=Math.floor(tmpLrcs[i].lrcContent.length/67);
                 perLineCount[i]=0;
                 for(j=0;j<i;j++)perLineCount[i]+=lineCount[j];
             };
             color[0]="#000000";
             color[1]="#0d0500";
             color[2]="#1a0a00";
             color[3]="#270f00";
             color[4]="#341400";
             color[5]="#411900";
             color[6]="#4e1e00";
             color[7]="#5b2300";
             color[8]="#682800";
             color[9]="#752d00";
             color[10]="#823200";
             color[11]="#8f3700";
             color[12]="#9c3c00";
             color[13]="#a94100";
             color[14]="#b64600";
             color[15]="#c34b00";
             color[16]="#d05000";
             color[17]="#dd5500";
             color[18]="#ea5a00";
             color[19]="#f75f00";
             color[20]="#ff5a00";
             for(i=0;i<20;i++)tmpLrcContent[i]="<br>"+"<br>"+"<br>"+"<br>"+"<br>"+"<br>"+"<br>";
             var tmpMatchLrcLine=0;
             for(j=0;j<tmpLrcs.length;j++)
             {
                 nowLrc=tmpLrcs[j];
                 nextLrc=tmpLrcs[(j<tmpLrcs.length-1)?j+1:j];
                 nowTime=nowLrc.lrcTime+bdLRCObj.offsetTime;
                 nextTime=nextLrc.lrcTime+bdLRCObj.offsetTime;
                 if(nowTime<=currentTime&&currentTime<nextTime)
                 {
                     tmpMatchLrcLine=j;
                     for(i=0;i<20;i++)tmpLrcContent[i]+="<span style='font-weight:bold;font-size:12px;margin-left:12px'>&nbsp;<font color="+color[i+1]+">"+replaceStr(tmpLrcs[j].lrcContent)+"</font></span><br>";
                     j+=1;
                     tmpInt=tmpLrcs.length-j;
                     for(;j<tmpLrcs.length;j++)for(i=0;
                     i<20;
                     i++)tmpLrcContent[i]+="<span style='font-size:12px;margin-left:12px'>&nbsp;<font color=#000000>"+replaceStr(tmpLrcs[j].lrcContent)+"</font></span><br>";
                     if(tmpInt<8)for(j=0;
                     j<=8-tmpInt;
                     j++)for(i=0;
                     i<20;
                     i++)tmpLrcContent[i]+="<span style='font-size:12px;margin-left:12px'>&nbsp;<font color=#000000></font></span><br>";
                     break;
                 };
                 else
                 {
                     if(j==preMatchLrcLine)for(i=0;
                     i<20;
                     i++)tmpLrcContent[i]+="<span style='font-size:12px;margin-left:12px'>&nbsp;<font color="+color[19-i]+">"+replaceStr(tmpLrcs[j].lrcContent)+"</font></span><br>";
                     else for(i=0;i<20;i++)tmpLrcContent[i]+="<span style='font-size:12px;margin-left:12px'>&nbsp;<font color=#000000>"+replaceStr(tmpLrcs[j].lrcContent)+"</font></span><br>";
                 };
             };
             if(preMatchLrcLine!=tmpMatchLrcLine)
             {
                 if(Math.abs(tmpMatchLrcLine-preMatchLrcLine)>1)
                 {
                     tmpScroll.innerHTML=tmpLrcContent[19];
                     tmpScrollId.scrollTop=(tmpMatchLrcLine+perLineCount[tmpMatchLrcLine]+1)*perLength;
                     tmpScrollId.scrollTop=(tmpMatchLrcLine+perLineCount[tmpMatchLrcLine]+1)*perLength;
                 };
                 else
                 {
                     var count=0;
 function scrollAdd()
 {
     tmpScroll.innerHTML=tmpLrcContent[19];
     tmpScrollId.scrollTop+=2*(1+lineCount[preMatchLrcLine]);
     count++;
     if(count==10)clearInterval(loaderInterval);
 };
 var loaderInterval=setInterval(scrollAdd,25);
 };
 };
 preMatchLrcLine=tmpMatchLrcLine;
 };
 }
 catch(e)
 {
 document.title="bdsyncLyrc="+e.toString();
 };
 };

还有一个VBScript函数，供上面函数中调用，用来解决乱码问题

复制内容到剪贴板

代码:

<SCRIPT language=VBScript>
 Function bdBytes2Str(vIn)
          strReturn = ""
          For i = 1 To LenB(vIn)
 ThisCharCode = AscB(MidB(vIn,i,1))
                If ThisCharCode < &H80 Then
           strReturn = strReturn & Chr(ThisCharCode)
                Else
           NextCharCode = AscB(MidB(vIn,i+1,1))
           strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))
         i = i + 1
                End If
            Next
     bdBytes2Str = strReturn
         End Function
 </SCRIPT>

分类:Ajax | 固定链接 | 查看次数: 364

用独立服务器的站长常犯的错误

作者:51itcn 日期:2009-03-20

1、除非你确认自己掌握了，否则不要去试WIN2003的防火墙
WIN2003防火墙打开后，默认是禁止3389端口的，有的朋友是改了端口却忘记了在防火墙里开放新的端口。有的朋友则人根本
不会改端口，直接在服务器上试的，结果没改成功，重启就进不去了。

2、千万小心，不要禁用了网卡
在服务器上可要小心，本地连接上右键一下，然后左键一下，很可能就点了禁用了。结果可想而知。

3、别忘记了更改超管密码
一般IDC给用户的服务器装完了系统都有个默认的密码的，不修改的话很容易被黑。

4、请用检测软件查看您服务器的硬件
使用检测软件可以得到你服务器中大部分硬件的品牌和型号，比如你可以知道租用商是否真的给你使用的是金士顿内存。这样
，当你的服务器发生故障时，你就可以根据这些信息来判断是否有可能的是硬件问题。

5、不要在服务器上浏览网页或者运行没有用过的程序
或者说不要给服务器太多不安全的因素。在服务器上浏览网页将可能使服务器感染木马或者病毒。在服务器上运行没有用过的
程序也有同样的危险，或者有可能导致服务器上的默认设置被改变。

6、尽量不要一边看教程一边在服务器上设置
阿江并不是一个笨人，但是有时候还是会犯错误的，所以就算教程是最新的最完整的，最好先在自己的电脑上演练一遍，确认
没有问题了再在服务器上测试。

8、有了服务器，就要学着去使用它。
使用服务器，这看似很简单的事情，其实是一门很大的学问，没有哪个高手可以说他可以解决服务器里的所有的问题，更没有
谁敢说他的服务器不会被黑。那么千万不要把维护服务器的希望寄托在临时找人帮忙上，要么就找个能长期帮自己的人，要么
就干脆聘技术员，最好还是自己尽快学起来，因为没有谁会比你自己更了解你的服务器了。

9、一定不要忘记了做备份
虽然大多数时候备份是用不上的，但是一旦用上的时候没有备份那就是天大的灾难。在使用服务器的初期，误操作导致数据丢
失的可能性很大，病毒和黑客入侵也会使你的网站数据毁于一旦，并且不要忘记了服务器最容易损坏的硬件就是硬盘。

分类:Ajax | 固定链接 | 查看次数: 321

Ajax的安全性问题

作者:51itcn 日期:2009-03-20

最近学习清华的网站开发非常之旅《Ajax从入门到精通》。学到一些东西，与大家分享一下。Ajax虽然很好
，但是在安全上需要注意。根据书中讲解，总结了以下3个法则。

（1）身份验证
在传统Web应用程序中，当用户需要访问某些受保护的页面时，就需要先对用户进行身份验证，验证通常
在被访问的页面上进行。在Ajax中，用户访问少数几个页面，而这些少量的页面通过XMLHttpRequest请求后
台页面以获得丰富的数据或进行各种操作。这时身份验证不能仅仅在被用户访问的少数几个页面上进行，而
同时也需要在与这些页面发生数据交互的所有后台页面上进行。
（2）防范SQL注入
虽然Ajax请求是在浏览器后台发生的，用户不能直接控制，但是因为Ajax技术总是基于HTTP模型，所以
即使使用Ajax来代替传统模式的交互，在面对SQL注入攻击时仍然没有任何先天优势。所以所有传统Web应用
程序使用的防范SQL注入的方法，Ajax应用程序都需要。
防范SQL注入的一般方法是对用户提交的数据进行验证，以及对输出的错误信息进行必要的处理。对提交的数
据进行验证包括数据类型的检查、数据长度的检查以及一些与SQL语句有关的敏感字符的过滤。对错误信息的
处理表示当SQL语句发生错误时，不要直接将错误信息暴露给用户，而是输出一个替代的、不包含任何内部错
误信息的友好错误提示，这样攻击者就不能依靠错误提示对数据库结构进行猜解。
（3）防范JavaScript注入
一般情况下，这种攻击是毫无意义的，因为攻击者改变的只是页面在攻击者本地的一个副本。但是如果
在一个高度依赖客户端脚本的应用程序中，某个关键的数据被修改了，而当这个数据被提交到后台程序时，
且没有对其有效性进行足够的验证，则可能产生严重的后果。
防范JavaScript注入的方法，就是将关键的业务逻辑放在后台处理，这样就可以避免JavaScript注入的
攻击，同时还需要对关键的业务数据建立有效的校验机制，以防止虚假数据的提交。
大家要对这本书感兴趣，可以看看http://www.china-pub.com/42679。

分类:Ajax | 固定链接 | 查看次数: 372