推薦:通過啟動腳本感知ASP的力量和大多數的語言腳本一樣,學習ASP最好的方法就是親身嘗試ASP,使用你自己的系統安裝PWS或者IIS。你可以邊學習邊在你自己的服務器上測試ASP組件和函數。為了方便學習,我們已經編譯了一些操
主要要文件有:
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> |
分享:小議ASP動態網頁編程的19個基本技巧1. 現在的日期時間命令是%=now%>即可2.ASP取得表格(from)數據輸入的方法,是使用一個內置的對象(object)―Requect,它以get,post而異。 3.若要自己用VB或其它語言編寫