ASP - AJAXとASP

AJAXは、よりダイナミックなアプリケーションを作成するために使用されます。

AJAX ASP インスタンス

以下の例では、ユーザーが入力フィールドに文字を入力したときに、ウェブページがサーバーとどのように通信するかを示します：

インスタンス

以下の入力フィールドにアルファベット（A - Z）を入力してください：

名前：

推奨：

ソースコードを自分で試してみてください

インスタンス説明 - HTMLページ

ユーザーが上記の入力フィールドに文字を入力した場合、"showHint()"関数が実行されます。この関数は"onkeyup"イベントによってトリガーされます：

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  // IE7+, Firefox, Chrome, Opera, Safari 対応のコード
  xmlhttp=new XMLHttpRequest();
  }
else
  // 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>
First name: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>提案： <span id="txtHint"></span></p>
</body>
</html>

ソースコードの説明：

入力フィールドが空（str.length==0）の場合、この関数は占位符txtHintの内容をクリアし、この関数から退出します。

入力フィールドが空でない場合、showHint()は以下の手順を実行します：

  • XMLHttpRequestオブジェクトを作成します
  • サーバーの応答が準備でき次第実行される関数を作成します
  • サーバー上のファイルにリクエストを送信します
  • URLの末尾に追加するパラメータ（q）（入力フィールドの内容を含む）に注意してください。

ASPファイル

このJavaScriptのサーバーサイドのページは「gethint.asp」というASPファイルです。

"gethint.asp"内のソースコードは、名前の配列をチェックし、ブラウザに対応する名前を返します：

<%
response.expires=-1
dim a(30)
名前の配列を埋める
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
URLからパラメータqを取得
q=ucase(request.querystring("q"))
「qの長さが0より大きい場合、配列からすべてのヒントを検索します」という意味
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if
「ヒントが見つからなかった場合、"no suggestion"を出力」という意味
または正しい値を出力
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

ソースコードの説明：

JavaScriptがどんなテキストを送信した場合（strlen($q)が0より大きい場合）、以下が発生します：

  • JavaScriptから来た文字の一致する名前を検索する
  • 一致する名前が見つからない場合、応答文字列を「no suggestion」に設定する
  • 1つまたは複数の一致する名前が見つかった場合、すべての名前で応答文字列を設定する
  • 応答を占位符「txtHint」に送信する