月度存档: 七月 2006

AJAX初体验之实战篇——打造博客无刷新搜索

如果你对AJAX不是很了解,可以先看看这篇教程的前篇《AJAX初体验之上手篇》

现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务。而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面,然后在后台生成搜索结果,再呈现给用户,这过程之中浪费了一些带宽,如博客的侧边栏。要节约这一些带宽,我们可以用AJAX来打造自己的无刷新日志搜索。

在本篇教程中,数据库的表名和日志查看页面以L-Blog为例,因为我的博客程序是从L-Blog修改而来^_^。

本教程中的例子已经通过实际测试,可以直接在L-BlogFBS中使用。当然,要真正应用的话还是需要做一些美化及完善的。

在数据库中日志内容数据表名为blog_Content,其中日志ID为log_ID,日志标题为log_Title,日志查看页面为blogview.asp,参数为日志logID。有了这些资料,就可以开始创建搜索结果的XML文档模板了。在显示搜索结果时,需要显示日志的标题,以及日志的ID来创建到查看日志的链接。

搜索结果模板sample.xml

  • <?xml version=”1.0″ encoding=”utf-8″?>
  • <blogsearch>
  •     <!– 每一个reslut就是一个搜索结果 –>
  •     <result>
  •         <!– 日志的ID –>
  •         <logid>1</logid>
  •         <!– 日志的标题 –>
  •         <logtitle>AJAX初体验之上手篇</logtitle>
  •     </result>
  • </blogsearch>

每个result就是一个搜索结果,为了处理没有找到相关内容的情况,我定义了当搜索结果为空时logid为#。

在完成XML文档模板之后,就可以用ASP来动态生成搜索结果需要的XML文档了。搜索的关键字采用POST方式来传递。

搜索结果输出ajaxsearch.asp

  • <!– #include file=”commond.asp” –>
  • <!– #include file=”include/function.asp” –>
  • <%
  • ‘ commond.asp为数据库连接文件
  • ‘ function.asp中有要用到的函数CheckStr
  • Dim Search_Word,XML_Result,rsSearch,sqlSearch
  • Set rsSearch=Server.CreateObject(“ADODB.RecordSet”)
  • ‘ 获取搜索关键字
  • Search_Word=CheckStr(Trim(Request.Form(“searchword”)))
  • ‘ XML文档头
  • XML_Result=”<?xml version=””1.0″” encoding=””utf-8″”?><blogsearch>”
  • IF Search_Word<>Empty Then
  •     ‘ 创建查询SQL语句
  •     sqlSearch=”SELECT log_ID,log_Title,log_Content FROM blog_Content WHERE log_Title”_
  • &” LIKE ‘%”&Search_Word&”%’ AND log_IsShow=True ORDER BY log_ID DESC”
  •     ‘ 打开记录集
  •     rsSearch.open sqlSearch,Conn,1,1
  •     ‘ 如果没有搜索结果就产生一个结果,logid为#,标志着没有搜索结果
  •     IF rsSearch.BOF AND rsSearch.EOF Then 
  •         XML_Result=XML_Result&”<result><logid>#</logid><logtitle /></result>” 
  •     End IF
  •     ‘ 循环输出搜索结果
  •     Do While Not rsSearch.EOF
  •         XML_Result=XML_Result&”<result><logid>”&rsSearch(“log_ID”)&”</logid><logtitle><![CDATA[“&rsSearch(“log_Title”)&”]]></logtitle></result>”  ‘ 循环输出每一个结果
  •         rsSearch.MoveNext
  •     Loop
  • Else
  •     ‘ 关键字为空,则返回无搜索结果
  •     XML_Result=XML_Result&”<result><logid>#</logid><logtitle /></result>”
  • End IF
  • XML_Result=XML_Result&”</blogsearch>”
  • ‘ 设置MIME Type为XML文档
  • Response.ContentType = “application/xml”
  • ‘Response.CharSet = “utf-8”
  • ‘ 输出搜索结果
  • Response.Write(XML_Result)
  • %>

