PHP と AJAX リクエスト
- 前のページ XMLHttpRequest
- 次のページ AJAX XML
AJAX 请求
在下面的 AJAX 例子中，我们将演示当用户向 web 表单中输入数据时，网页如何与在线的 web 服务器进行通信。
在下面的文本框中输入名字：
Suggestions：
这个例子包括三张页面：
- 一个简单的 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 页面含有一个简单的 HTML 表单，其中带有一个名为 "txt1" 的输入字段。
该表单是这样工作的：
- 当用户在输入域中按下并松开按键时，会触发一个事件
- 当该事件被触发时，执行名为 showHint() 的函数
- 表单的下面是一个名为 "txtHint" 的 <span>。它用作 showHint() 函数所返回数据的占位符。
JavaScript
JavaScript 代码存储在 "clienthint.js" 文件中，它被链接到 HTML 文档：
var xmlHttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert("ブラウザはHTTPリクエストをサポートしていません")
return
}
var url="gethint.php"
url=url+"?q="+str
url=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()関数
入力フィールドに文字が入力されるたびに、この関数が一度だけ実行されます。
テキストボックスに内容がある場合（str.length > 0）、この関数は以下のように実行されます：
- サーバーに送信するURL（ファイル名）を定義します
- 入力フィールドの内容を持つパラメータ(q)をこのURLに追加します
- ランダム数を追加して、サーバーがキャッシュファイルを使用しないようにします
- GetXmlHttpObject関数を呼び出してXMLHTTPオブジェクトを作成し、イベントがトリガーされた際にstateChangedと名付けられた関数を実行するように通知します
- 指定されたURLでこのXMLHTTPオブジェクトを開きます
- サーバーにHTTPリクエストを送信
入力フィールドが空の場合、txtHint 占位符の内容を単にクリアします。
stateChanged() 関数
XMLHTTP オブジェクトの状態が変更されたときに、この関数を実行します。
状態が 4 （または「complete」）に変わったとき、txtHint 占位符の内容に応答テキストを埋め込みます。
GetXmlHttpObject() 関数
AJAX アプリケーションは、XMLを完全にサポートするウェブブラウザ上でのみ実行できます。
上記のコードは「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>0
if (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];
}
}
}
}
//一致するヒントが見つからなかった場合、出力を "no suggestion" に設定します
//または正しい値に設定します
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//レスポンスを出力します
echo $response;
?>
JavaScript からテキストが送信されている場合 (strlen($q) > 0)、以下の通りです：
- JavaScript で送信された文字に一致する名前を見つけます
- 複数の名前が見つかった場合、response にすべての名前を含めて設定します
- 一致する名前が見つからなかった場合、response を "no suggestion" に設定します
- 名前が1つまたは複数見つかった場合、response をこれらの名前に設定します
- response を "txtHint" 代替文字に送信します
- 前のページ XMLHttpRequest
- 次のページ AJAX XML
