非ajax:使用ASP仿GOOGLE下拉菜单

非ajax:使用ASP仿GOOGLE下拉菜单

　本人99机票网，是一个忠诚的ASP程序员，固然近年来有很多比ASP更先进的编程语言出现(如.net，PHP等)，但我依然没有放弃ASP语言，我觉得ASP作为一个编程语言，功能还是非常强大的，一般的网站功能用ASP都可以实现，如果你说不能实现，那原因可能是你学得还不够精。

　　最近不知怎么了，总有一些朋友来问如何制作仿GOOGLE下接提示菜单的问题，每天至少有一个。其实问题的答案在网上一搜一大堆，然而他们却依然选择和我交流，而不采用网上现成的代码，什么原因呢?

　　为了找到这个原因，我上网看了一些现成的“仿GOOGLE菜单”代码，发现非常繁锁，近千行代码，密密麻麻，让人看了很眼晕。并且这些代码制作往往在强调一点，那就是AJAX。

　　说心里话，本人做ASP程序数年，一直做服务器程序的工作，JS都很少接触，所以，他们所谓的AJAX，我根本不懂是个什么东东。可是在这个时候，为了弄清楚那个神秘的“仿GOOGLE菜单”，也不得不忍晕看上一看。

　　本人觉得，所谓的AJAX，并不是什么新语言，充其量说是JS的一个对象或者组件而已，因为JS是学习网页制作应该掌握的知识，所以AJAX也谈不上什么难与不难的了。

　　大家都知道，AJAX的主要功能就是在不刷新网页的新提下向服务器提交请求，并将返回的数据显示在网页上，在这里我要说几点不同意见。

　　在网页编程语言中，大致分两类：一类是服务器语言，如ASP;另一类是客户端语言，如JS。这两种语言在功能上是有分工的，各有优势。比如说，JS是在客户端运行的语言，可以减少服务器压力，由于是在本地运行，不存在数据传输问题，所以速度相对也比较快;ASP，是服务器运行，运行后直接将结果返回给用户，用户不可能知道他们运行过程是怎么样的，这一样以来就比较安全，有些隐私可以得到很好的保护。但两个语言又有一些共同的功能，如JS也可以读取数据库充当ASP的角色等。但，我们不能因为JS有这个功能就使用它来实现读写数据库，因为它不安全，这样做不合理。

         就像一个网页制作小组一样，小组里有网页美工和程序员，网页美工的主要职责是使页面变得漂亮，程序员的职责是为漂亮的页面提供内容。但他们一些交融的地方，如，美工也得懂点程序，程序员也得懂点美工，否则没法很好的融合，可是我们能因为有了程序员就把美工解雇了或者有了美工就不要程序员了吗?这显然是不能的。ASP和JS之间也是这样一个关系，需要从服务器去调取数据库的事情，最好还是交给ASP来做，至于什么所谓的AJAX，我建议：让它休息吧。

　　好了，书归正传，我们来谈如何用ASP实现“仿GOOGLE下拉菜单”，我们先来分析一下GOOGLE下拉菜单。

　　一、GOOGLE接下来的菜单是个什么东东?

　　1、菜单的本身是一个层

　　要想做菜单必须先弄明白那个所谓的菜单是个什么东东，否则会失去方向，这很重要。

　　就象前段时间有个朋友问我关于链接中的TITLE的问题，大家知道，在链接中加个TITLE，当鼠标放在链接上时将会显示title的内容，但内容很简单，不能显示html标记，并且要鼠标在上面停留一会才能显示。某日这位朋友从别的网站发现，有的title显示速度非常快，并且可以在里面加入图片等信息，非常漂亮，但在网上查来半天也没弄明白怎么制作出来的。就来问我，其实大家都知道，那根本就不是什么title ，而是一个层，如果你千万百计的寻找title的属性参数试图实现这一功能，那到头来肯定是一场空。

　　今天我们谈的GOOGLE下拉菜单中的10行文字，咋一看貌似表单中的SELECT，其实不是，它事实上是一个层。这个层在某种条件下会显示或隐藏。

　　2、如何实现鼠标移动时的选取效果?

　　当鼠标某一行时，我们通CSS设置将背景改成兰色就OK了。

　　3、选取时，让选取行的内容填入文本框中

　　这个都不用多说了，JS最善长做这些工作了，当onclick是让文本框的值等于选取行的值就是了。

　　二、菜单显示的条件设置

　　说到这里大家会发现，一切都变得简单多了。下拉菜单就是一个层，而后在层里加入一JS代码可以实现一些简单的选取效果就可以了，如果不调取服务器数据库的话，我想现在我们就可以制作出一个下拉菜单了。分以下几步：

　　1、创建一个文本框。加个鼠标事件onkeydown="showcaidan()",它的意思是当在文本框内输入字符时激活showcaidan，好理解吧?

　　2、创建一个层，用CSS把它定位到文本框的下方，通过一些设计使它的样子和GOOGLE下拉菜单一样，然后把display设置为none，也就是隐藏它，需要的时候再把他显示出来。(这个不难吧，懂点CSS就可以做出来了)

　　3、用JS创建一个function，主要功能是获取文本框的值然后在第2步创建的层中显示相关内容。

　　大功告成。通以上三步，我们发现，已经可以显示下拉菜单了，只不过是菜单的内容不是服务器提供的，而JS里设置的内容，下面我们说说如何从服务器获取内容，这也是所谓的AJAX的奥妙之处吧，我们来看一下，怎么用比AJAX更简单的方法实现它。

　　三、调取服务器信息

　　调取服务器内容，大家可能都认为AJAX比较不错，我也不好说什么，但对是初学者来讲AJAX相对比较难理解一些，尤其是没有学过xmlhttp的，更是不好学，所以现在我们看一下如何不用AJAX来实现这一功能。

　　在静态网页上调用动态数据，似乎很难。其实我们只要回顾一下JS里面的一些功能就会发现，其实很简单。

　　在JS中有一段代码： ,这段代码大家都不陌生吧，我想只要懂一点JS都会用这个代码就行了，我要告诉大家的是，我们就用它来实现动态调取数据的功能。

　　我们来把这段代码演变一下,把它写成：,呵呵，大家是不是明白了，这个代码里引用了一个ASP页面，调取了动态数据。

　　当在方本框中输入“中国”时，设置function在第2步创建的层中显示 ，这不难吧。呵呵

　　好了，这个问题就说到这儿，大家可能会说：噢，原来如此简单……

　　另外说明一点，以后要问问题的朋友不要再加我QQ好友了，实在太多，开一下临时会话就可以了，感谢理解。