PHP ve AJAX İstekleri

AJAX İstekleri

Aşağıdaki AJAX örneğinde, kullanıcı web formuna veri girdiğinde web sayfasının nasıl online web sunucusu ile iletişim kurduğunu göstereceğiz.

Aşağıdaki metin kutusuna adınızı girin:

Sugestyonlar:

Bu örnek, üç sayfayı içerir:

  • Basit bir HTML formu
  • Bir JavaScript parçası
  • Bir PHP sayfası

HTML Formu

Bu, HTML formudur. Bir basit HTML formu ve JavaScript'e yönlendirme içerir:

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

Örnek Açıklama - HTML Formu

Yukarıdaki HTML sayfası, "txt1" adlı bir giriş alanına sahip basit bir HTML formuna sahiptir.

Bu form böyle çalışır:

  1. Kullanıcı girdi alanında bir tuşa basıp bırakınca bir olay tetiklenir
  2. Bu olay tetiklendiğinde, showHint() adlı fonksiyon çalıştırılır
  3. Formun altında "txtHint" adında bir <span> vardır. Bu, showHint() fonksiyonu tarafından döndürülen verilerin yer tutucusu olarak kullanılır.

JavaScript

JavaScript kodları "clienthint.js" dosyasında saklanır, bu dosya HTML belgesine bağlanır:

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Tarayıcı HTTP İsteklerini desteklemiyor")
  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;
}

Örnek açıklaması:

showHint() fonksiyonu

Her zaman girdi alanına bir karakter girildiğinde, bu fonksiyon bir kez çalıştırılır.

Eğer metin kutusunda içerik varsa (str.length > 0), bu fonksiyon şu şekilde çalışır:

  1. Sunucuya gönderilecek URL'yi (dosya adı) tanımlayın
  2. Girdi alanının içeriğini içeren parametreleri (q) bu URL'ye ekleyin
  3. Sunucunun önbellek dosyasını kullanmasını önlemek için bir rastgele sayı ekleyin
  4. XMLHTTP nesnesi oluşturmak için GetXmlHttpObject fonksiyonunu çağır ve olay tetiklendiğinde nesneye stateChanged adlı fonksiyonu çalıştır
  5. Bu XMLHTTP nesnesini açmak için verilmiş URL'yi kullan
  6. Sunucuya HTTP istek gönder

Giriş alanı boşsa, fonksiyon txtHint yer tutucusunun içeriğini basitçe temizler.

stateChanged() fonksiyonu

Her zaman XMLHTTP nesnesinin durumu değiştiğinde, bu fonksiyonu çalıştırın.

Durum 4'e (veya "complete") geçtiğinde, txtHint yer tutucusunun içeriğini yanıt metniyle doldurun.

GetXmlHttpObject() fonksiyonu

AJAX uygulaması sadece XML'yi tam olarak destekleyen web tarayıcılarında çalışabilir.

Yukarıdaki kod, GetXmlHttpObject() adlı fonksiyonu çağırır.

Bu fonksiyonun amacı, farklı tarayıcılar için farklı XMLHTTP nesneleri oluşturmak için çözüm sağlamaktır.

Bu, bir önceki bölümden açıklandı.

PHP sayfası

JavaScript kodu tarafından çağrılan sunucu sayfası, "gethint.php" adında basit bir sunucu sayfasıdır.

"gethint.php" içindeki kod, isim dizisini kontrol eder ve ardından istemciye karşılık gelen ismi döner:

<?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];
      }
    }
  }
}
//Eşleşen bir ipucu bulunmadığında çıktıyı "no suggestion" olarak ayarlayın
//Düzgün değerlere ayarlayın
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//Cevabı çıktıya yaz
echo $response;
?>

JavaScript'ten gelen metin varsa (strlen($q) > 0), ise:

  1. JavaScript tarafından gönderilen karakterlerle eşleşen isim bulundu
  2. Birden fazla isim bulunduğunda tüm isimleri response dizgisine dahil edin
  3. Eşleşen isim bulunmadığında response'ı "no suggestion" olarak ayarlayın
  4. Bir veya daha fazla isim bulunduğunda response'ı bu isimlere ayarlayın
  5. Response'ı "txtHint" yer tutucusuna gönder