طلبات AJAX في PHP

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=""
  إرجاع
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  إرجاع
  } 
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");
  }
 }
إرجاع xmlHttp;
}

شرح المثال:

وظيفة showHint()

في كل مرة يتم فيها إدخال حرف في مجال الإدخال، يتم تنفيذ الوظيفة مرة واحدة

إذا كان هناك محتوى في مربع النص (str.length > 0)، فإن الوظيفة تنفذ كما يلي:

  1. تحديد URL (اسم الملف) الذي سيتم إرساله إلى الخادم
  2. إضافة المعامل الذي يحتوي على محتوى مجال الإدخال (q) إلى هذا URL
  3. إضافة عدد عشوائي لتجنب استخدام ملف التخزين المؤقت من قبل الخادم
  4. إدعاء وظيفة GetXmlHttpObject لإنشاء Object XMLHTTP، وإخبار العنصر عند تحفيز الحدث بتنفيذ وظيفة stateChanged
  5. فتح هذا الـ XMLHTTP Object باستخدام URL المحددة
  6. إرسال طلب HTTP إلى الخادم

إذا كان حقل الإدخال فارغًا، فإن الدالة تُزيل ببساطة محتوى نص التبديل txtHint.

دالة stateChanged()

تُنفذ هذه الدالة كلما تغيرت حالة XMLHTTP Object.

عندما يصبح الحالة 4 (أو "complete")، يتم ملء نص التبديل txtHint بنص الرد.

دالة GetXmlHttpObject()

يمكن تشغيل تطبيقات AJAX فقط في متصفحات الويب التي تدعم XML بشكل كامل.

يُدعى الكود أعلاه دالة GetXmlHttpObject().

يهدف هذا الدالة إلى حل مشكلة إنشاء XMLHTTP Objects مختلفة لكل متصفح.

هذا تم شرحه في الفصل السابق.

صفحة PHP

صفحة الخادم التي يتم استدعاؤها بواسطة كود JavaScript هي صفحة "gethint.php" بسيطة.

"كود صفحة gethint.php" سيتحقق من مجموعة الأسماء، ثم يعود إلى العميل بالاسم المطلوب:

<?php
//ملء المجموعة بأسماء
$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"];
//البحث عن جميع الإشارات من المجموعة إذا كان طول 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" 占位符