PHP 和 AJAX 請求-6.3PHP和AJAX

閱讀 ?·? 發布日期 2019-06-29 08:24 ?·? admin

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" 的輸入字段。

該表單是這樣工作的：

  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" 占位符