在新版的“电影资料库”中,ajax被我大范围尝试,以此来提高界面的友好性,比如输入提示效果,div模拟对话框和服务端方法异步调用。
其中,我最得意的是依靠ajax技术实现了一个类似蜘蛛程序(spider),完成表单自动填写。所谓蜘蛛程序,是一个自动在网络上抓取页面内容的程序,这项技术被广泛使用于搜索引擎中,类似google的蜘蛛程序在你的网站上从index开始抓取html内容,遇到连接在按照原先设置好的规则进入下一级页面抓取内容。而这原理也非常简单,只要实现一个类似xml-http访问指定的地址,剩下的就是如何分析html源代码及进行连接跳转了。
在新版本的电影资料库中,使用了asp.net2.0,webservices,atlas来实现所有的ajax实现。关于自动填写电影数据表单,是用户提供一个电影imdb编码,用户点一个连接来使用客户端的js方法来调用一个webservice,页面的内容抓取和分析都依靠webservice中的服务器端方法。调用返回后,在回调函数中赋值到对应的各项(关于atlas:http://atlas.asp.net)
function StartWebSpider() { var spider_loading=document.getElementById("spider_loading"); var imdbresult=document.getElementById('imdbresult'); var imdbvalue="/document.getElementById('<%=tx_imdb.ClientID" %>').value; if (imdbvalue=='') { imdbresult.innerHTML="<span style='background-color:red;color:white'>请填写imdb</span>"; spider_loading.innerHTML=""; return; } //////web_spider 抓取 tbmtg.style.visibility="visible";/////显示详细的表单内容 imdbresult.innerHTML=""; mtgreleased= com.thmz.mtgdb.service.Imdbservice.WebSpiderSearch(imdbvalue, OnSpiderSearchComplete,OnTimeOut,OnError);//////调用webservice,实现抓取 /////显示loading图标 spider_loading.innerHTML="<img src="/images/indicator.gif"/>抓取影片数据中..."; spider_loading.style.visibility="visible"; } //////异步调用超时时调用 function OnTimeOut(result) { //alert('time out'); var imdbresult=document.getElementById('imdbresult'); imdbresult.innerHTML="<span style='background-color:red;color:white'>超时</span>"; } ///////调用中发生异常时 function OnError(result) {// var imdbresult=document.getElementById('imdbresult');// imdbresult.innerHTML="<span style='background-color:red;color:white'>出错了 -_-! </span>"; var spider_loading=document.getElementById("spider_loading"); spider_loading.innerHTML="<span style='background-color:red;color:white'>在某个地方出错了-_-!</span>"; spider_loading.style.visibility="visible"; } ////////抓取成功后被调用的函数,在这里给各项表单赋值,返回的result为webservice返回的类型,这里为映射到电影数据库电影表中各个字段的一个简单类(参看ormapping) function OnSpiderSearchComplete(result) { var imdbresult=document.getElementById('imdbresult'); var imdbvalue="/document.getElementById('<%=tx_imdb.ClientID" %>').value; if (result!=null) { var tbmtg=document.getElementById("tbmtg"); tbmtg.style.visibility="visible"; //alert(result.titlecn) //debug.dump(result,'result',true);////atlas的调试方法 //imdbresult.innerHTML=result.titlecn; //填充到表单各项 var tx_titlecn=new Sys.UI.TextBox($('<%=tx_titlecn.ClientID %>')); tx_titlecn.initialize(); var tx_titleen=new Sys.UI.TextBox($('<%=tx_titleen.ClientID %>')); tx_titleen.initialize(); var tx_officalsite=new Sys.UI.TextBox($('<%=tx_officalsite.ClientID %>')); tx_officalsite.initialize(); var tx_manufacture=new Sys.UI.TextBox($('<%=tx_manufacture.ClientID %>')); tx_manufacture.initialize(); var tx_certificate=new Sys.UI.TextBox($('<%=tx_certificate.ClientID %>')); tx_certificate.initialize(); var tx_runtime=new Sys.UI.TextBox($('<%=tx_runtime.ClientID %>')); tx_runtime.initialize(); var tx_tbyear=new Sys.UI.TextBox($('<%=tx_tbyear.ClientID %>')); tx_tbyear.initialize(); if (result.titlecn!=null) tx_titlecn.set_text(result.titlecn); if (result.titleen!=null) tx_titleen.set_text(result.titleen); if (result.officalsite!=null) tx_officalsite.set_text(result.officalsite); if (result.manufacture!=null) tx_manufacture.set_text(result.manufacture); if (result.certificate!=null) tx_certificate.set_text(result.certificate); if (result.runtime!=null) tx_runtime.set_text(result.runtime); if (result.tbyear!=null) tx_tbyear.set_text(result.tbyear); var genrecol=result.genre.split("/"); for(g_i=0;g_i<genrecol.length;g_i++) { PutCheck(genrecol[g_i]);/////钩上对应的复选框 } var countrycol=result.country.split("/"); for(c_i=0;c_i<countrycol.length;c_i++) { PutCheck(countrycol[c_i]); } var languagecol=result.dialoglanguage.split("/"); for(l_i=0;l_i<languagecol.length;l_i++) { PutCheck(languagecol[l_i]); } var colorcol=result.color.split("/"); for(cl_i=0;cl_i<colorcol.length;cl_i++) { PutCheck(colorcol[cl_i]); } var soundmixcol=result.soundmix.split("/"); for(s_i=0;s_i<soundmixcol.length;s_i++) { PutCheck(soundmixcol[s_i]);//// } } //////结束loading标记 var spider_loading=document.getElementById("spider_loading"); spider_loading.innerHTML="<img src="/images/indicator.gif"/>抓取导演数据中..."; spider_loading.style.visibility="visible"; } //////钩选对应的复选框 function PutCheck(checkvalue) { alllabel=document.all.tags("label"); for(i=0;i<alllabel.length;i++) { //alert(alllabel(i).innerText); if (alllabel(i).innerText==checkvalue) { var targetcheck=document.getElementById(alllabel(i).htmlFor); if (targetcheck!=null) { targetcheck.checked=true; } } } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。