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