Ayberk Atasay

ASP, CSS, Internet konuları üzerine paylaşımlar

AJAX ile Seçime Göre Liste

Bir site tasarlarken, form işlemlerinde en önemli konulardan biri, listeden yapılan seçime göre yeni bir listenin belirmesi veya aktif listedeki bazı değerlerin güncellenmesi. Bu işlemi AJAX teknolojisi ile gerçekleştirebiliriz.

AJAX Nedir?
AJAX'ın öncelikle bir programlama dili olmadığını bilmemiz gerekiyor. Bir programlama yöntemidir. AJAX, "Asynchronous JavaScript And XML"'ın başharflerinden oluşmuş bir kısaltmadır. AJAX ile kullanıcı dostu internet uygulamaları geliştirebilirsiniz. Javascript ve HTTP istekleri üzerine kurulu bir yöntemdir.

Sitelerimizde kullanabileceğimiz yöntemleri; form işlemleri, belli aralıklarla güncellenen uyarılar, son haberler olarak sıralayabiliriz.

Ben size bu yazıda form işlemleri ile ilgili bilgiler ve kodlar vermeye çalışacağım.

Form.html dosyası oluşturup içine basit bir form yerleştirebiliriz.

<html><head>

<script src="verisec.js"></script>

</head><body>

Listelenecek verileri seçiniz:

<select name="veriler" onchange="VeriGoster(this.value)">



  <option value="1">ASP</option>

  <option value="2 ">CSS</option>

  <option value="3">Internet</option>



</select></form><p>

<div id="Veriler"><b>Verilerimiz burda listelenecek.</b></div>

</p></body></html>

Bu dosyamızdan sonra ikinci dosyamız olan verisec.asp dosyamızı oluşturuyoruz. Siz bu dosyayı verisec.php veya kendinize göre düzenleyebilirsiniz.

<html><head></head><body>

<%

If Request.QueryString("q") = "1" then

Response.Write "ASP ile ilgili verilerimiz burada"

ElseIf Request.QueryString("q") = "2" then

Response.Write "CSS ile ilgili verilerimiz burada"

ElseIf Request.QueryString("q") = "1" then

Response.Write "Internet ile ilgili verilerimiz burada"

End If%>

</body></html>

Ve tüm bu dosyalarımızın çalışmasını ve ilişki kurmasını sağlayan son dosyamızı verisec.js olarak belirliyoruz.

var xmlHttp



function VeriGoster(str)

{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

  {

  alert ("Tarayıcınızı güncelleyiniz.");

  return;

  }

var url="verisec.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("Veriler").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 dosyayı görmek için tıklayınız.

Javascript/AjaxAyberk Atasay23 Ocak 2009, CumaEkle Bunu

Önceki Kayıt

Sonraki Kayıt

Yorumlar

Ömer Faruk ÖZKAN
28 Ocak 2009, Çarşamba

Merhaba arkadaşım. Güzel bir anlatım olmuş gerçekten. Yanlız ben bunu ie6 'da çalıştıramadım. Yani desteklemiyor sanırım. Nasıl desteklettirebiliriz biliyormusun

İbrahim ÇAKICI
24 Ocak 2009, Cumartesi

Çok güzel ve açıklayıcı bir anlatım yazısı olmuş. Ağzına sağlık abi.. devamını bekliyoruz. :D

Ayberk Atasay
23 Ocak 2009, Cuma

Teşekkür ederim müjdat. Bende daha ilk kez bugün öğrendim ve mantığını kavradım. Şimdi diğer yapılabilir form işlemlerini anlatmak için hazırlıklara başladım (:

müJdaT
23 Ocak 2009, Cuma

Güzel bir anlatım olmuş. Birçok yerde işimize yarayabilir. Teşekkürler :)