Merhaba arkadaşlar, bu dersimizde sizlere uzun bir makale ile vakit ayırıyorum ve “nedir şu jQuery ajax post metodu ?” sorusunun, baştan sona bütün ayrıntıları ile ve Türkiye’nin en ayrıntılı makalesi ile anlatmaya başlıyorum.Muhtemelen bu makale bittiğinde; ben sabahlamış olacağım sizler ise konuyu tam anlamıyla öğrenmiş olacaksınız.
Neyse anlatmaya başlayalım. Nerden girmemiz gerekir derseniz şöyle ki;
Web sayfalarında sıkça rastlanan formları düşünelim,bu formlara veriler girip, kayıt etmek için bin-bir takla atıp karşı sunucuya göndeririz.Bu gönderilen verilerin sonuçlarını ekranımız da, anında görmek için sayfayı yenilememiz gerekir.Tabi bazen problem yaşanmayabilir fakat sayfa yenilendiği için sunucu tarafını yormuş, bant genişliğini şişirmiş oluruz.Gereksiz bilgileri istemek ,sunucuyu meşgul etmek ve bu verileri istediğimiz şekilde yerleştirememe de cabası:)
Peki neden Ajax metodunu kullanmak gerekir?
1-Kendi sayfamızdan karşı sunucu ile bilgi alışverişi yapmak istersek
2-Bu akış sağlanırken sayfa yenilenmesini istemiyorsak
3-Bilgileri istedik ve bu bilgiler geldikten sonra, sayfa da istediğimiz yere dinamik olarak yazdırmak istersek
4-Sunucumuzu fazla meşgul etmek istemezsek,trafiğimizi rahat kullanmak istersek
5-Bilgi alış-verişinde istediğimiz verilerin gidip gelmesini,gereksiz bilgilerin gitmemesini istersek

ve bu konuda daha sayabileceğimiz bir yığın sebep var. AJAX(Asynchronous JavasScript and XML) yeni bir dil ya da script değil ama bir çok yerde can simidi olarak işinizi halledebilecek işlevlere sahip.Ama nedir sorusuna verilebilecek bir cevabım da var:
“Javascript ve XML’in birbirleriyle uyumlu çalışmasıyla oluşan bir Teknolojidir.”
Gelelim şimdi nasıl kullanacağımıza;
Öncelikle bu teknolojiyi jQuery içinde kullanmak istersek ,karşımızda bir adet de php sayfamızın olması gerekir.Çünkü bu php sayfasına, veri göndereceğiz ve php sayfası içinde geçen sorgulamalar ve işlevler sonucun da oluşan ya da dönen bilgiyi, sayfa refresh olmadan ,sayfamız da göstereceğiz.Yani verilerimizi karşılayacak ve sonuç üretip bize gönderecek bir adet php dosyası cepte.İsterseniz tamamen varsayım olarak sayfamızdan gönderilecek öğrenci numarasına ait bir öğrencinin, diğer kayıt bilgilerinden biri olan öğrenci adini, veri tabanımızdan isteyelim.Bunun için bir tane php dosyası yazıyorum.

Şimdi burası da ne demeyin.Ben sizler için tam yazmaya çalışıyorum ama “bu çok uzun kardeşim! veri yollamayacağım ,hem ben kayıt falan da getirmek istemiyorum! sunucu da ki php dosyamda ne var ne yok bakıp çıkacağım” derseniz, sizi aşağıya alalım ve kısadan öğrenmeye başlayın.Ölümle korkutup sıtmaya razı etmek bu oluyor:)
Neyse yukarıda ki php dosyasını şimdilik unutun ve aşağıda ki php dosyası ile devam etmek için, gelin buna bir isim verelim.İsmi “veri.php” olsun.

Evet veri.php sayfamızı oluşturduk.Elde var bir.Ama index sayfamıza da
bir adet buton koyalım ve tıkladığımız zaman ajax metodunu çalıştıralım.Yani buton oluşturacak HTML kodları:Elde var iki.

Şimdi gelelim esas kodlarımızı oluşturmaya.JQuery’de işlem yapacağımız
için script tagları arasına kodlarımızı şöle yazıp devam edelim.

