淺析ASP AJAX做類似google的搜索提示_ASP教程

2024-05-04 11:04:10

字體：大中小

來源：轉載

供稿：網友

推薦：通過啟動腳本感知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();

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"%>

<%
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>

分享：小議ASP動態網頁編程的19個基本技巧
1. 現在的日期時間命令是%=now%> 即可2.ASP取得表格(from)數據輸入的方法，是使用一個內置的對象(object)―Requect,它以get,post而異。3.若要自己用VB或其它語言編寫

上一篇：解讀asp的RegExp對象正則表達式功能用法_ASP教程

下一篇：解讀ASP編程菜鳥易犯的一個錯誤_ASP教程