AJAX ResponseXML

< Önceki

AJAX ResponseXML örneği

ResponseXML özelliği, DOM tarafından okunabilen bir XML belge nesnesi döner.

Aşağıdaki örnek bir web sayfasının AJAX teknolojisini kullanarak nasıl bir veritabanından bilgi getirebileceğini uygulamalı olarak gösterir. Veritabanından alınan veri, bu sefer bir XML belgesine dönüştürülecek ve daha sonra gösterilecek değerleri elde etmek için DOM kullanacağız.

Müşteri seçin:




AJAX örneği açıklaması

Yukarıdaki örnek bir HTML formu, dönen veriyi yerleştirmek için birçok <span> elemanı ve bir JavaScript dosyasına bağlantı içerir:

<html>
<head>
<script src="selectcustomer_xml.js"></script>
</head>
<body>

<form action="">
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>

<b><span id="companyname"></span></b><br />
<span id="contactname"></span><br />
<span id="address"></span>
<span id="city"></span><br/>
<span id="country"></span>

</body>
</html>

Yukarıdaki örnek "customers" adında bir açılan liste olan bir HTML formu içerir.

Kullanıcı açılan listeden bir müşteri seçtiğinde "showCustomer()" adında bir işlev çalıştırılır. Bu işlevin çalışması "onchange" olayı tarafından tetiklenir. Başka bir deyişle kullanıcı açılan listenin değerini her değiştirdiğinde showCustomer() işlevi çalıştırılır.

AJAX JavaScript kodu

"selectcustomer_xml.js" dosyasındaki javascript kodu şu şekildedir:

var xmlhttp;

function showCustomer(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="getcustomer_xml.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)
  {
  var xmlDoc=xmlhttp.responseXML.documentElement;
  document.getElementById("companyname").innerHTML=
  xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
  document.getElementById("contactname").innerHTML=
  xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;
  document.getElementById("address").innerHTML=
  xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;
  document.getElementById("city").innerHTML=
  xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
  document.getElementById("country").innerHTML=
  xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;
  }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

showCustomer() ve GetXmlHttpObject() işlevleri önceki konulardakilerin aynılarıdır. stateChanged() işlevi zaten bu derste daha önce kullanıldı. Ama bu kez sonucu bir XML belgesi olarak (responseXML ile) dönüyoruz ve DOM kullanarak göstermek istediğimiz değerleri elde ediyoruz.

AJAX sunucu dosyası

Javascript tarafından çağrılan sunucu dosyası "getcustomer_xml.asp" adında bir ASP dosyasıdır.

Bu dosya VBScript dili kullanılarak bir Internet Information Server (IIS) sunucusu için yazılmıştır. Bu kod kolayca PHP ve benzeri başka bir sunucu taraflı dil ile de yazılabilir.

Bu kod bir veritabanında sorgu çalıştırır ve sonucu bir XML belgesi olarak döner:

<%
response.expires=-1
response.contenttype="text/xml"

sql="SELECT * FROM CUSTOMERS "
sql=sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'"

on error resume next
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql, conn

if err <> 0 then
  response.write(err.description)
  set rs=nothing
  set conn=nothing
else
  response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")
  response.write("<company>")
  response.write("<compname>" &rs.fields("companyname")& "</compname>")
  response.write("<contname>" &rs.fields("contactname")& "</contname>")
  response.write("<address>" &rs.fields("address")& "</address>")
  response.write("<city>" &rs.fields("city")& "</city>")
  response.write("<country>" &rs.fields("country")& "</country>")
  response.write("</company>")
end if
on error goto 0
%>

Yukarıdaki ASP kodundaki ikinci satıra dikkat edin: response.contenttype="text/xml". ContentType özelliği sonuç nesnesi için HTTP içerik türünü ayarlar. Bu değer için varsayılan değer "text/html" şeklindedir. Bu kez içerik türünün XML olmasını istiyoruz.

Daha sonra veritabanından veri seçiyoruz ve elde ettiğimiz veri ile bir XML belgesi oluşturuyoruz.

< Önceki
ajax örnekleri, ajax how to, ajax, ajax kodları, ajax öğren, ajax dersi, ajax lessons, ajax programlama, ajax nedir, ajax tutorial, ajax örneği, ajax dersleri, ajax nasıl, learn ajax,