AJAX XML dosyası

< Önceki Sonraki >

AJAX XML Örneği

AJAX bir XML dosyasıyla etkileşimli iletişim için kullanılabilir.

Aşağıdaki AJAX örneğinde bir web sayfasının AJAX teknolojisini kullanarak nasıl bir XML dosyasından veri çekebileceğini göreceğiz.

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

CD bilgisi burada gösterilecek.

AJAX Örneğinin açıklaması

Yukarıdaki örnek basit bir HTML formu ve bir JavaScript koduna bağlantı içerir:

<html>

<head>
<script src="selectcd.js"></script>
</head>

<body>

<form> 
Select a CD:
<select name="cds" onchange="showCD(this.value)">

<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option> 
</select>

</form>

<p>
<div id="txtHint"><b>CD bilgisi burada gösterilecek.</b></div>
</p>

</body>
</html>

Gördüğünüz gibi bu sadece "cds" adında bir seçmeli liste öğesi içeren basit bir html formudur.

Formun altındaki paragraf "txtHint" adında bir div öğesi içerir. Bu div öğesi sunucudan gelen veri için bir yer tutucu olarak kullanılmaktadır.

Kullanıcı veri seçtiğinde "showCD" işlevi çalıştırılır. Bu işlevin çalışması "onchange" olayı tarafından tetiklenir. Başka bir deyişle kullanıcı açılır listenin değerini her değiştirdiğinde showCD işlevi çağrılır.

JavaScript kodu aşağıda gösterilmektedir.

AJAX JavaScript kodu

"selectcd.js" dosyasındaki kod aşağıdaki gibidir:

var xmlHttp

function showCD(str)
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="getcd.asp";
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)
{ 
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;
}

XML Dosyası

XML dosyası "cd_catalog.xml" dir. Bu dosya bir cd listesi içermektedir.

AJAX Sunucu Sayfası

JavaScript tarafından çağrılan kod "getcd.asp" adında basit bir ASP dosyasıdır.

Sayfa VBScript dilinde bir Internet Information Server (IIS) sunucu için yazılmıştır. Kolayca PHP dilinde yada başka bir sunucu taraflı dil ile de yazılabilir. PHP ile yazılmış benzer bir örnek için tıklayın.

Bu kod bir XML dosyasını sorgular ve sonucu HTML olarak döner:

<%
response.expires=-1
q=request.querystring("q")

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))

set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")

for each x in nodes
  for each y in x.childnodes
    response.write("<b>" & y.nodename & ":</b> ")
    response.write(y.text)
    response.write("<br />")
  next
next
%>

< Önceki Sonraki >