PHP および AJAX リクエスト
- WBOYオリジナル
- 2016-06-23 14:31:421021ブラウズ
AJAX リクエスト
以下の AJAX の例では、ユーザーが Web フォームにデータを入力するときに、Web ページがオンライン Web サーバーとどのように通信するかを示します。
下のテキスト ボックスに名前を入力してください: 名:
提案:
この例には 3 つのページが含まれています:
単純な HTML フォーム JavaScript の一部 PHP ページHTML フォーム
これは HTML フォームです。これには、単純な HTML フォームと JavaScript へのリンクが含まれています:
<html><head><script src="clienthint.js"></script> </head><body><form> First Name:<input type="text" id="txt1"onkeyup="showHint(this.value)"></form><p>Suggestions: <span id="txtHint"></span></p></body></html>例の説明 - HTML フォーム
ご覧のとおり、上記の HTML ページには、「txt1」という名前の入力フィールドを持つ単純な HTML フォームが含まれています。
このフォームは次のように機能します:
ユーザーが入力フィールドでキーを押して放すと、イベントがトリガーされ、showHint() という名前の関数がフォームの下にあります。 ()。「txtHint」の場合。これは、showHint() 関数によって返されるデータのプレースホルダーとして使用されます。JavaScript
JavaScript コードは、HTML ドキュメントにリンクされている「clientthint.js」ファイルに保存されます:
var xmlHttpfunction showHint(str){if (str.length==0) { document.getElementById("txtHint").innerHTML="" return }xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="gethint.php"url=url+"?q="+strurl=url+"&sid="+Math.random()xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)} function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } }function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }return xmlHttp;} 説明例: showHint() 関数 この関数は、入力に文字が入力されるたびに 1 回実行されます分野 。
テキスト ボックスに内容がある場合 (str.length > 0)、関数は次のように実行されます:
サーバーに送信する URL (ファイル名) を定義し、入力にパラメーター (q) を追加します。フィールドの内容をこの URL に追加します。サーバーがキャッシュされたファイルを使用する場合は、GetXmlHttpObject 関数を呼び出して XMLHTTP オブジェクトを作成し、イベントがトリガーされたときに stateChanged という名前の関数を実行するようにオブジェクトに指示します。そして、HTTP リクエストをサーバーに送信します入力フィールドが空の場合、関数は単に txtHint プレースホルダーの内容をクリアします。
stateChanged() 関数この関数は、XMLHTTP オブジェクトの状態が変化するたびに実行されます。
ステータスが 4 (または「完了」) になったら、txtHint プレースホルダー txtHint の内容に応答テキストを入力します。
GetXmlHttpObject() 関数AJAX アプリケーションは、完全な XML サポートを備えた Web ブラウザーでのみ実行できます。
上記のコードは、GetXmlHttpObject() という関数を呼び出します。
この関数の目的は、ブラウザごとに異なる XMLHTTP オブジェクトを作成するという問題を解決することです。
これについては前のセクションで説明しました。
PHP ページ
JavaScript コードによって呼び出されるサーバー ページは、「gethint.php」という単純なサーバー ページです。
「gethint.php」のコードは名前配列をチェックし、対応する名前をクライアントに返します:
<?php// Fill up array with names$a[]="Anna";$a[]="Brittany";$a[]="Cinderella";$a[]="Diana";$a[]="Eva";$a[]="Fiona";$a[]="Gunda";$a[]="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]="Nina";$a[]="Ophelia";$a[]="Petunia";$a[]="Amanda";$a[]="Raquel";$a[]="Cindy";$a[]="Doris";$a[]="Eve";$a[]="Evita";$a[]="Sunniva";$a[]="Tove";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a[]="Wenche";$a[]="Vicky";//get the q parameter from URL$q=$_GET["q"];//lookup all hints from array if length of q>0if (strlen($q) > 0){$hint="";for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } }}//Set output to "no suggestion" if no hint were found//or to the correct valuesif ($hint == ""){$response="no suggestion";}else{$response=$hint;}//output the responseecho $response;?> JavaScript から送信されたテキスト (strlen($q) > 0) がある場合:
Found A JavaScript によって送信された文字に一致する名前。複数の名前が見つかった場合は、応答文字列にすべての名前が含まれます。1 つ以上の名前が見つかった場合は、応答を「候補なし」に設定します。これらの名前に対する応答を「txtHint」プレースホルダーに設定します