浅析ASP AJAX做类似google的搜索提醒
|
主要要文件有: Index.html 实现功能,一个文本框,输入内容并实现提示 search.asp 查询功能,让文本框输入的内容在数据库中查询,然后返回给客户端 conn.asp 数据库连接功能,实现与数据库相连 xmlhttp.js AJAX 核心部分,用来把客户端的数据传给服务端,再把服务端的数据返还给客户端. style.css 样式文件,主要是对google提示框查询到的内容进行样式化处理 先看第一个文件style.css 以下为引用的内容： [code=css] @charset "utf-8"; /* CSS Document */ body { font-size:12px; font-family:Arial, Helvetica, sans-serif; } #search_suggest { position:absolute; background:#FFFFFF; text-align:left; border:1px #000000 solid; } .suggest_link_over { background-color:#e8f2fe; padding:2px 6px; } .suggest_link { padding:2px 6px; background-color:#FFFFFF; } .none { display:none; } 第二个文件: xmlhttp.js 以下为引用的内容： // JavaScript Documentrt var xmlHttp = createXmlHttpRequest(); function createXmlHttpRequest() { var xmlhttp = null; try { xmlhttp = XMLHttpRequest(); } catch(e1) { try { xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); } catch(e2) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e3) { xmlhttp = false; alert("创建失败!"); } } } return xmlhttp; } function change_key() { if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { var str = document.getElementById("txt_key").value; xmlHttp.open("get","search.asp?key=" str ,true); xmlHttp.onreadystatechange = handSearchRequest; xmlHttp.send(null); } } function handSearchRequest() { if (xmlHttp.readyState == 4) { var div = document.getElementById("search_suggest"); div.innerHTML = ""; var str = xmlHttp.responseText.split("|"); for (var i=0; i<str.length; i ) { var suggest = ’<div onmouseover="javascript：suggestOver(this);" ’; suggest = ’onmouseout="javascript：suggestOut(this);" ’; suggest = ’onclick="javascript：setSearch(this.innerHTML);" ’; suggest = ’class="suggest_link">’ str[i] ’</div>’; div.innerHTML = suggest; } } } function setSearch(div_value) { document.getElementById("txt_key").value = div_value; document.getElementById("search_suggest").className = ’none’; } function suggestOver(div_value) { div_value.className = ’suggest_link_over’; } function suggestOut(div_value) { div_value.className = ’suggest_link’; } 第三个文件:conn.asp 以下为引用的内容： <% set conn = Server.CreateObject("Adodb.Connection") connStr = "Provider=SQLOLEDB;Server=./SQLEXPRESS;UID=sa;PWD=sa;Initial catalog=test;" conn.ConnectionString = connStr conn.open %> 第四个文件:search.asp 以下为引用的内容： <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <!-- #include file="conn.asp" --> <% key = request.QueryString("key") if (key <> "") then key = replace(key,"/","") key = replace(key,"’","") key = replace(key,"or","") sel_sql = "select [key] from [key] where [key] like ’" & key & "%’" dim keyword keyword = "" set rs = conn.execute (sel_sql) do while not rs.eof keyword = keyword & rs(0) & "|" rs.movenext loop response.Write(keyword) end if %> 最后一个结果文件:index.html 以下为引用的内容： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>google提示 </title> <script src="xmlhttp.js" ></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <form id="form1" name="form1" method="post" action=""> <input name="txt_key" type="text" id="textarea" autocomplete="off" onkeyup="change_key()"/><br/> <div id="search_suggest" ></div> </form> </body> </html> （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
