AJAX ASP/PHP
AJAX は、より動的なアプリケーションを作成するために使用されます。
AJAX ASP/PHP の例
次の例は、ユーザーが入力ボックスに文字を入力したときに Web ページが 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)
{// IE7 以降、Firefox、Chrome、Opera、Safari のコード
=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function( )
{
if (xmlhttp.readyState==4 && ).innerHTML=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)
{// IE7 以降、Firefox、Chrome、Opera、Safari のコード
=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function( )
{
if (xmlhttp.readyState==4 && ).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.html?q="+str,true);
xmlhttp .send();
}
ソース コード分析:
入力ボックスが空の場合 (str.length==0)、この関数は txtHint プレースホルダーの内容をクリアして関数を終了します。
入力ボックスが空でない場合、showHint() 関数は次のタスクを実行します:
XMLHttpRequest オブジェクトを作成する
サーバー応答の準備ができたら関数を実行する
リクエストをサーバー上のファイル
-
パラメータ q (入力ボックスの内容を含む) を URL に追加したことに注意してください
AJAX サーバー ページ - ASP および PHP
上記の JavaScript によって呼び出されるサーバー ページこれは「gethint.asp」という名前の ASP ファイルです。
以下では、サーバー ファイルの 2 つのバージョンを作成します。1 つは ASP で書かれ、もう 1 つは PHP で書かれています。
ASP ファイル
「gethint.asp」のソース コードは、名前の配列をチェックし、対応する名前をブラウザーに返します。
<%
response.expires=-1
dim a(30)
'配列に名前を入力します
a(1)="アンナ"
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)="ウェンチェ"
a(30)="ヴィッキー"
' URL からの q パラメータ
q=ucase(request.querystring("q"))
'q>0 の長さの場合、配列からすべてのヒントを検索
if len(q)>0 then
ヒント=""
i=1 ～ 30 の場合
if q=ucase(mid(a(i),1,len(q))) then
if ヒント="" then
ヒント=a(i)
それ以外
ヒント=ヒント & " , " & a(i)
終了したら
終了したら
next
end if
'ヒントが見つからなかった場合は「提案なし」を出力します
'または正しい値を出力します
ifヒント="" then
response.write("提案なし")
else
response.write(ヒント)
end if
%>
response.expires=-1
dim a(30)
'配列に名前を入力します
a(1)="アンナ"
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)="ウェンチェ"
a(30)="ヴィッキー"
' URL からの q パラメータ
q=ucase(request.querystring("q"))
'q>0 の長さの場合、配列からすべてのヒントを検索
if len(q)>0 then
ヒント=""
i=1 ～ 30 の場合
if q=ucase(mid(a(i),1,len(q))) then
if ヒント="" then
ヒント=a(i)
それ以外
ヒント=ヒント & " , " & a(i)
終了したら
終了したら
next
end if
'ヒントが見つからなかった場合は「提案なし」を出力します
'または正しい値を出力します
ifヒント="" then
response.write("提案なし")
else
response.write(ヒント)
end if
%>
PHP ドキュメント
次の代コード用 PHP 記述、上の ASP 代コード機能は同じです。
<?php
// 配列に名前を埋めます
$a[]="Anna";
$a[]="ブリタニー";
$a[]="シンデレラ";
$a[]="ダイアナ";
$a[]="エヴァ";
$a[]="フィオナ";
$a[]="ガンダ";
$a[]="ヘゲ";
$a[]="インガ";
$a[]="ヨハンナ";
$a[]="キティ";
$a[]="リンダ";
$a[]="ニーナ";
$a[]="オフィーリア";
$a[]="ペチュニア";
$a[]="アマンダ";
$a[]="ラケル";
$a[]="シンディ";
$a[]="ドリス";
$a[]="イブ";
$a[]="エビータ";
$a[]="サンニバ";
$a[]="トーベ";
$a[]="ウンニ";
$a[]="バイオレット";
$a[]="リザ";
$a[]="エリザベス";
$a[]="エレン";
$a[]="ウェンチェ";
$a[]="ヴィッキー";
// URL から q パラメータを取得します
$q=$_GET["q"];
//q>0 の長さの場合、配列からすべてのヒントを検索
if (strlen($q) > 0)
{
$ヒント="";
for($i=0; $i
if (strto lower($q)==strto lower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$ヒント=$a[$i];
}
それ以外
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// ヒントが見つからなかった場合は出力を「提案なし」に設定します
// または正しい値に設定します
if ($hint == "")
{
$response="提案なし";
}
その他
{
$response=$hint;
}
//レスポンスを出力します
echo $response;
?>
// 配列に名前を埋めます
$a[]="Anna";
$a[]="ブリタニー";
$a[]="シンデレラ";
$a[]="ダイアナ";
$a[]="エヴァ";
$a[]="フィオナ";
$a[]="ガンダ";
$a[]="ヘゲ";
$a[]="インガ";
$a[]="ヨハンナ";
$a[]="キティ";
$a[]="リンダ";
$a[]="ニーナ";
$a[]="オフィーリア";
$a[]="ペチュニア";
$a[]="アマンダ";
$a[]="ラケル";
$a[]="シンディ";
$a[]="ドリス";
$a[]="イブ";
$a[]="エビータ";
$a[]="サンニバ";
$a[]="トーベ";
$a[]="ウンニ";
$a[]="バイオレット";
$a[]="リザ";
$a[]="エリザベス";
$a[]="エレン";
$a[]="ウェンチェ";
$a[]="ヴィッキー";
// URL から q パラメータを取得します
$q=$_GET["q"];
//q>0 の長さの場合、配列からすべてのヒントを検索
if (strlen($q) > 0)
{
$ヒント="";
for($i=0; $i
if (strto lower($q)==strto lower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$ヒント=$a[$i];
}
それ以外
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// ヒントが見つからなかった場合は出力を「提案なし」に設定します
// または正しい値に設定します
if ($hint == "")
{
$response="提案なし";
}
その他
{
$response=$hint;
}
//レスポンスを出力します
echo $response;
?>