有了后台搜索结果输出的部分,就可以开始写前台搜索的部分了。

首先需要的是给用户输入搜索关键字及显示搜索结果的地方,我用div来分别显示这两个部分:

ajaxsearch.htm

  • <!– 要用到JavaScript,外部链入 –>
  • <script type=”text/javascript” src=”ajaxsearch.js”></script>
  • <!– 用户输入部分 –>
  • <div>
  •     <!– 因为没有用form,所以要处理input的keydown事件。在用户按下回车后搜索 –>
  •     <input type=”text” id=”searchword” onkeydown=”if(event.keyCode==13) AjaxSearch();” /> 
  •     <!– 搜索按钮 –>
  •     <input type=”button” onclick=”AjaxSearch();” value=”搜索” />
  • </div>
  • <!– 搜索结果显示部分 –>
  • <div id=”search_result”>
  •     <!– 初始时提示用户输入搜索关键字 –>
  •     <ul><li>请输入关键字</li></ul>
  • </div>

完成了用户输入及结果输出的部分,就可以开始写最后的部分——客户端程序了。

首先是创建XMLHttpRequest对象,这部分代码不再多说,对AJAX稍有接触应该都看得懂这段代码,前篇教程中也有详细注释:

ajaxsearch.js(part1)

  • var xmlObj = false;
  • var xmlResult;
  • try {
  •     xmlObj=new XMLHttpRequest;
  • }
  • catch(e) {
  •     try {
  •         xmlObj=new ActiveXObject(“MSXML2.XMLHTTP”);
  •     }
  •     catch(e2) {
  •         try {
  •             xmlObj=new ActiveXObject(“Microsoft.XMLHTTP”);
  •         }
  •         catch(e3) {
  •             xmlObj=false;
  •         }
  •     }
  • }
  • if (!xmlObj) {
  •     alert(“XMLHttpRequest init Failed!”);
  • }

接下来是发送搜索请求部分:

ajaxsearch.js(part2)

  • function AjaxSearch() {
  •     var searchword;
  •     // 获取搜索关键字,并且进行URLEncode
  •     searchword=escape(document.getElementById(“searchword”).value);
  •     if(searchword==””) {
  •         // 如果关键字为空,则提示用户输入关键字
  •         document.getElementById(“search_result”).innerHTML=”<ul><li>请输入关键字!</li></ul>”;
  •         return;
  •     }
  •     // 给出提示,正在搜索
  •     document.getElementById(“search_result”).innerHTML=”<ul><li>正在加载,请稍候</li></ul>”;
  •     // 打开一个连接,采用POST
  •     xmlObj.open (“POST”, “ajaxsearch.asp”, true);
  •     // 设置请求头,表单内容格式为URLEncoded
  •     xmlObj.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
  •     // 设置完成请求后响应函数
  •     xmlObj.onreadystatechange=function() {
  •         // 完成响应
  •         if(xmlObj.readyState==4) {
  •             // 状态正常
  •             if(xmlObj.status==200) {
  •                 // 设置xmlResult为搜索结果XML文档
  •                 xmlResult=xmlObj.responseXML;
  •                 // 调用AjaxShowResult()显示搜索结果
  •                 AjaxShowResult();
  •             }
  •         }
  •     }
  •     // 发送请求,内容为搜索的关键字
  •     xmlObj.send(“searchword=”+searchword);
  • }

最后是搜索结果的显示:

