PHP 和 AJAX 請求

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章目錄

例子解釋 - HTML 表單
例子解釋：

AJAX 請求

在下面的 AJAX 例子中，我們將示範當使用者向 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 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" 中的代碼會檢查名字數組，然後向用戶端返回對應的名字：

<?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)，則：

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More