Makale Özeti

İstemci tarafında dinamik olarak içerik değiştirme durumu uygulamalarımızda sıkça karşılaştığımız durumlardan biridir. Banka Internet şubelerinde il seçilince şube bilgilerinin değişmesi, doldurduğumuz bazı formlarda ülke seçilince il veya eyaletlerin buna göre değişmesi gibi örnek kullanım alanlarını hemen her uygulamada görebileceğimiz bu işlemi, XMLHTTP metotlarını kullanarak; sayfanın yenilenmesine veya post olmasına gerek kalmadan uygulayacağız.

Makale




XMLHTTP ile İstemci Tarafında Dinamik İçerik Değiştirme

İstemci tarafında dinamik olarak içerik değiştirme durumu uygulamalarımızda sıkça karşılaştığımız durumlardan biridir. Banka Internet şubelerinde il seçilince şube bilgilerinin değişmesi, doldurduğumuz bazı formlarda ülke seçilince il veya eyaletlerin buna göre değişmesi gibi örnek kullanım alanlarını hemen her uygulamada görebileceğimiz bu işlemi, XMLHTTP metotlarını kullanarak; sayfanın yenilenmesine veya post olmasına gerek kalmadan uygulayacağız.

Örnek uygulamamız 2 adet dropdown içerecek ve üstteki dropdown’da seçilen değere göre alttaki değerler de değişiyor olacak.

Ana formumuz aşağıdaki gibi :

<form name="testForm">
Country:<br>
<select size="3" name="CountryList" OnClick="DisplayStates(StatesList, this.options[this.selectedIndex].value);" style="width:15%">
<option value="Canada">Canada</option>
<option value="USA">USA</option>
<option value="India">India</option>
</select>
<br>States:<br>
<select size="5" name="StatesList" style="width:15%"></select>
</form>

Üstteki CountryList isimli dropdown kendisine tıklanınca DisplayStates isimli fonksiyonu çağıracak ve buradaki işlemler sonunda StatesList isimli dropdown değerleri belirlenecek.

<script language="Javascript">
//Liste içindeki tüm içeriği siler..
function RemoveAll(ListBox)
{
   if (ListBox == null)
      return;
   ListBox.selectedIndex = -1;
   var iListBoxLength = ListBox.options.length;
   for (var i = 0; i < iListBoxLength; i++)
      ListBox.options.remove(0);
}

//Verilen ülke bilgisine göre il veya eyalet bilgilerini okur
function GetStates(Country)
{
   var szRequest = "<RequestStates Country='";
   szRequest += Country;
   szRequest += "'></RequestStates>";
   var objHTTP = new ActiveXObject("Microsoft.XMLHTTP");
   var szURL = "states.asp";
   var szHttpMethod = "POST";
   objHTTP.Open(szHttpMethod, szURL, false);
   objHTTP.SetRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   objHTTP.Send(szRequest);

   var szReply = objHTTP.ResponseText;
   if (objHTTP.status != 200)
   {
      //failure
      szReply = "";
   }
   return szReply;
}

//Gerekli fonksiyonları sırayla çağırarak, sonuç olarak listenin içini XML okuyarak doldurur..
function DisplayStates(StatesList, Country)
{
   if (StatesList == null)
      return;
   StatesList.selectedIndex = -1;

   RemoveAll(StatesList)
   var xmlStates = GetStates(Country);
   var objXmlDom = new ActiveXObject("Microsoft.XMLDOM");
   if (!objXmlDom.loadXML(xmlStates))
   {
      var sErr = "Geçersiz seçim yapıldı!\n" + xmlStates;
      alert(sErr);
   }
   else
   {
      var nodes = objXmlDom.selectNodes("/Response/State");
      for (var i = 0; i < nodes.length; i++)
      {
         var objOption = document.createElement("option");
         objOption.text = nodes[i].text;
         StatesList.add(objOption);
      }
   }
}
</script>


Örneğimizde ilk etapta çağrılan DisplayStates fonksiyonu, RemoveAll isimli fonksiyonu çağırarak, StatesList dropdown’ın içini boşaltır ve sonrasında çağırdığı GetStates.asp isimli dosya içinde XML türeterek duruma göre doğru elementleri okuyarak dropdown’ın XML’den içerik okumasını sağlar.

<%@ Language=JScript %>
<%
function ProcessRequest()
{
   var objXmlDOM = Server.CreateObject("Microsoft.XMLDOM");
   var szXmlRequest = Request.Form;
   var objRoot = objXmlDOM.selectSingleNode("/RequestStates");
   var Country = objRoot.getAttribute("Country");
   var responseXML="<Response>";
   switch(Country)
   {
   case "Canada":
      responseXML += "<State>Alberta</State>";
      responseXML += "<State>British Columbia</State>";
      responseXML += "<State>Ontario</State>";
      responseXML += "<State>Quebec</State>";
      break;
   case "USA":
      responseXML += "<State>Arizona</State>";
      responseXML += "<State>California</State>";
      responseXML += "<State>Virginia</State>";
      responseXML += "<State>Washington</State>";
      break;
   case "India":
      responseXML += "<State>Andhra</State>";
      responseXML += "<State>Delhi</State>";
      responseXML += "<State>Kashmir</State>";
      responseXML += "<State>Tamil Nadu</State>";
      break;
   }
   responseXML +="</Response>"
   Response.Write(responseXML);
   objXmlDOM = null;
}

ProcessRequest();
%>


Gelen değerin hangi ülkeden olduğu bu dosya içinde belirlenerek gerekli XML oluşturulur ve kendisini çağıran dosyaya gönderilir.

Böylece sunucu tarafına uğramadan yani sayfa post edilmeden veya kendi kendini çağırmasına gerek olmadan dinamik olarak veriler yenilenmiş olur.

Onur Kulabaş
Yazılım Danışmanı

Sorularınız için onurkulabas@yahoo.com