AJAX进行动态幻灯片广告设计[转]

最新推荐文章于 2024-07-23 14:05:29 发布

weixin_33682719

最新推荐文章于 2024-07-23 14:05:29 发布

阅读量367

点赞数

文章标签：数据库 c# javascript ViewUI

原文链接：http://www.cnblogs.com/qiangshu/archive/2010/07/29/1788091.html

版权

无论是在网易，腾讯，还是新浪网等大型网站的首页或显要位置，都会有这样类似于幻灯片的广告或图片展示(以下简称幻灯片广告)，看下面：

制作本示例只需要三个最基本的文件，它们放置在同一个文件夹下

ashx文件夹

flash.htm

flash.ashx

flash.mdb

flash.htm的代码比较简单，但是最关键的，它只有脚本块，没有html代码，下面贴出来看：

< script type = " text/javascript " >

< / script>

因为我所用的浏览器是IE的，所以在创建xmlhttprequest对象时，我只考虑了IE环境下的情况，事实时，我们还要兼顾一下FireFox等浏览器，通常，我们会采取类似下面的方法创建xmlhttprequest对象：

function createXMLHttpRequest() ...{

     if (window.ActiveXObject) ...{
        xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );
    }
     else if (window.XMLHttpRequest) ...{
        xmlHttp = new XMLHttpRequest();
    }

}

以上代码都是现成的，就不多说了。下面接着看flash.ashx文件。在上一节的“即划即译”设计随笔中，我们提到了可以借助于.net提供的ashx(active server handler extension)轻松实现：

<% @ WebHandler Language = " C# " Class = " Handler " %>

using System;
using System.Web;
using System.Text;
using System.Data.OleDb;
public class Handler : IHttpHandler ...{
     public void ProcessRequest (HttpContext context) ...{
        context.Response.ContentType = " text/plain " ;
        StringBuilder img_list = new StringBuilder( " var imgUrl=new Array();  var imgLink=new Array();   var imgText=new Array(); " );
        OleDbConnection conn = new OleDbConnection( " Provider=Microsoft.Jet.OLEDB.4.0;Data Source=style\ashx\flash.mdb; " );
        OleDbCommand comm = conn.CreateCommand();
        comm.CommandText = " select top 5 * from ad order by rq desc " ;
        conn.Open();
         using (OleDbDataReader dr = comm.ExecuteReader())
        ...{
             int i = 1 ;
             while (dr.Read())
            ...{
                img_list.AppendFormat( " imgUrl[{3}]='{0}';imgLink[{3}]='{1}';imgText[{3}]='{2}'; " , dr[ " imgURL " ].ToString(), dr[ " imgLink " ].ToString(), dr[ " imgText " ] is System.DBNull ? string .Empty : dr[ " imgText " ].ToString(), i ++ );
            }

        }
        conn.Close();
        context.Response.Write(img_list.ToString());
        context.Response.Flush();
        context.Response.End();
    }

     public bool IsReusable ...{
         get ...{
             return true ;
        }
    }
}

在上面的处理文件中，主要做了以下工作，查询数据库数据，获取数据并格式化。

在格式化数据时，我采用了以实例化数组作为响应数据的形式，把从access数据库读取到的数据，存入imgURL,imgLink,imgText三个数组中，分别存储每个显示图片的图片地址，链接地址和提示文本。这样一来，服务器端处理程序直接向客户端返回了客户端乐于接受的数组（Array）对象，再在客户端接受这些数据就很方便了.

说到这里，我们后退一步，再来看一下下面一段代码：

var xmlhttp = new ActiveXObject( " MSXML2.XMLHTTP " );

    xmlhttp.open( " post " , " flash.ashx " , false );
    xmlhttp.send( "" );
     var res = xmlhttp.responseText
    eval(res); // 直接计算表达式的值

看到eval()方法了吧，如此简单！

好，现在我们已经把客户端和服务器端都准备好了，现在来就剩下数据的存储和读取了。数据库flash只有一个表ad:

到此，我们的幻灯片广告设计就结束了。

转载于:https://www.cnblogs.com/qiangshu/archive/2010/07/29/1788091.html

weixin_33682719

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX进行动态幻灯片广告设计[转]

无论是在网易，腾讯，还是新浪网等大型网站的首页或显要位置，都会有这样类似于幻灯片的广告或图片展示(以下简称幻灯片广告)，看下面：制作本示例只需要三个最基本的文件，它们放置在同一个文件夹下ashx文件夹 flash.htm flash.ashx flash.mdbfl...
复制链接

扫一扫