PHP 和 AJAX 請求

AJAX 請求

在下面的 AJAX 例子中，我們將示範當使用者向 web 表單中輸入資料時，網頁如何與線上的 網頁伺服器進行通訊。

在下面的文字框中輸入名字： First Name：

Suggestions：

這個例子包括三張頁面：

一個簡單的 HTML 表單 一段 JavaScript 一張 PHP 頁面

HTML 表單

這是 HTML 表單。它包含一個簡單的 HTML 表單和指向 JavaScript 的連結：

 
Suggestions: 

例子解釋 - HTML 表單

正如您看到的，上面的 HTML 頁面含有一個簡單的 HTML 表單，其中帶有一個名為 "txt1" 的輸入欄位。

該表單是這樣工作的：

當使用者在輸入欄位中按下並鬆開按鍵時，會觸發一個事件 當該事件被觸發時，執行名為 showHint() 的函數 表單的下面是一個名為 "txtHint" 的 。它用作 showHint() 函數所返回資料的預留位置。

JavaScript

JavaScript 代碼儲存在 "clienthint.js" 檔案中，它被連結到 HTML 文檔：

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() 函數

每當在輸入欄位中輸入一個字元，該函數就會被執行一次。

如果文字框中有內容 (str.length > 0)，該函數這樣執行：

定義要發送到伺服器的 URL（檔案名稱） 把帶有輸入欄位內容的參數 (q) 添加到這個 URL 添加一個隨機數，以防伺服器使用快取檔案 調用 GetXmlHttpObject 函數來建立 XMLHTTP 對象，並在事件被觸發時告知該對象執行名為 stateChanged 的函數 用給定的 URL 來開啟開啟這個 XMLHTTP 對象 向伺服器發送 HTTP 要求

如果輸入欄位為空白，則函數簡單地清空 txtHint 預留位置的內容。

stateChanged() 函數

每當 XMLHTTP 對象的狀態發生改變，則執行該函數。

在狀態變成 4 （或 "complete"）時，用響應文本填充 txtHint 預留位置 txtHint 的內容。

GetXmlHttpObject() 函數

AJAX 應用程式只能運行在完整支援 XML 的 網頁瀏覽器中。

上面的代碼調用了名為 GetXmlHttpObject() 的函數。

該函數的作用是解決為不同瀏覽器建立不同 XMLHTTP 對象的問題。

這一點在上一節中已經解釋過了。

PHP 頁面

被 JavaScript 代碼調用的伺服器頁面是一個名為 "gethint.php" 的簡單伺服器頁面。

"gethint.php" 中的代碼會檢查名字數組，然後向用戶端返回對應的名字：

0if (strlen($q) > 0){$hint="";for($i=0; $i

如果存在從 JavaScript 送來的文本 (strlen($q) > 0)，則：

找到與 JavaScript 所傳送的字元相匹配的名字 如果找到多個名字，把所有名字包含在 response 字串中 如果沒有找到匹配的名字，把 response 設定為 "no suggestion" 如果找到一個或多個名字，把 response 設定為這些名字 把 response 發送到 "txtHint" 預留位置

