ajax nedir, nasıl kullanılır ve googledeki gibi açılan liste yapımı

 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>

            &nbsp;</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 .


 


Bunu beğen
Paylaş

Yorumlar
Yorum Yaz
İsim : (*)
E-mail :
Web Adresi:
:
(*)
 
Kapat