AJAX は、よりインタラクティブなアプリケーションを作成するために使用されます。
次の例は、ユーザーが入力ボックスに文字を入力したときに Web ページが Web サーバーとどのように通信するかを示しています。
ユーザーが上の入力ボックスに文字を入力すると、「showHint()」関数が実行されます。この関数は、「onkeyup」イベントによってトリガーされます。
<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() } 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.php?q="+str,true); xmlhttp.send();}</script></head><body><p><b>入力ボックス内名前を入力してください:</b></p><form> 名前: <input type="text" onkeyup="showHint(this.value)"></form><p>戻り値: <span id="txtHint"></span></p></body></html>ソースコードの説明:
入力ボックスが空 (str.length==0) の場合、この関数は txtHint プレースホルダーの内容をクリアして関数を終了します。
入力ボックスが空でない場合、showHint() は次の手順を実行します。
XMLHttpRequest オブジェクトを作成する
サーバー応答の準備ができたときに実行する関数を作成する
サーバー上のファイルにリクエストを送信します
URL の末尾にパラメータ (q) が追加されていることに注意してください (入力ボックスの内容が含まれます)。
JavaScript を通じて上記で呼び出されるサーバー ページは、「gethint.php」という名前の PHP ファイルです。
「gethint.php」のソース コードは、name 配列をチェックし、対応する名前をブラウザに返します。
<?php//配列に名前 $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[]="ウェンチェ";$a[]="Vicky";//リクエストURLアドレスからqを取得パラメータ $q=$_GET["q"];//q>0if (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] } } }}// 一致する値がない場合は、出力を「提案なし」に設定します。 " if ($ヒント == ""){ $response="提案なし";}else{ $response=$hint;}//戻り値を出力 echo $response;?>説明: JavaScript がテキストを送信すると (つまり、strlen($q) > 0)、次のことが起こります。
JavaScript によって送信された文字に一致する名前を検索する
一致するものが見つからない場合は、応答文字列を「提案なし」に設定します。
一致する名前が 1 つ以上見つかった場合は、すべての名前を応答文字列に設定します。
応答を「txtHint」プレースホルダーに送信します
非同期リクエストをクロスドメインにする必要がある場合は、PHP Ajax クロスドメインの問題の解決策を確認してください。