PHP 和 AJAX 請求 · W3School PHP 教程

# PHP 和 AJAX 請求 * [XMLHttpRequest](/php/php_ajax_xmlhttprequest.asp "AJAX XMLHttpRequest") ## AJAX 請求在下面的 AJAX 例子中，我們將演示當用戶向 web 表單中輸入數據時，網頁如何與在線的 web 服務器進行通信。這個例子包括三張頁面： * 一個簡單的 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" 的輸入字段。該表單是這樣工作的： 1. 當用戶在輸入域中按下并松開按鍵時，會觸發一個事件 2. 當該事件被觸發時，執行名為 showHint() 的函數 3. 表單的下面是一個名為 "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 ("Browser does not support HTTP Request") 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)，該函數這樣執行： 1. 定義要發送到服務器的 URL（文件名） 2. 把帶有輸入域內容的參數 (q) 添加到這個 URL 3. 添加一個隨機數，以防服務器使用緩存文件 4. 調用 GetXmlHttpObject 函數來創建 XMLHTTP 對象，并在事件被觸發時告知該對象執行名為 stateChanged 的函數 5. 用給定的 URL 來打開打開這個 XMLHTTP 對象 6. 向服務器發送 HTTP 請求如果輸入域為空，則函數簡單地清空 txtHint 占位符的內容。 #### stateChanged() 函數每當 XMLHTTP 對象的狀態發生改變，則執行該函數。在狀態變成 4 （或 "complete"）時，用響應文本填充 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>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]; } } } } //Set output to "no suggestion" if no hint were found //or to the correct values if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?> ``` 如果存在從 JavaScript 送來的文本 (strlen($q) > 0)，則： 1. 找到與 JavaScript 所傳送的字符相匹配的名字 2. 如果找到多個名字，把所有名字包含在 response 字符串中 3. 如果沒有找到匹配的名字，把 response 設置為 "no suggestion" 4. 如果找到一個或多個名字，把 response 設置為這些名字 5. 把 response 發送到 "txtHint" 占位符 * [XMLHttpRequest](/php/php_ajax_xmlhttprequest.asp "AJAX XMLHttpRequest")