用JavaScript打造搜索工具栏

【 tulaoshi.com - Web开发 】

　　用JavaScript打造搜索工具栏

　　电子科技大学软件学院03级2班 周银辉

　　一:最终效果
　　

　　二:原理

　　如果你在Yahoo中搜索“中国”，那么在浏览器的地址栏将得到这样一串地址：http://search.cn.yahoo.com/search？ei=gbk&fr=fp-tab-web-ycn&meta=vl%
　　3Dlang_zh-CN%26vl%3Dlang_zh-TW&pid=ysearch&source=ysearch_www_hp_button
　　&p=%D6%D0%B9%FA&Submit=
　　看上去有些乱了，简化一下：http://search.cn.yahoo.com/search？&p=%D6%D0%B9%FA
　　这就是关键.其中&p=%D6%D0%B9%FA是搜索的关键字参数，而%D6%D0%B9%FA是“中国”的
　　Url编码。OK，我们只要能构造出这样的编码就好了。

　　三：URL编码
　　JavaScript的encodeURIComponent()函数可以完成编码工作。
　　比如上面的例子我们可以用“http://search.cn.yahoo.com/search？&p=”＋encodeURIComponent(“中国”)；来完成。

　　四：代码
　　(点击加号展开）

　　  1 %@ Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %
　　  2
　　  3 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
　　  4
　　  5 html xmlns="http://www.w3.org/1999/xhtml"
　　  6 head runat="server"
　　  7     titleSearch/title
　　  8 script language="javascript" type="text/javascript"
　　  9 // !CDATA[
　　 10
　　 11 function GetEncodeOfKey()
　　 12 {
　　 13     var strKey = window.document.getElementById("Text_Key").value;     
　　 14     return  encodeURIComponent(strKey);
　　 15 }
　　 16
　　 17 function GetUrl(site)
　　 18 {
　　 19     var encode=GetEncodeOfKey();
　　 20    
　　 21     //web
　　 22     if(document.getElementById("RadioButtonList_Kind_0").checked)
　　 23     {
　　 24         if(site=="google")
　　 25         {
　　 26             return "http://www.google.com/search？q="+encode+"&ei=UTF-8";
　　 27         }
　　 28         else
　　 29         {
　　 30             return "http://search.yahoo.com/search？p="+encode+"&ei=UTF-8";
　　 31         }
　　 32     }
　　 33     //mp3
　　 34     else if(document.getElementById("RadioButtonList_Kind_1").checked)
　　 35     {
　　 36         if(site=="google")
　　 37         {
　　 38             return "http://www.google.com/search？q="+encode+" mp3"+"&ei=UTF-8";
　　 39         }
　　 40         else
　　 41         {
　　 42             return "http://audio.search.yahoo.com/search/audio？&p="+encode+"&ei=UTF-8";
　　 43           
　　 44         }
　　 45     }
　　 46     //img
　　 47     else if(document.getElementById("RadioButtonList_Kind_2").checked)
　　 48     {
　　 49         if(site=="google")
　　 50         {
　　 51             return "http://images.google.com/images？q="+encode+"&ei=UTF-8";
　　 52         }
　　 53         else
　　 54         {
　　 55             return "http://images.search.yahoo.com/search/images？p="+encode+"&ei=UTF-8";
　　 56         }
　　 57     }
　　 58     else
　　 59     {
　　 60         //alert("err");
　　 61     }
　　 62    
　　 63    
　　 64 }
　　 65
　　 66 function Button_Google_onclick()
　　 67 {
　　 68     window.open(GetUrl("google"));
　　 69 }
　　 70
　　 71 function Button_Yahoo_onclick()
　　 72 {
　　 73     window.open(GetUrl("yahoo"));
　　 74 }
　　 75
　　 76 // ]]
　　 77 /script
　　 78 /head
　　 79 body
　　 80     form id="form1" runat="server"
　　 81     div
　　 82         br /
　　 83         br /
　　 84         strongspan style="font-size: 24pt; color: #336633"Searchbr /
　　 85         /span/strong
　　 86     /div
　　 87     hr style="position: relative" /
　　 88         br /
　　 89         table style="left: 0px; position: relative; top: 0px"
　　 90             tr
　　 91                 td style="width: 31px; height: 21px"
　　 92                     span style="font-family: Terminal"Key/span/td
　　 93                 td style="width: 253px; height: 21px"
　　 94                     input id="Text_Key" style="width: 248px; position: relative" type="text" //td
　　 95                 td style="width: 175px; height: 21px"
　　 96                     asp:RadioButtonList ID="RadioButtonList_Kind" runat="server" RepeatDirection="Horizontal"
　　 97                         Style="position: relative" Font-Names="terminal"
　　 98                         asp:ListItem Selected="True"Web/asp:ListItem
　　 99                         asp:ListItemMp3/asp:ListItem
　　100                         asp:ListItemImage/asp:ListItem
　　101                     /asp:RadioButtonList/td
　　102             /tr
　　103             tr
　　104                 td style="width: 31px"
　　105                 /td
　　106                 td colspan="2"
　　107                     input id="Button_Google" style="width: 80px; position: relative" type="button" value="Google" onclick="return Button_Google_onclick()" /
　　108                              
　　109                     input id="Button_Yahoo" style="left: -29px; width: 104px; position: relative" type="button"
　　110                         value="Yahoo!" onclick="return Button_Yahoo_onclick()" //td
　　111             /tr
　　112         /table
　　113         br /
　　114         hr style="position: relative" /
　　115         asp:HyperLink ID="HyperLink_Home" runat="server" NavigateUrl="~/Default.aspx" Style="position: relative"Home/asp:HyperLink/form
　　116 /body
　　117 /html
　　118