AJAX ASP/PHP
AJAX 用於創造動態性更強的應用程式。
AJAX ASP/PHP 實例
下面的範例將為您示範當使用者在輸入方塊中鍵入字元時，網頁如何與 web 伺服器進行通訊： 請在下面的輸入框中鍵入字母（A - Z）：
實例
#
<html><!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>運行實例»
點擊"運行實例" 按鈕查看線上實例
實例解析- showHint() 函數
當使用者在上面的輸入框中鍵入字元時，會執行函數"showHint()" 。此函數由"onkeyup" 事件觸發：
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");## }
#> ##xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(" xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.html?q="+str,true);
xmlhttp.send();
}
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");## }
#> ##xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(" xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.html?q="+str,true);
xmlhttp.send();
}
原始碼解析：
如果輸入框為空 (str.length==0)，則函數清空 txtHint 佔位符的內容，並退出函數。
如果輸入框不為空，showHint() 函數執行以下任務：
#建立XMLHttpRequest 物件
當伺服器回應就緒時執行函數
把請求發送到伺服器上的檔案
請注意我們向URL 新增了一個參數q （帶有輸入框的內容）
AJAX 伺服器頁面- ASP 和PHP
由上面的JavaScript 呼叫的伺服器頁面是ASP 文件，名稱為"gethint. asp"。
下面，我們建立了兩個版本的伺服器文件，一個用 ASP 寫，另一個用 PHP 寫。
ASP 檔案
"gethint.asp" 中的原始程式碼會檢查一個名字數組，然後向瀏覽器傳回對應的名字：
<%
response.expires=-1
dim a(30)
'用名稱填滿陣列
a(1)="Anna"
a (2 )="布列塔尼"
a(3)="灰姑娘"
a(4)="戴安娜"
a(5)="伊娃"
a(6 )="菲奧娜"
a(7)="貢達"
a(8)="黑格"
a(9)="英加"
a(10) ="約翰娜"
a( 11)="基蒂"
a(12)="琳達"
a(13)="尼娜"
a(14)="奧菲莉亞"
a(15)="潘妮"
a(16)="阿曼達"
a(17)="拉奎爾"
a(18)= "辛迪"
a(19)="多麗絲"
a(20 )="夏娃"
a(21)="艾薇塔"
a(22)="桑尼瓦"
a(23)="托芙"
a(24)="烏妮"
a(25)="紫羅蘭"
a(26)="麗莎"
a(27)="伊莉莎白"
a(28)="艾倫"
a(29) ="Wenche"
a(30)="Vicky"
'從URL中取得q參數
q=ucase(request.querystring("q"))
'如果q 的長度> 0，則從陣列中尋找所有提示
if len(q)> 0 then
提示=“”
對於 i=1 到 30
如果 q=ucase(mid(a(i),1,len(q))) 則
如果提示=“”那麼
提示=a(i)
別的＃＃＃ 提示=提示 & " , " & a(i)
萬一＃＃＃ 萬一＃＃＃ next
end if
'如果沒有找到提示則輸出「no suggest」
'或輸出正確的值
ifhint=""then
response.write("沒有建議")
else
response.write(提示)
end if
%>
##PHP檔案下面的程式碼用PHP寫，與上面的ASP程式碼作用是一樣的。 / 用名稱填滿陣列
response.expires=-1
dim a(30)
'用名稱填滿陣列
a(1)="Anna"
a (2 )="布列塔尼"
a(3)="灰姑娘"
a(4)="戴安娜"
a(5)="伊娃"
a(6 )="菲奧娜"
a(7)="貢達"
a(8)="黑格"
a(9)="英加"
a(10) ="約翰娜"
a( 11)="基蒂"
a(12)="琳達"
a(13)="尼娜"
a(14)="奧菲莉亞"
a(15)="潘妮"
a(16)="阿曼達"
a(17)="拉奎爾"
a(18)= "辛迪"
a(19)="多麗絲"
a(20 )="夏娃"
a(21)="艾薇塔"
a(22)="桑尼瓦"
a(23)="托芙"
a(24)="烏妮"
a(25)="紫羅蘭"
a(26)="麗莎"
a(27)="伊莉莎白"
a(28)="艾倫"
a(29) ="Wenche"
a(30)="Vicky"
'從URL中取得q參數
q=ucase(request.querystring("q"))
'如果q 的長度> 0，則從陣列中尋找所有提示
if len(q)> 0 then
提示=“”
對於 i=1 到 30
如果 q=ucase(mid(a(i),1,len(q))) 則
如果提示=“”那麼
提示=a(i)
別的＃＃＃ 提示=提示 & " , " & a(i)
萬一＃＃＃ 萬一＃＃＃ next
end if
'如果沒有找到提示則輸出「no suggest」
'或輸出正確的值
ifhint=""then
response.write("沒有建議")
else
response.write(提示)
end if
%>
##PHP檔案下面的程式碼用PHP寫，與上面的ASP程式碼作用是一樣的。 / 用名稱填滿陣列
$a[]="Anna";
$a[]="Brittany";$a[]="Cinderella";
$a[] ="戴安娜";
$a[]="伊娃";
$a[]="菲奧娜";
$a[]="貢達";
$a[ ]=" Hege";
$a[]="Inga";
$a[]="約翰娜";
$a[]="基蒂";
$a[ ]="琳達" ;
$a[]="妮娜";
$a[]="奧菲莉亞";
$a[]="潘妮";
$a[]="阿曼達";
$a[]="拉奎爾";
$a[]="辛迪";
$a[]="多麗絲";
$a[]="伊芙";
$a[]="艾維塔";
$a[]="Sunniva";
$a[]="托芙";
$a[]="烏尼";
$a []=“紫羅蘭”;
$a[]=“麗莎”;
$a[]= 「伊麗莎白」;
$a[]=「艾倫」;
$a[] ="Wenche";
$a[]="Vicky";
//從URL中取得q參數
$q=$_GET["q"];
#//如果q 的長度> 0，則從陣列中尋找所有提示
if (strlen($q) > 0)
{
# $提示="";
for($i=0; $i
# if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
# if ($hint=="")
{
# $提示=$a[$i];
}
別的＃＃＃ {
# $hint=$hint." , ".$a[$i];
# }
}
}
}
// 如果沒有找到提示，則將輸出設為「無建議」
// 或設定為正確的值
if ($hint == "")
{
# $response="沒有建議";
}＃＃＃別的＃＃＃ {
# $回應=$提示;
}
//輸出回應
echo $response;
?>
#
$a[]="伊娃";
$a[]="菲奧娜";
$a[]="貢達";
$a[ ]=" Hege";
$a[]="Inga";
$a[]="約翰娜";
$a[]="基蒂";
$a[ ]="琳達" ;
$a[]="妮娜";
$a[]="奧菲莉亞";
$a[]="潘妮";
$a[]="阿曼達";
$a[]="拉奎爾";
$a[]="辛迪";
$a[]="多麗絲";
$a[]="伊芙";
$a[]="艾維塔";
$a[]="Sunniva";
$a[]="托芙";
$a[]="烏尼";
$a []=“紫羅蘭”;
$a[]=“麗莎”;
$a[]= 「伊麗莎白」;
$a[]=「艾倫」;
$a[] ="Wenche";
$a[]="Vicky";
//從URL中取得q參數
$q=$_GET["q"];
#//如果q 的長度> 0，則從陣列中尋找所有提示
if (strlen($q) > 0)
{
# $提示="";
for($i=0; $i
# if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
# if ($hint=="")
{
# $提示=$a[$i];
}
別的＃＃＃ {
# $hint=$hint." , ".$a[$i];
# }
}
}
}
// 如果沒有找到提示，則將輸出設為「無建議」
// 或設定為正確的值
if ($hint == "")
{
# $response="沒有建議";
}＃＃＃別的＃＃＃ {
# $回應=$提示;
}
//輸出回應
echo $response;
?>
#
