PHP og AJAX Anmodning

AJAX-anmodning

I dette AJAX-eksempel viser vi, hvordan en web-side kommunikerer med en online web-server, når brugeren indtaster data i et web-formular

Indtast navn i nedenstående tekstfelt:

Forslag:

Dette eksempel inkluderer tre sider:

  • En simpel HTML-formular
  • En del af JavaScript
  • En PHP-side

HTML-formular

Dette er en HTML-formular. Den indeholder en simpel HTML-formular og en link til JavaScript:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Fornavn:
<input type="text" id="txt1"
onkeyup="showHint(this.value)"
</form>
<p>Forslag: <span id="txtHint"></span></p>
</body>
</html>

Eksempel forklaring - HTML-formular

Som du kan se, indeholder den øverste HTML-side en simpel HTML-form med et inputfelt ved navn "txt1".

Sådan fungerer formularen:

  1. En begivenhed udløses, når brugeren trykker og slipper en tast i inputfeltet
  2. Når denne begivenhed udløses, udføres funktionen showHint()
  3. Under formularen er der en <span> ved navn "txtHint" som bruges som pladsHOLDER for data, der returneres af showHint() funktionen.

JavaScript

JavaScript-kode gemmes i "clienthint.js"-filen, som er linked til HTML-dokumentet:

var xmlHttp
function showHint(str)
{
hvis (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;
}

Example explanation:

showHint() function

The function is executed once for each character entered in the input field.

If there is content in the text box (str.length > 0), the function executes as follows:

  1. Define the URL (file name) to be sent to the server
  2. Add the parameter (q) with the content of the input field to this URL
  3. Add a random number to prevent the server from using a cached file
  4. Call the GetXmlHttpObject function to create an XMLHTTP object and inform the object to execute the function named stateChanged when the event is triggered
  5. Open this XMLHTTP object using the given URL
  6. Send HTTP request to the server

如果输入域为空，则函数简单地清空 txtHint 占位符的内容。

stateChanged() 函数

每当 XMLHTTP 对象的状态发生改变，则执行该函数。

在状态变成 4 （或 "complete"）时，用响应文本填充 txtHint 占位符 txtHint 的内容。

GetXmlHttpObject() 函数

AJAX 应用程序只能运行在完整支持 XML 的 web 浏览器中。

上面的代码调用了名为 GetXmlHttpObject() 的函数。

该函数的作用是解决为不同浏览器创建不同 XMLHTTP 对象的问题。

这一点在上一节中已经解释过了。

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";
//从 URL 获取 q 参数
$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;
?>

Hvis der findes tekst sendt fra JavaScript (strlen($q) > 0), så:

  1. Find navne, der matcher de karakterer, der er sendt med JavaScript
  2. Hvis flere navne findes, inkluder alle navne i response-strengen
  3. Hvis ingen matchende navne findes, sæt response til "no suggestion"
  4. Hvis en eller flere navne findes, sæt response til disse navne
  5. Send response til "txtHint"-pladsholderen