Merhaba ;
Bu yazıda Ajax konusuna bakıp örnek bir uygulama yapacağız. Örnek uygulama olarak da google deki gibi suggest uygulaması yapacağız. Uygulamamızda İETT nin sitesinde kullanılan hat arama örneğinin benzerini yapacağız. Sayfanın üstündeki text alanına otobüs hat numarası girmeye başlayınca textbox ın altında bastığımız rakamlarla başlayan hat isimleri listelenecek örneğin 14 yazdığımızda listede 146 B:Başakşehir-Mecidiyeköy ,145 M : Beylikdüzü- Mecidiyeköy yazacak . Peki ajax nedir ,ne işe yarar ajax bir programlama dili değildir sadece web sitelerinde kullanılan bir tekniktir . AJAX : Asynchronous JavaScript and XML kelimelerinin baş harflerinden oluşmuştur. Ajax tekniği yeni olmamakla beraber ilk tanışmamız google nin suggest i ile oldu. Biz googlede bir kelimeyi yazmaya başladığımda bize açılır bir liste ile o harf kombinasyonuna uyan en popüler kelime kombinasyonlarını ya da cümleleri gösterir. Ajax tekniğini kullanmanın bir çok kısa yolu vardır. Örneğin Visual Studio ya bir dll ile entegre edilebilen ve aynı zamanda açık kaynak kod olan ajax control toolkit sayesinde saniyeler içinde ajax işlemelerini yapabiliriz ya da Jquery gibi javascript kütüphaneleri ile. Ama ben bu yazıda Ajaxın temelinde bulunan ve xmlhttprequest nesnesini kullanarak örnek yapıyor olacağım. (Bir sonraki yazıda da aynı işlemi Jquery ile anlatacağım ) xmlhttprequest nesnesi temel olarak javascript ile sunucuya istek gönderip sunuca gelen cevabı da aynı şekilde sitemcide göstermeye işleminde kullanılır. Tabi bu işlem asenkron olur yani tüm sayfa sunuca gönderilip gelen cevap sonucunda da tüm sayfa tekrar kullanıcı bilgisayarına yüklenmez. Sonuç olarak kullancı daha az bekler ve boşu boşuna server –client trafiği oluşmaz . Şimdi örneğe geçelim
İlk olarak aspx sayfamızı yapalım .
Default.aspx
<table border="0" cellpadding="0" cellspacing="0" "
style="width: 300px" style="width: 161px" align="center">
<tr><td align="char">
<input class="textbox" id="txt" onkeyup="ajaxFunction(txt.value)" type="text" />
</td>
<td>
</td></tr>
<tr><td colspan="2">
<div id="lblStatus" style="position: inherit; top: 0px"></div>
<div id="loader" style="display:none;"><img src="img/ajax-loader.gif"/></div>
</td></tr>
</table>
sayfamızın html kodları bukadar.
Şimdi xmlhttpreqest nesnemizi oluşturalım. Bunun için ayrı bir javascript dosyası kullanalım ki her seferinde tekrardan kod yazmayım sayfamıza dosyamızı include edip kullanabilelim. Dosyamızın adı JScript.js olsun
JScript.js
function durum()
{
var xmlHttp=null;
try
{
//FireFox,Opera,Safari ve IE7 ve üzeri
xmlHttp = new XMLHttpRequest();// nesneyi oluşturmaya çalışıyoruz browser ie6 ise bu kod çalışmayacaktır.
xmlHttp.overrideMimeType("text/xml; charset=iso-8859-9");//işelem sonunda oluşacak veri türünü belirtiyoruz
}
catch(e)
{
//IE 6.0+
try
{
xmlHttp = new ActiveXObject("msxml2.XMLHTTP");//ie 6 ise bu şekilde nesne oluşacktır
}
catch(e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//ie 6 dan daha eski ise
}
}
return xmlHttp;
}
Şimdi tekrar Default.aspx geçip ajax isteğinde bulanalım sayfanın head tagının içine kodu yazalım;
<script src="JScript.js" type="text/javascript"></script>
<script type="text/javascript">
function yukle(val)//açılan listedeki istenilen hat numarasına tıklanınca o hat bilhilerini textbox ekleyecek fonksiyon
{
document.getElementById('txt').value=val;//listedeki metne tıklayınca metin textox a yaz
document.getElementById("lblStatus").style.display='none';//listeyi kapat
}
function yukle(val)
{
document.getElementById('txt').value=val;
document.getElementById("lblStatus").style.display='none';
}
function ajaxFunction(str)// textbox a yazmaya başlayınca çalışıp ajax isteğinde bulancak fonksiyon
{
str=Trim(str);//js dosyasındaki foksiyon ile textten gelen kelimenin başındaki ve sonudaki boşlukları temizledik
if (str.length == 0 )//gelen değer boş ise yükleniyor gif ini ve sonuçları göstereğim divleri gizledim ve geri döndük .
{
document.getElementById("lblStatus").style.display='none';
document.getElementById("loader").style.display="none";
return ;
}
var xmlHttp=durum();//js dosyasındaki durum fonksiyonundan xmlhttprequest nesnesini istedik
if (xmlHttp==null)//eğer nesne oluşmamış ise yani kullanıcıc tarayıcsı ajax desteklemiyor ise
{
alert("Browser Ajax desteklemiyor...");//uayrı verip işlemi iptal ettik
return;
}
xmlHttp.open("GET","AjaxIslem.aspx?isim="+str,true);//gelen parametreyi AjaxIslem.aspx e Get petodu ile gönderdik
xmlHttp.send(null);
document.getElementById("loader").style.display="block";//istek gönderdik ve yükleniyor resimizi gösteriyoruz
xmlHttp.onreadystatechange=function()//sunucunun yanıt geldi ise
{
if(xmlHttp.readyState==4 || xmlHttp.status==200)// gelen yanıt 4 ise yani işlem tamamlanış ise
{
//0 istek başlatılmadı
//1 istek ayarlandı
//2 istek gönderildi
//3 istek işlemde
//4 istek tamamlandı
document.getElementById("lblStatus").style.display='block'; //sonuçları göstereceğimiz div i görüntülüyoruz
document.getElementById("lblStatus").innerHTML=xmlHttp.responseText;//sunucadan gelen cevabı div e yazdırıyoruz
document.getElementById("loader").style.display="none";//yükleniyor resmimizi gizliyoruz
}
}
}
</script>
Server yatafına GET ile parametre gönderdik yani bildiğim querystring gibi şimdi server tarafındaki kodlarımıza geçelim
AjaxIslem.aspc.cs kodumuz
17 protected void Page_Load(object sender, EventArgs e)
18 {
19 if (Request.QueryString["isim"] != null)//query sitringden gelen isim ise başlıyoruz
20 {
21 veriGetir();//verigetir metodu çağırışdı
22 }
23
24 }
25
26
27 private void veriGetir()
28 {
29 string donen = " Hiç bir sonuç bulunamadı !";
30 string ad = Request.QueryString["isim"];
31 ad = ad.Trim();
32
33 if (ad != null)
34 {
35 string cnnstr = ConfigurationManager.ConnectionStrings["bag"].ConnectionString.ToString();
36 SqlConnection cnn = new SqlConnection(cnnstr);
37 try
38 {
39
40 cnn.Open();
41
42 SqlCommand cmd = new SqlCommand("Select * from kisi where Hat like '" + ad + "%' ", cnn);//bilindik veritabanında arama işlemi
43 SqlDataReader dr = cmd.ExecuteReader();
44 if (dr.HasRows)
45 {
46 donen = "<div id='maindiv' width='100%' style='color:White; background-color: #990000; font-size:12px' >";
47 while (dr.Read())
48 {
49 donen += "<div id='mydiv' onclick='yukle(this.innerHTML);'>" + dr["Hat"].ToString() + "</div>";
50
51 }
52 donen += "</div>";
53 }
54 else
55 {
56
57 }
58 cnn.Close();
59 }
60 catch
61 {
62
63 donen = "Bir hata oluştu";
64 }
65
66
67
68
69
70
71 }
72 else
73 {
74 donen = "Kayıt Yok";
75 }
76 Response.Write(donen);
77 Response.End();
78 }
Get ile gelen değeri aldık veritabanında arama yaptık ve kayıt bulundu ise her kayıdı bir div içine koyduk ve divin onclick eventine yukle adındaki javascript fonksiyonunu adı verip parametre olarak o divin içeriğini veridk böylece metne tıklatınca listedeki metin textbox a eklenecektir.
Bu yazının da sonuna geldik. Uygulamanın ekran görüntüsü aşağıdaki gibi olacaktır.
Görüşmek üzere .