Jquery ile Ajax işlemleri

Bu yazıda Jquery ile yapılan bazı Ajax işlemlerini anlatmaya çalışacağım. Javascript'e aşina olanlar hiç zorlanmayacaktır diye tahmin ediyorum. Ajax işlemlerini yazarken siz de farkedeceksiniz jquery'nin güzelliklerini. Jquery resimi sitesinde doğal olarak tüm fonksiyonları anlatıyor ve kısa örneklerle geçilmiş hepsi. Bu yazıda genel olarak kullanılan fonksiyonlardan bahsetmek istiyorum. İlk olarak çok çok basit bir örnekle başalayalım. Bu örnek için jquery'nin ' load() ' fonksiyonunu kullanacağız.” load “ fonksiyonu kendi domanimiz içerisinden bir sayfayı belirlediğimiz bir alana yüklemeye yarıyor. Elimizde “data.php” adında bir sayfamız var diyelim. Bunun içerisindekileri bulunduğumuz sayfanın bir yerinde göstermek istiyoruz.

yazdığımızda “

” ile belirlediğimiz div içerisinde data.php içeriği gösterilir. Kaynak kodları sayfa sonunda vereceğim. Bunuda ornek_1 dosyasında bulabilirsiniz. Ajax işlemlerimizin ikincisi $.get() ve $.post() fonksiyonları ile veri göndermek ve server içerisinde işlenmiş veriyi geri almak olacak. Bildiğiniz gibi “get” metodu ile veri alan siteler http://www.getileverialinir.com?id=3&isim=abc gibi urlsinin icerisinde ? isareti olan sitelerdir. Post metodu ile veri gonderilirken url tipinde herhangibir değişiklik olmaz( ? Ve & İşareti olmaz). Aslında tamamen değişir, başka bir sayfaya yönlendiriliriz. Ancak bizim örneğimizde hiç değişmeyecek. Bu örneğimizde; (ornek_2) data.php sayfamız:

<?php 

$sarki["Baris Manco"]=array();

$sarki["Baris Manco"][]="Kara Sevda";
$sarki["Baris Manco"][]="Gulpembe";
$sarki["Baris Manco"][]="Daglar Daglar";
$sarki["Baris Manco"][]="Anliyorsun degil mi"; //en sevdigim sarki :))
$sarki["Baris Manco"][]="Kol Dugmeleri";


if($_GET != NULL) // eger get ile herhangi bir veri gonderilmisse
{
     if(isset($_GET["isim"])) //$_GET["isim"] adiyla bir degisken tanimlandi mi?
  {
       $isim=$_GET["isim"];
    $id=$_GET["id"];
    echo $sarki[$isim][$id]."
";
  }

}

?>

index.php sayfamızdan
veri gönderdiğimizde “.web_area” classimizin oldugu yere “Anliyorsun degil mi ” yazacak. Post metodu ile de ayni sekilde veri gonderebiliriz. Tek yapmamız gereken get yerine post yazmak. Serialize() fonksiyonu ise birden fazla veriyi göndermeye yarar. Diyelim ki bir formunuz var ve içinde doldurulmasını istediğiniz birkaç alanınız var. Sayfayı değiştirmeden bunları server'a göndermek için serialize fonksiyonunu kullanacağız. Örnek olarak ; index.php sayfamız;

//...

    

  Kati: 

Sivi:
 
Gaz:
 
     
  
  



//...

Görüldüğü gibi üç tane checkbox var. Diyelim ki bunlardan Kati ve Gaz 'ı seçtik.

Böyle bir script yazdığımızda server'a “ durum=kati&durum=gaz “ seklinde bir string gonderecek. Artık bunları nasıl kullanacaksınız orası size kalmış. (ornek_3 içerisinde sayfaların tamamını görebilirsiniz). Yeri gelmişken serialize ile daha önceki postlarımda bahsettiğim hava durumu bot'u örneğini birleştirelim. Aynı zamanda da sayfamız daha güzel görünsün diye sayfa yüklenirken kullanıcıya bir resim gösterelim. İndex php sayfamızdaki formumuz;

//...

    

  Istanbul: 

Ankara:
 
Izmir:
 
Bursa:
 
Antalya:
 
     
  
  



    //...

bu sayfa içinde

cripti ile verimizi gonderiyoruz. data.php sayfamızda ise bir bot fonksiyonu var. bir de post ile gonderilmis veriyi karşılayan bölüm var. Bu bölüm;

 //...
    
     if($_POST !=NULL)
{
    if(isset($_POST["sehirler"]))
 {
      $sehirler=$_POST["sehirler"]."&"; //stringin sonuna da & ekledikki daha anlasilir bir duzenli ifade ile sehirleri ayirabilelim 
       preg_match_all('/sehir=(.*?)&/',$sehirler,$sehir_arr); //$sehir_arr  arrayini olusturduk 
    
    //tum sehirleri teker teker fonksiyonumuza gondererek hava durumunu bekliyoruz
    foreach($sehir_arr[1] as $sehir)
    {
           hava_durumu($sehir);
    }
   
 }

}

   //...

burdan sonrasını hava_durumu($sehir) fonksiyonu yapıyor. Sectiğimiz şehirler body icerisinde gösteriliyor. Şu ana kadar anlatmaya çalıştıklarım tabi ki en genel ajax fonksiyonları. En detaylı ve güvenilir bilgiyi jquery resmi sayfasında bulabilirsiniz. Görüşmek üzere.. Tüm dosyalar : https://rapidshare.com/files/3624983948/ajax.rar