PHP ve AJAX XML Örneği

AJAX, XML dosyalarıyla etkileşimli iletişim kurabilir.

AJAX XML Örneği

Aşağıdaki AJAX örneğinde, web sayfalarının AJAX teknolojisi kullanarak XML dosyasından bilgi okumasını göstereceğiz.

Aşağıdaki listeden bir CD seçin

CD Bilgilerini burada listeler.

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

  • Basit Bir HTML Formu
  • Bir XML Dosyası
  • Bir JavaScript Dosyası
  • Bir PHP Sayfası

HTML Formu

Örnekler, basit bir HTML formu ve JavaScript'e yönlendirme içeren bir sayfa içerir:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Bir CD seçin:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<p>
<div id="txtHint"><b>CD bilgileri buraya listelenecek.</b></div>
</p>
</body>
</html>

Örnek açıklama:

Gördüğünüz gibi, bu sadece "cds" adlı bir aşağıdaki listede bulunan basit bir HTML formudur.

Formun altındaki paragraf, "txtHint" adlı bir div içerir. Bu div, web sunucusundan alınan verilerin yer tutucusu olarak kullanılır.

Kullanıcı veri seçtiğinde, "showCD" adlı fonksiyon çalıştırılır. Bu fonksiyonun çalışması "onchange" olayı tarafından tetiklenir.

Diğer bir deyişle, kullanıcı aşağıdaki listedeki değeri değiştirdiğinde showCD fonksiyonu çağrılır.

XML dosyası

XML dosyası "cd_catalog.xmlBu dosya, CD koleksiyonuna ilişkin verileri içerir.

JavaScript

Bu, "selectcd.js" dosyasında saklanan JavaScript kodudur:

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Tarayıcı HTTP İsteklerini desteklemiyor")
 return
 } 
var url="getcd.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çıklama:

stateChanged() ve GetXmlHttpObject fonksiyonları bir önceki bölümden aynıdır, bir önceki sayfadaki ilgili açıklamalara bakabilirsiniz.

showCD() fonksiyonu

Aşağıdaki listeden bir öğe seçildiğinde fonksiyon çalışır:

  1. XMLHTTP nesnesi oluşturmak için GetXmlHttpObject fonksiyonunu çağırın
  2. Sunucuya gönderilecek URL'yi (dosya adı) tanımlayın
  3. URL'ye içeriği aşağıdakilerden birine sahip parametre (q) ekleyin
  4. Sunucunun dosyaları önbelleğe almasını önlemek için bir rastgele sayı ekleyin
  5. Bir olay tetiklendiğinde stateChanged çağrılır
  6. Verilen URL'yi açarak XMLHTTP nesnesi oluşturun
  7. Sunucuya HTTP istemi gönder

PHP sayfası

Bu, "getcd.php" adlı basit bir PHP dosyası tarafından JavaScript ile çağrılan bir sunucu sayfasıdır.

Bu sayfa PHP ile yazılmıştır ve "cd_catalog.xml" XML dosyasını yüklemek için XML DOM kullanır.cd_catalog.xml"。

XML dosyası sorgusunu çalıştırır ve sonuçları HTML ile geri döndürür:

<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Sadece element nodeleri işlenir
if ($x->item($i)->nodeType==1)
  {
  if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
    { 
    $y=($x->item($i)->parentNode);
    }
  }
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{ 
//Sadece element nodeleri işlenir
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Örnek Açıklama

JavaScript'ten PHP sayfasına istek gönderildiğinde şu durum ortaya çıkar:

  1. PHP "cd_catalog.xml" dosyasını oluşturan XML DOM nesnesi
  2. tüm "artist" elemanlarını dola (nodetypes = 1) ve JavaScript tarafından iletilen verilerle eşleşen isimleri arayın
  3. CD'yi içeren doğru sanatçının bulunuşunu bul
  4. album bilgisini çıkar ve "txtHint" yer tutucusuna gönder