PHP ve AJAX responseXML Örneği

AJAX, XML olarak geri dönen veritabanı bilgilerini kullanabilir.

AJAX Database'ye XML Dönüşüm Örneği (Test Açıklaması: Bu örneğin fonksiyonel özelliği yok)

Aşağıdaki AJAX örneğinde, web sayfasının MySQL veritabanından bilgi nasıl okunacağını, verileri XML belgesine dönüştürülmesini ve bu belgenin farklı yerlerde kullanılmasını göstereceğiz.

Bu örnek, bir önceki bölümden 'PHP AJAX Database' örneği ile çok benzer, ancak büyük bir fark var: Bu örnekte, PHP sayfasından responseXML fonksiyonu kullanarak XML biçiminde veri alıyoruz.

XML belgesini yanıt olarak almak, sayfanın çeşitli yerlerini güncellemek için yeteneğimiz artırır, sadece bir PHP çıktısını alıp göstermekle kalmaz.

Bu örnekte, veritabanından alınan bilgileri kullanarak birden fazla <span> elementini güncelleyeceğiz.

Açılır listeden bir isim seçin

Bir kullanıcı seçin:

　

Bu sütun dört bileşen içerir:

  • MySQL Veritabanı
  • Basit bir HTML formu
  • JavaScript
  • PHP sayfası

Veritabanı

Bu örnekte kullanılacak veritabanı şu şekilde görünüyor:

id İsim Soyadı Yaş Anavatan İş
1 Peter Griffin 41 Quahog Bira Fabrikası
2 Lois Griffin 40 Newport Piano Öğretmeni
3 Joseph Swanson 39 Quahog Polis Memuru
4 Glenn Quagmire 41 Quahog Pilot

HTML Formu

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

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Bir Kullanıcı Seçin:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<h2>
<span id="firstname"></span> <span id="lastname"></span>
</h2>
<span id="job"></span>
<div style="text-align: right">
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>
</body>
</html>

Örnek Açıklama - HTML Formu

  • HTML formu, "users" adlı name özelliğine sahip bir aşağıdakiler listesidir ve seçenek değerleri veritabanının id alanı ile karşıt gelir.
  • Formun altında birkaç <span> öğesi vardır ve bu öğeler, aldığımız farklı değerlerin yer tutucuları olarak kullanılır.
  • Kullanıcı belirli bir seçimi seçtiğinde, "showUser()" fonksiyonu çalışır. Bu fonksiyonun çalışması "onchange" olayı tarafından tetiklenir.

Diğer bir deyişle, kullanıcı aşağıdaki listede bir değer değiştirdiğinde, showUser() fonksiyonu çalışır ve sonuçları belirtilen <span> öğesinde çıktılar.

JavaScript

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

var xmlHttp
function showUser(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
 var url="responsexml.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")
{
 xmlDoc=xmlHttp.responseXML;
 document.getElementById("firstname").innerHTML=
 xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
 document.getElementById("lastname").innerHTML=
 xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
 document.getElementById("job").innerHTML=
 xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
 document.getElementById("age_text").innerHTML="Age: ";
 document.getElementById("age").innerHTML=
 xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
 document.getElementById("hometown_text").innerHTML="<br/>From: ";
 document.getElementById("hometown").innerHTML=
 xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
 }
}
function GetXmlHttpObject()
 { 
 var objXMLHttp=null
 if (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

Örnek Açıklama:

showUser() ve GetXmlHttpObject fonksiyonları ile PHP ve AJAX MySQL Veritabanı Örneği Bu bölümdeki örnekler aynıdır. İlgili açıklamaları gözden geçirebilirsiniz.

stateChanged() fonksiyonu

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

  1. responseXML fonksiyonu kullanılarak "xmlDoc" değişkeni bir XML belgesi olarak tanımlanır
  2. Bu XML belgesinden verileri al ve bunları doğru "span" elementlerine yerleştir

PHP sayfası

Bu, "responsexml.php" adlı basit bir PHP dosyası olan bir sunucu sayfasıdır ve JavaScript tarafından çağrılır.

Bu sayfa PHP ile yazılmıştır ve MySQL veritabanını kullanır.

Kod, veritabanına yönelik bir SQL sorgusu çalıştırır ve sonuçları XML belgesi olarak döndürür:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//Bir geçmiş tarih
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = ".$q."";
$result = mysql_query($sql);
echo '<?xml version="1.0" encoding="ISO-8859-1"?>'
<person>';
while($row = mysql_fetch_array($result))
 {
 echo "<firstname>" . $row['FirstName'] . "</firstname>";
 echo "<lastname>" . $row['LastName'] . "</lastname>";
 echo "<age>" . $row['Age'] . "</age>";
 echo "<hometown>" . $row['Hometown'] . "</hometown>";
 echo "<job>" . $row['Job'] . "</job>";
 }
echo "</person>";
mysql_close($con);
?>

Örnek Açıklama:

JavaScript'ten PHP sayfasına gelen sorgu olduğunda, şu gerçekleşir:

  • PHP belgesinin content-type'i "text/xml" olarak ayarlanmıştır
  • PHP belgesi "no-cache" olarak ayarlanmıştır, önbellekleme önlemek için
  • HTML sayfası ile gelen verilerle $q değişkenini ayarla
  • PHP ile MySQL sunucusu ile bağlantı aç
  • Belirtilen id ile "user" bul
  • Verileri XML belgesi olarak çıktıya ver