ajaxsearch.js(part3)

  • function AjaxShowResult() {
  •     var results,i,strTemp;
  •     // 获取搜索结果集合
  •     results=xmlResult.getElementsByTagName(“result”);
  •     // 用无序列表来显示搜索结果
  •     strTemp=”<ul>”;
  •     // 首先判断搜索结果是否为空
  •     if(results[0].getElementsByTagName(“logid”)[0].firstChild.data==”#”)
  •         // 是空,则显示没有符合的搜索结果
  •         strTemp=strTemp+”<li>无搜索结果</li>”;
  •     else
  •         // 循环输出每个搜索结果
  •         for(i=0;i<results.length;i++)
  •             strTemp = strTemp + “<li><a href=’blogview.asp?logID=” + results[i].getElementsByTagName(“logid”)[0].firstChild.data + “‘>” + results[i].getElementsByTagName(“logtitle”)[0].firstChild.data + “</a></li>”; 
  •     strTemp=strTemp+”</ul>”;
  •     // 显示搜索结果
  •     document.getElementById(“search_result”).innerHTML = strTemp
  • }

至此,一个完整的AJAX实例完成了。

几个经验:

1. 页面使用UTF-8编码,这样可以省却很多烦恼

2. 在获取搜索结果时,因为用的getElementsByTagName,返回的是一个集合,所以要在结果之后加上下标,如例子中的:

    results[i].getElementsByTagName(“logid”)[0].firstChild.data

3. 建议使用document.getElementById()来获取对象,而不要使用document.all这样的方法

参考资料:

1. 《AJAX初体验之上手篇》

2. 发布三个ajax相关的函数,包括无刷新提交表单等

下载文件 实例中的三个文件打包下载

[本日志由 xujiwei 于 2006-08-08 01:10 PM 编辑]

Comments (8), Views (51513), Pings (1), Leave a response!

XML+XSL+CSS+ASP打造留言簿

前段时间无意间看到一个博客的RSS可以用XSL格式输出并且能在Firefox里浏览,想到自己以前写的一个XML留言簿因为不兼容Firefox所不了了之了,现在看到他的能在Firefox浏览就觉得很好奇,看了一下代码,一句一句的比对,最后终于找到了原因,也就把这个留言簿给完成了。因为是一个简单的XML留言簿,所以取名SXGB(Simple XML GuestBook)。

查看留言本演示,管理密码为test:

首先定义留言簿的XML文档的格式。作为一个留言簿,不需要太复杂的内容,于是我就给留言内容分为3个部分:留言者姓名、留言者主页和留言内容。另外,一个留言簿还需要有使用者的一些信息,包括用户名和用户主页。再有,在留言比较多时还需要分页信息。大致结构完成后就可以开始写XML文档模板了。

XML文档根元素定义为gbook

XML文档模板gbook.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<!– DTD file –>
<!DOCTYPE gbook SYSTEM “sxgb.dtd”>
<!– XSL file –>
<?xml-stylesheet type=”text/xsl” href=”gbook.xsl”?>
<gbook>
<!– 留言簿相关信息 –>
<info>
<!– 用户名 –>
<user>HotHeart</user>
<!– 用户主页 –>
<home>http://www.xujiwei.cn</home>
<!– 分页信息,分别为目前所在页,总页数,上一页,下一页 –>
<pagenow>1</pagenow>
<pagetotal>1</pagetotal>
<pageprev>1</pageprev>
<pagenext>2</pagenext>
<!– 是否已经登陆,用来处理是否显示登陆框 –>
<logined>NO</logined>
</info>
<!– 留言列表 –>
<messages>
<!– 一个留言 –>
<message>
<!– 留言ID –>
<id>1</id>
<!– 留言者姓名 –>
<username>Admin</username>
<!– 留言时间 –>
<time>2005-08-09 12:00</time>
<!– 留言者主页 –>
<homepage>http://www.xujiwei.cn/</homepage>
<!– 留言内容 –>
<content><![CDATA[ 留言内容 ]]></content>
</message>
</messages>
</gbook>

要注意在引用XSL时不能用

<?xml:stylesheet type=”text/xsl” href=”gbook.xsl”?>

xml和stylesheet之间应该用一杠(-)而不能用冒号(:),在Firefox里是不支持用冒号的。

一个好的XML文档,除了要有结构性,还应该要有有效性,所以在XML文档的一开头就定义了文档类型定义(DTD) sxgb.dtd,下面就来把这个文档类型定义给完成。因为已经设计好留言簿XML文档的结构,所以写出DTD是很方便的。

继续阅读 »

用VB写一个你自己的Flash播放器

前天在PConline下了一个孙鑫的《Java从入门到精通》的视频教程,Flash格式,在看的时候感觉很不爽,每一课开始的时候有一大段广 告,而且前面的一部分颇为啰嗦,讲了乱七八糟的东西,不知道是不是因为“入门”的关系,然后就把以前做的一个Flash播放器找出来,直接跳到自己要看的 地方~

要想用VB做一个自己的Flash播放器还是比较方便的,因为Macromedia已经提供了Shockwave Flash控件, 可以方便来的播放Flash影片。要想使用这个控件,首先要在工程里添加这个控件,选中菜单“工程->部件”,找到 Shockwave Flash,打上勾,确定就可以了。另外,因为要加载Flash影片,所以我们还需要加入对话框控件 Microsoft Common Dialog Control。

做这个Flash播放器之前,先用对象浏览器来看一下 Shockwave Flash控件有哪些我们需要的事件、方法和属性。

因为我们做的Flash播放器比较简单,所以没有可以利用的控件事 件。

方法:

Sub Back()

跳 到前一帧,相当于Flash右键菜单中的快退

Function CurrentFrame() As Long

获 取当前播放的为第几帧

Sub Forward()

跳到后一帧,相当于Flash 右键菜单中的快进

Sub GotoFrame(FrameNum As Long)

跳 到指定帧,这是一个相当有用的方法,也是要做这个Flash播放器的理由之一了

Sub Play()

播 放,相当于Flash中的播放

Sub Stop()

停止,需要注意的是这个是停 止,而不是暂停,停止后再开始播放将从第1帧开始

Sub StopPlay()

暂 停,暂停后再播放是继续暂停之前的状态

属性:

Property Movie As String

影 片路径,用来加载要播放的Flash影片

Property Playing As Boolean

是 否正在播放

TotalFrames

Flash影片的总帧数

好了, 有了这些资料就可以开始写自己的Flash播放了~

打开窗体编辑器,先在窗体添加5个按钮,名称和Caption分别 为:cmdOpen(“打开”),cmdPlay(“播放”),cmdStop(“停止”),cmdPrev(“前一帧”),cmdNext(“后一 帧”)。为了能快整跳转,再添加一个水平滚动条,名称为hslFrame。当然,最重要的,Shockwave Flash不能少了,也要添加,名称为 swf。再者要打开文件,所以添加一个Microsoft Common Dialog Control,名称为dlg。

完成窗体的设计,开始编写代码。

‘ 先给打开按钮添加过程

Private Sub cmdOpen_Click()

dlg.Filter = “Flash(*.swf)|*.swf”  ‘ 设 置文件名过滤器,只显示Flash文件

dlg.ShowOpen

If dlg.FileName = “” Then Exit Sub ‘ 如 果用户点了取消则退出处理

swf.Movie = dlg.FileName           ‘ 加载影片

hslFrame.Max = swf.TotalFrames     ‘ 获 取总帧数,并赋值给滚动条的最大值

End Sub

‘ 接着是播放按钮

Private Sub cmdPlay_Click()

If swf.Playing = True Then   ‘ 如 果正在播放则暂停

swf.StopPlay

cmdPlay.Caption = “播 放” ‘ 按钮文本设置为“播放”

Else

swf.Play                 ‘ 否 则就继续播放

cmdPlay.Caption = “暂停” ‘ 按钮文本设置为“暂停”

End If

End Sub

‘ 停 止按钮

Private Sub cmdStop_Click()

swf.Stop  ‘ 停止

End Sub

‘ 前 一帧按钮

Private Sub cmdPrev_Click()

swf.Back

End Sub

‘ 后 一帧按钮

Private Sub cmdNext_Click()

swf.Forward

End Sub

‘ 为 了可以拖动滚动条来进行播放,下面处理hslFrame的OnChange事件

Private Sub hslFrame_Change()

swf.GotoFrame hslFrame.Value  ‘ 跳 到滚动条值所在的帧

End Sub

好了,一个简单的Flahs播放器就做好了,当然你也可以在这个此基础上加上更多的功能。