En basit manada bu kadar anlatım yeter.Başka bir php dosyasından sayfa yenilenmeden değer aldık ve geldik.İstediğiniz bu değilmiydi.Daha
fazlası için biraz daha gayret edelim.Şimdi neler ile devam edeceğimize bir bakalım.Bence Ajax metodunun aldığı ve alabileceği diğer parametreler ile
devam edelim.Yukarıda parametre olarak ne kullandık?
url ve success kullandık.Şimdi bunları listeleyelim:

  • url :veri istenilen ya da gönderilen php dosyasının adresini,dosya yolunu tutar.Birşey yazmazsak bulunduğunuz sayfayı, varsayılan olarak alır.
  • success :ajax isteğimiz başarılı olmuşsa veri gelmişse, bu fonksiyon çalışr.Buraya dikkat edin çünkü bu talep sonrasında gelen veriler sayfaya işlenecektir.Yani en çok haşir neşir olacağınız yer burası.Gelen verilere istediğiniz gibi taklalar attırabilirsiniz.
  • error :ajax isteğimiz başarılı olmamışsa, fonksiyon çalıştırır.Hata gösterir.Bir çok hata parametresi vardır.Neden hata aldığınızı bu parametrelerle öğrenebilirsiniz.Bu parametrelere bakmak için okumaya devam edin.
  • statusCode :ajax isteğimiz başarılı olmamışsa, fonksiyon çalıştırır.Hata gösterir.error’un biraz daha gelişmişidir.Hata koduna kadar ayrıntı verir.
  • type :Yukarıda ki örnekte sayfadan sadece bilgi çektik.
    Eğer bilgi gönderseydik bilgimizi hangi yöntemle göndereceğimizi belirtmeliydik.Bu değer ‘POST’ veya ‘GET’ olabilirdi.Eğer bir şey yazmazsak varsayılan olarak GET metodunu alacaktır.
  • data :Veri gönderirken bilgiyi(değişkenleri) tutar.Mesela data :{‘ogr_no’:ogr_no} şeklindedir.
  • dataType :Sunucudan gelen verinin türünü belirlememizi sağlar.HTML,XML,JSON,TEXT,SCRİPT…Eğer istediğimiz sayfadan gelen veri JSON ise dataType:’json’ olarak belirtmemiz gerekir.
  • timeout :Gönderilen isteğe cevap verme süresini Milisaniye olarak belirler.
  • beforeSend :Sunucuya istek gönderilmeden önce neler yapılabileceğini belirler.Mesela bilgi gelene kadar loading animasyon ya da .gif resim gösterebilirsiniz.
  • async :Gönderilecek isteklerin eş zamanlı olup olmayacağını belirler.Varsayılan olarak true değerini alır.
  • cache :İsteği önbelleğe alma anlamına gelir. False olması halinde tarayıcı kaynaklı performans sorunları yaşanabilir.
  • complete :İsteğimizin işlenip sonucunun gelmesiyle ilgili işlemler yapar.Mesela ajax bittiği için loading animasyonunuzu kaldırabilirsiniz.
  • contentType :Gönderilen bilginin içerik tipi ile ilgilidir.PDF,JPEG,PNG,CSS,XML,JSON,RSS,TEXT…Örnek bir contentType->application/json; charset=utf-8 fakat varsayılan olarak–>default: ‘application/x-www-form-urlencoded’ dir
  • processData:Gönderilecek bilginin ContentType’nın otomatik olarak çevrilip çevrilmemesini sağlar.
    true veya false değerler alır.Çevrim olmamasını istiyorsanız false değer vermelisiniz.
  • ifModified :Talebi göndermeden önce sayfa değiştirilmişse karşı sunucu bunu kontrol eder.
  • global :Ajax olay tutucularının tetiklenip tetiklenmeyeceğini belirler.
  • context: :Success metodu sonunda dönen veriyi içine ekleyeceğimiz, dom nesnesini tutar.Tanımlaması şu şekildedir | context: $(‘#domnesnesi’),
    success içinde ise kullanımı şu şekildedir | $(this).html(‘donenVeri’);
  • usarname :HTTPS gibi bağlantılardan cevap alabilmek için kullanıcı adı
  • password :HTTPS gibi bağlantılardan cevap alabilmek için şifre

Sanırım bu katar parametre yeter. Ama bunları iç içe ya da diğer bir deyişle alt alta nasıl kullanacağınızı da hemen izah edeyim.
Çok kolay! aralarına virgül koyarak, ard arda ve iç içe kullanabilirsiniz.Örnek olarak aşağıda ki kod bloğuna dikkat edelim.

Yukarı da gördüğünüz gibi ,aralarına virgül koyarak beraberce bir çok parametre kullanabiliriz.
Aslında error hatalarını daha da ayrıntılı görebiliriz.Şu şekilde olacak:

Devam ediyoruz ve işi biraz zorlaştıralım.Mesela sayfanızda 10 tane ajax metodu kullandığınızı varsayalım fakat sürekli aynı php dosyasına veri gönderiyorsunuz ve gönderme metodunuz her zaman için POST metodu olsun.Bütün ajax metodlarının içine url:’veri.php’ ve type:’POST’ yazmak demek 20 satır kod eder.Fakat sürekli olarak kullandığımız bu parametreleri tek bir çatı altında bir defa kullanıp fazla satır yazmaktan kurtulmaya ne dersiniz.İşte bunun adı $.AJAXSETUP()
Nasıl kullanabileceğimize gelirsek şu şekilde tanımlayıp devam ediyoruz.

Yukarıda olduğu gibi sürekli ortak olanları ajaxSetup içine yazıp global parametresini false verdikten sonra normal ajax metodu içine de ortak olmayan parametreleri yazarak işlemi bitiriyoruz.
Şimdi benim çokça pratik bulduğum bir metoddan daha bahsedeceğim:SERIALIZE() Bu metod ise form ile gönderdiğimiz bilgileri ,kendliğinden
sıraya koyarak göndermemize yarar.Örnek olması açısından HTML kodları kullanarak bir form nesnesi oluşturalım.

Evet Form nesnemizi oluşturduk ve Ajax-serialize kodlarımızı yazalım:

Form nesnesi içinden form değerlerinin name ve id özelliklerini seçerek serialize işlemine başlamak için şimdide GET metodu ile verileri göndereceğimiz veri.php dosyasını oluşturalım:

Evet anlatabildim mi bilmiyorum ama onlarca select radio buton ve input değerlerini teker teker elle girip göndermektense bu metodu kullanmak çok daha mantıklı.
serialize() metodu verileri şu şekle çevirerek isim=Mahmut&soyisim=Aydın verdiği için elle atama veya değişken tanımlama işlemlerinden kurtulmuş oluyoruz.
Şimdi bir metod daha sizlerle paylaşmak isterim SERIALIZEARRAY() , bu metod ise form nesnelerinde ki bilgileri JSON tarzında bir diziye aktarır.Bu bilgiler diziye aktarılınca belirli bir sıra numarası alacakları için daha sonradan parçalanıp kullanılması kolaylaşır.Formumuz şöyle olsun

SERIALIZEARRAY() işlemi ise aşağıda ki gibi olacaktır.

Sonuçta şöyle bir değer üretmesi beklenir.

Dersim uzun olacak diye demiştim ve devam edelim…:)
Şimdi sizi daha özel bir metod ile tanıştıracağım.Bu metodda jQuery içinde hazır olarak var.Adamlar zamanında yazmışlar abi:)$post metodu:$ajax({}) ‘ın yerine kullanabiliriz.
Bu metod $ajax({}) ile başlamayacak ve onun post özelliğini kullanan daha kısa bir fonksiyon.İçinde success,error gibi diğer özellikleri hazır bulundurur.Şimdi nasıl kullanıldığına bir bakalım.Veri alışverişinde json kullanacağım haberiniz olsun.Kullanmak zorunda değiliz!(Dikkat)

