Bir AJAX Uygulaması: “Bölüm Tabanlı İkili Anlaşmalar”

Uluslararası İlişkiler Ofisinde çalışırken, fakülte seçildiğinde fakültenin içindeki bölümlerin ortaya çıktığı, onlar seçildiğinde ise anlaşmaların listelendiği bir uygulama geliştirmemizi istediler. Yani öğrenci, örneğin Mühendislik Fakültesinde, Bilgisayar Mühendisliği Bölümüyle anlaşmalı olan yabancı üniversiteleri görmek istiyorsa, sadece o kısmı görecek tüm listeye bakmak zorunda kalmayacak. Yazın staj boyunca Javascript, Php ve AJAX üzerine çalışmıştım. Bu yüzden, öğrendiklerimi pekiştirmek için bu scriptleri kullandım.

Ajax, Asenkron Javascript ve XML ifadesinin kısaltılmış biçimidir. Yeni bir dil değildir var olan Javascript tekniklerini kullanarak geliştirmişlerdir. Sayfanın tamamının yüklenmesine gerek kalmadan sadece bir kısmını asenkron olarak değiştirmemize olanak sağlıyor. Örnek verecek olursak, google sayfası açıldığında arama çubuğuna bir şeyler yazarken altta tamamlama özelliğinin çalıştığını göreceksiniz. Bunu AJAX kullanarak yapabilirsiniz.

Bizim de drop-down menülerimizde biri seçildiğinde seçime göre, öteki drop-down menü dolmalı ve oradan da seçtiğimiz bölüm anlaşma listesinin kendiyle ilgili kısmını çağırmalıydı. Öncelikle iki adet drop-down menü oluşturduk. Bunlardan ilki fakülte ve yükseokul isimleriyle doluydu. liste2 adını verdiğimiz ikincisi ise boş kalacaktı. Script çalıştığı zaman seçime göre dolduralacaktı.

<form name=”formum”>
<select name=”liste1″ onChange=”goster(this.form)”>
<option>Fakülte/Enstitü/MYO Seçiniz</option>
…</select>
<select name=”liste2″ onChange=”secim(this)”>
</select>
</form>

Kodda “onChange”, select menüsünde herhangi bir değişiklik olduğunda, seçim olduğunda içindeki fonksiyonu (secim(),goster() gibi fonksiyonları) çalıştır demektir.

function goster(t){
for (i = 0; i < t.liste1.options.length; i++){
if(t.liste1.selectedIndex==i)//adı liste1 olan formdan liste1 nesnesinden seçilmiş yerin sırasını donderir.
kategori(i);//
}
}

Arayüzümüzde önce liste1 isimli drop-down listemiz değişime açıktır. Diğer liste boş olduğu için herhangi bir değişim olamamaktadır. Bu yüzden arayüzde herhangi bir seçim yapıldığında goster() fonksiyonu çalışacaktır. Göster fonksiyonuna gönderilen şey aslında formun kendisidir. Formda liste1 isimli seçeneklerin sayısı kadar bir döngü oluşturulup, seçilen hangisiyse onu kategori() fonksiyonuna gönderecektir. Burada aslında goster(t) fonksiyonu içine sadece kategori(t.liste1.selectedIndex); yazmak yeterlidir. Zaten bu script gönderilen formdan liste1 isimli drop-down listeden, index numarasını seçer. Burada kodu gereksiz bir döngü için sokmuşuz.

function kategori(sira){var dinamik = new Array();dinamik[0] = new Array(
‘Bölüm seçiniz’,’departments/anlasmayok.html’);

dinamik[1] = new Array(

dinamik[2] = new Array(

….

var liste = dinamik[sira];
var yeni = document.formum.liste2;
yeni.options.length = 0;
for(i=0;i<liste.length;i+=2)
{

yeni.options[i/2] = new Option(liste[i],liste[i+1]);
yeni.options[i/2].setAttribute(“value”,liste[i+1]);

}

Burada kodun sonuna doğru baktığımızda dinamik[sira] hangi diziye denk geliyorsa o diziyi liste adında bir değişken oluşturup atama yapıyoruz.var yeni = document.formum.liste2 scriptiyle formdaki listeyi doldurmak üzere, yeni isminde bir değişkene atıyoruz. Bu yeni options’a atanan değerler liste2’deki drop-down menüde gözlenecektir. Burada dinamik listede elemanlar ikişer ikişer yerleştirilmiştir. Yani bizim dizilerimizdeki değerlerin tek sayıda olanları, listede gözükecekken çift sayıda olanları değer olarak atanacaktır. Değer olarak atamak demek tıklandığında o sayfanın açılması ya da gelmesi demektir. Burada for döngüsünün ikişer ikişer artması ve   yeni.options[i/2] şeklinde yazılmasının sebebi bundandır.

Şimdi ikinci listemizi, birinci seçimimize göre doldurmuş bulunmaktayız. Dolu olan bu liste2’de seçim yapıldığında sayfayı yenilemeden alta tarafa id’sini “iceri” olarak belirlediğimiz yere dışardan html sayfasından bilgi yüklemesini istemekteyiz. Bunun için son fonksiyon olan secim() fonksiyonunu yazdık.

function secim(a){if(navigator.appName==”Microsoft Internet Explorer”){
if(a.options[a.selectedIndex].value != ”){
window.top.location.href=a.options[a.selectedIndex].value}
}
else{
if(a.options[a.selectedIndex].value != ”)
{
var c=a.options[a.selectedIndex].value;
//window.top.location.href=c;
if (window.XMLHttpRequest)
{//  IE7+, Firefox, Chrome, Opera, Safari için yazılmış nesne isteği
xmlhttp=new XMLHttpRequest();
}
else
{ IE6, IE5 için yazılmış nesne isteği
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{        document.getElementById(“iceri”).innerHTML=xmlhttp.responseText;}
}
xmlhttp.open(“GET”,c,true);
xmlhttp.send();
}
}
}

Burada:

if(navigator.appName==”Microsoft Internet Explorer”){
if(a.options[a.selectedIndex].value != ”){
window.top.location.href=a.options[a.selectedIndex].value}
}

şeklinde yazdığımız kod Microsoft Internet Explorer’daki uyumluluk problemi için uygulandı. Burada eğer tarayıcı explorer ise seçilen yerdeki değeri bağlantı olarak yeni sekmede ya da yeni pencerede açmaktadır.

Diğer durumlarda browserlara göre klasik AJAX istekleri oluşturuluyor.

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{

document.getElementById(“iceri”).innerHTML=xmlhttp.responseText;

}
}

AJAX isteklerinde bazı kodların anlamları vardır. Örneğin, yukarıdaki kodda readyState, 4’e ancak istek bittiği zaman ve sayfa döndürebildiği zaman eşit olur. status özelliği ise 404 sayfa bulunamadı hatası ve 200 sayfa bulundu tamam durumlarını içerir. Burada sayfanın bulunup bulunmadığını kontrol ediyoruz. Sonuçta document.getElementById(“iceri”).innerHTML=xmlhttp.responseText; şeklindeki kodumuzla döküman içindeki “iceri” id’li div tag’ının içine innerHTML özelliğini kullanarak AJAX isteği tarafından döndürülen sayfayı giriyoruz.

Şimdi bu script http://uluslararasi.karabuk.edu.tr/ bağlantısı, anlaşmalar linki altında kullanılmaktadır. http://uluslararasi.karabuk.edu.tr/hayatboyu/ikili-anlasmalar-bolum-tabanli.htm linkinden doğrudan kaynağı göster diyerek inceleyebilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.