AJAX ASP


AJAX は、よりインタラクティブなアプリケーションを作成するために使用されます。

AJAX ASP の例

次の例は、ユーザーが入力ボックスに文字を入力したときに Web ページが Web サーバーとどのように通信するかを示します。

例

以下の入力フィールドに名前の入力を開始します。

提案:


例の説明 - HTML ページ

ユーザーが上の入力ボックスに文字を入力すると、「showHint()」関数が実行されます。この関数は、「onkeyup」イベントによってトリガーされます:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
戻ります;
}
if (window.XMLHttpRequest)
{// IE7 以降、Firefox、Chrome、Opera、Safari 用のコード
xmlhttp=new XMLHttpRequest();
}
その他
{// 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","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>

<p><b>下の入力フィールドに名前の入力を開始します:</b></p>
<form>
名: <input type="text" onkeyup="showHint (this.value)" size="20">
</form>
<p>提案: <span id="txtHint"></span></p>

< /body>

ソースコードの説明:

入力ボックスが空の場合 (str.length==0)、この関数は txtHint プレースホルダーの内容をクリアして関数を終了します。

入力ボックスが空でない場合、showHint() は次の手順を実行します:

  • XMLHttpRequest オブジェクトを作成する

  • サーバー応答の準備ができたときに実行する関数を作成する

  • リクエストを送信するサーバー上のファイルに

  • URL (入力ボックスの内容を含む) の末尾に追加されるパラメーター (q) に注意してください

ASP ファイル

JavaScript を通じて呼び出されるサーバー ページ上記は「gethint.asp」という名前の 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"))

'すべてのヒントを検索配列 if 長さ > 0
if len(q) > 0 then
​ ヒント=""
​ i=1 ～ 30 の場合
​​ q=ucase(mid(a(i),1,len(q))) の場合
                        ヒント=""の場合
                                  ヒント=a(i)
                        その他
                                  Hint=ヒント & " , " & a(i)
                        終了したら
​​ 終了したら
​ next
end if

'ヒントが見つからなかった場合は「提案なし」を出力します
'または正しい値を出力します
ifヒント="" then
​ response.write("提案なし")
else
​ response.write(ヒント)
end if
%>

説明: JavaScript がテキストを送信する場合 (つまり、strlen($q) > 0)、何が起こりますか:

  1. JavaScript によって送信された文字に一致する名前を検索します

  2. 一致するものが見つからない場合、応答文字文字列は「提案なし」に設定されます

  3. 1 つ以上の一致する名前が見つかった場合は、すべての名前を含む応答文字列を設定します

  4. 応答を「txtHint」プレースホルダーに送信します


←
→