PHP และ AJAX ขอคำสั่ง

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 ("เบราเซอร์ไม่สนับสนุนคำขอ 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
 {
 // ฟากฟีร์, ออเปร่า 8.0+, ซาฟารี
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // อินเตอร์เน็ต เอกซ์เพรส
 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. เพิ่มตัวเลขสุ่มที่มีตัวเลข 33 ขึ้นเพื่อป้องกันเซิร์ฟเวอร์ใช้ไฟล์คอนเซิร์ฟ
  4. เรียกฟังก์ชัน GetXmlHttpObject ที่สร้าง XMLHTTP Object และบอกให้ Object ทำงานฟังก์ชัน stateChanged เมื่อเกิดเหตุ
  5. เปิด XMLHTTP Object ด้วย URL ที่กำหนด
  6. ส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์

ถ้าช่องรับข้อมูลเป็นความว่าง ฟังก์ชันจะเรียกเคลียร์เนื้อหาของ txtHint ตัวยัน txtHint

ฟังก์ชัน stateChanged()

ในทุกครั้งที่สถานะของ XMLHTTP Object มีการเปลี่ยนแปลง จะเรียกฟังก์ชันนี้

ในขณะที่สถานะมีค่า 4 (หรือ "complete") ให้บันทึกข้อความตอบสนองไปยัง txtHint ตัวยัน txtHint

ฟังก์ชัน GetXmlHttpObject()

APlX application สามารถทำงานได้เมื่อเบราวเซอร์ที่สนับสนุน XML อย่างเต็มที่

รหัสด้านบนเรียกฟังก์ชันที่มีชื่อ GetXmlHttpObject()

ฟังก์ชันนี้มีความตั้งโต้เพื่อแก้ปัญหาในการสร้าง XMLHTTP Object ต่างกันสำหรับเบราวเซอร์ต่างๆ

นี่ถูกชี้แจงไปแล้วในบทก่อน

PHP หน้า

หน้าเซิร์ฟเวอร์ที่เรียกโดยรหัส JavaScript คือหน้าเซิร์ฟเวอร์ที่มีชื่อ "gethint.php" คือหน้าเซิร์ฟเวอร์ที่เรียบง่ายๆ

"gethint.php" ของรหัสโปรแกรมจะตรวจสอบชื่อในตัวแปรและกลับค่าเพื่อผู้รับซึ่งคือ

<?php
//กระบวนการเติม array ด้วยชื่อ
$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";
//ดึงค่าตัวแปร q จาก URL
$q=$_GET["q"];
//ค้นหาข้อมูลทั้งหมดจาก array หากความยาวของ 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
//หรือตั้งค่าค่าออกอัปท์เป็น "no suggestion" ถ้าไม่พบคำชี้แจง
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//แสดงออกคำตอบ
echo $response;
?>

ถ้ามีข้อความที่ JavaScript ส่งมา (strlen($q) > 0) รวมถึง

  1. พบชื่อที่ตรงกันกับตัวอักษรที่ JavaScript ส่งมา
  2. ถ้าพบชื่อหลายชื่อ ใส่ชื่อทั้งหมดในข้อความ response
  3. ถ้าไม่พบชื่อที่ตรงกัน ตั้งค่า response ให้เป็น "no suggestion"
  4. ถ้าพบชื่อหนึ่งหรือหลายชื่อ ตั้งค่า response ให้เป็นชื่อเหล่านั้น
  5. ส่ง response ไปยังตัวจัดทำที่มีชื่อ "txtHint"