درخواست AJAX با PHP

درخواست AJAX

در این مثال AJAX، ما نشان می‌دهیم که چگونه صفحه وب با سرور آنلاین در هنگام ورود کاربر به فرم وب ارتباط برقرار می‌کند.

نام را در زمینه زیر وارد کنید:

پیشنهادات:

این مثال شامل سه صفحه است:

  • یک فرم ساده HTML
  • یک بخش JavaScript
  • صفحه PHP

فرم HTML

این یک فرم HTML است. این شامل یک فرم ساده HTML و لینک به JavaScript است:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
نام اول:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>پیشنهادات: <span id="txtHint"></span></p>
</body>
</html>

مثال توضیحی - فرم HTML

همانطور که مشاهده می‌کنید، صفحه HTML بالا یک فرم ساده HTML با یک زمینه ورودی به نام "txt1" دارد.

این فرم به این صورت کار می‌کند:

  1. وقتی کاربر دکمه‌ای را در زمینه ورودی فشار می‌دهد و رها می‌کند، یک رویداد فعال می‌شود
  2. هنگامی که این رویداد فعال می‌شود، تابع به نام showHint() اجرا می‌شود
  3. در زیر فرم یک <span> به نام "txtHint" وجود دارد. این به عنوان جایگزین داده‌هایی که توسط تابع 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. یک عدد تصادفی اضافه می‌کنیم تا از استفاده سرور از فایل‌های حافظه‌ای (کش) جلوگیری شود
  4. با فراخوانی تابع GetXmlHttpObject برای ایجاد اوبجکت XMLHTTP، به اوبجکت اطلاع داده می‌شود که در وقوع رویداد، تابع stateChanged را اجرا کند
  5. این XMLHTTP اوبجکت را با استفاده از URL داده شده باز می‌کنیم
  6. درخواست HTTP به سرور ارسال می‌شود

اگر فیلد ورودی خالی باشد، این تابع محتوای جایگزین txtHint را خالی می‌کند.

توابع stateChanged()

هر بار که وضعیت XMLHTTP Object تغییر کند، این تابع اجرا می‌شود.

وقتی وضعیت به 4 (یا "complete") تبدیل شود، محتوای متن پاسخ در جایگزین txtHint پر می‌شود.

توابع GetXmlHttpObject()

برنامه AJAX فقط در مرورگرهای اینترنتی که XML را کامل پشتیبانی می‌کنند، اجرا می‌شود.

این کد تابع GetXmlHttpObject() را فراخوانی می‌کند.

این تابع برای حل مشکل ایجاد XMLHTTP Object متفاوت برای مرورگرهای مختلف استفاده می‌شود.

این نکته در بخش قبلی توضیح داده شده است.

صفحه PHP

به صفحه سرور به نام "gethint.php" که توسط کد JavaScript فراخوانی می‌شود، یک صفحه سرور ساده است که به مشتری نام‌های مربوطه را برمی‌گرداند:

"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];
      }
    }
  }
}
//اگر هیچ راهنمایی پیدا نشده باشد، نتیجه را به "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" ارسال کنید