PHP and AJAX requests

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;
}

Ƙararrar ƙara:

Ƙiɗa showHint()

Kowace lokaci a ɗauka ƙaramar a cikin ƙaramar ake ƙara, aƙiɗa yin ƙiɗa yin ƙiɗa

Idan a cikin ƙaramar tekun a cikin ƙararrar a baya (str.length > 0), aƙiɗa yin wannan ƙiɗa:

  1. A ɗauka URL da ake ƙaruwa cikin ƙararrar
  2. A ɗauka ƙararrar da ƙararrar ɗauka a cikin ƙararrar
  3. A ɗauka ƙararrar ɗauka a cikin ƙararrar, domin a ƙararrar a kai tsaro a raba ƙararrar
  4. A calla GetXmlHttpObject ƙiɗa ƙaramar XMLHTTP, kuma a narka baya a ƙara ƙiɗa yin ƙoɗa ƙara stateChanged
  5. A tsara URL ba ɗauka wannan ƙaramar XMLHTTP
  6. A kan raba HTTP ƙararrawa

如果输入域为空，则函数简单地清空 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"];
//gudan daki bayanin girmek istedikleri hukmi daki bawarai dake gudan girmek
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];
      }
    }
  }
}
//اگر هیچ راهنمایی پیدا نشده باشد، output را به "no suggestion" تنظیم کنید
//یا به مقادیر صحیح تنظیم شود
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//نتیجه را نمایش دهید
echo $response;
?>

اگر متن فرستاده شده از JavaScript وجود دارد (strlen($q) > 0)، سپس:

  1. نام‌هایی که با حروف فرستاده شده توسط JavaScript مطابقت دارند پیدا کنید
  2. اگر چندین نام پیدا شود، همه نام‌ها را در string response شامل کنید
  3. اگر نامی پیدا نشود، response را به "no suggestion" تنظیم کنید
  4. اگر یک یا چند نام پیدا شود، response را به این نام‌ها تنظیم کنید
  5. response را به "txtHint" جایگزین ارسال کنید