Yukarıda ki post metodunda veri.php dosyasına öğrenci numaramızı gönderdik ve gerekli sorgular sonunda geri gelen öğrenci adını da ekranda uyarı verdirelim.İşte veri.php sayfamızın kodları,

Tabi yukarıda ki durumda veri tabanın da tek bir kayıt vardı ve $array[‘ogr_adi’] değerinden bir adet var.Bir düşünün ki biz bütün öğrencilerin kayıtlarını istedik işte gelin bakalım biz bu işlemi nasıl yapacağız.Öncelikle veri.php dosyamızın içine gerekli SQL kodlarımızı yazalım.İşte veri.php dosyasının kodları:

Yukarıda ki Array(Dizi) artık çoklu bir dizi haline geldi çünkü birden fazla öğrenci adı var .Sırası ile değerleri alıp jquery de success fonksiyonunda karşılayalım.Yani şöyle bir şey olacak–>:İşte kodlar:

Yazar Hakkında

8 Comments

  1. Ajax ile post ettiğim sayfadaki verileri senkron bir biçimde alabilirmiyim. Amacımı açmak gerekirse multiple bir file upload yapıyorum bunları toplu olarak sectirip yüklüyorum post ettiğim sayfada işlem bitimindede success de dönen degerleri yakalıyorum ve yazdırıyorum ekrana fekat ben istiyorumki toplu olarak seçtiğim dosyaları post ettiğimde her bir dosya yuklenısınde benım success’ime veya yakalayabileceğim herhangi biyere deger donsun ve ben bunu yazdırayım

    Success bildiğim kadarıyla işlem başarılı olarak tamamlandıysa işlem görüyo post ettiğim sayfadaki ekrana bastığım değeri anlık olarak yakalayabileceğim bir durum varmıdır?

    Bu arada makalen ajax konusunda çok açıklayıcı başarılar.

  2. Bilader emeğine, bileğine, yüreğine sağlık, çok sağlam makale olmuş.. teşekkürler

  3. Hocam teşekkür ederim.Emeğinize sağlık.

  4. Emeğine eline sağlık. Zekatınıda aldık kabul ettik..
    Bir sorum olacak post ile get arasında fark nedir..
    Yani
    (url: “ajax.aspx?basla=” + basla )
    type: “GET”,
    dataType: “html”)

    (url: “ajax.aspx?basla=” + basla )
    type: “POST”,
    dataType: “html”)

    aynı iş yapılmazmı..
    ayrımı nedir.. Açıklarsan 100 mumluk floresan lamba gibi aydınlanacağız.. Teşekkürler

  5. merhaba
    sureli olarak yapabilirmiyiz pelki
    her 50 sn de bir gibi

    • Yukarıda ki kod ile 50 saniyede bir post işlemini gerçekleştirebilirsiniz…

  6. Hocam merhabalar, MVC’de ajax metodu kullanarak işlemlerimizi gerçekleştiriyoruz.Makale ekleme bölümünde içerik kısmı için uzun bir metin girildiğinde Http 404.15 MaxQueryString hatası alıyoruz. WebConfig dosyasına <system.web

    eklememize rağmen sorun devam ediyor.Bu konuyla alakalı çözümünüz var mıdır ? Teşekkürler 🙂

  7. çok güzel bir yazı olmuş elinize sağlık.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Close