Ajax Programlama
Ajax, Asenkron JavaScript ve XML'in kısaltmasıdır ve aslında bir programlama dili olmaktan ziyade bir dizi web geliştirme tekniğini ifade eder. Ajax, istemci tarafı programlamada (örneğin JavaScript) yaygın olarak kullanılır ve bir veritabanına ya da sunucuya veri göndermeyi ve veri almayı sağlar. Ajax programlamasını özel kılan, bu veri alışverişini arka planda yaparak kullanıcı deneyimini kesintiye uğratmadan gerçekleştirebilmesidir. Wikipedia'nın da belirttiği gibi:
Veri alışverişi katmanını sunum katmanından ayırarak, Ajax, web sayfalarının ve dolayısıyla web uygulamalarının, tüm sayfayı yeniden yüklemeye gerek kalmadan dinamik olarak içerik değiştirmesine olanak tanır.
Bu yöntem, hem web sitesi performansı hem de kullanılabilirlik açısından oldukça faydalıdır. Asenkron yükleme, render bloklamadığı için, bir script etiketi ile karşılaşılsa bile sayfanın HTML'sinin parse edilmeye devam etmesini sağlar. Kullanılabilirlik açısından ziyaretçiler, sayfanın yeniden yüklenmesine gerek kalmadan belirli bilgilerin anında oluşturulduğunu görebilir. Bu, algılanan performansı iyileştirmek adına büyük bir adımdır.
Ajax Nasıl Çalışır?
Ajax'ın çalışma prensibi oldukça basittir. Aşağıda, geleneksel yöntemle bir web sunucusundan veri isteme işlemi ile Ajax yönteminin karşılaştırıldığı bir görsel bulunmaktadır. Aşağıdaki bölümde, her iki tarafta nelerin gerçekleştiğini açıklayacağızç
Geleneksel Yöntem (Alışıla Gelmiş)
Geleneksel yöntemin en başından itibaren, tarayıcının web sunucusuna veri talebinde bulunmak istediğini görebiliriz. Bu durumda aşağıdaki adımlar gerçekleşir:
1. Tarayıcıdan web sunucusuna bir HTTP isteği yapılır. Bu nedenle, kullanıcı bu isteğin işlenmesini ve bir yanıtın dönmesini beklemek zorundadır.
2. İstek web sunucusuna ulaşır ve uygun veri alınır.
3. İstenen veri tarayıcıya geri gönderilir ve kullanıcı bu veriyi görebilir.
Ajax Yöntemi
Aynı veriyi talep ederken Ajax yöntemi kullanıldığında aşağıdaki işlemler gerçekleşir:
1. Tarayıcı, Ajax motoruna bir JavaScript çağrısı yapar. Başka bir deyişle, bir XMLHttpRequest nesnesi oluşturulur.
2. Arka planda, sunucuya bir HTTP isteği yapılır ve uygun veri alınır.
3. HTML, XML veya JavaScript verisi Ajax motoruna geri gönderilir ve ardından istenen veri tarayıcıya iletilir.
Bu yöntemle, kullanıcı yaptığı isteğin ardından bilgilere ulaşana kadar geçen sürede herhangi bir kesinti yaşamaz.
Ajax, Asenkron JavaScript ve XML'in kısaltmasıdır ve aslında bir programlama dili olmaktan ziyade bir dizi web geliştirme tekniğini ifade eder. Ajax, istemci tarafı programlamada (örneğin JavaScript) yaygın olarak kullanılır ve bir veritabanına ya da sunucuya veri göndermeyi ve veri almayı sağlar. Ajax programlamasını özel kılan, bu veri alışverişini arka planda yaparak kullanıcı deneyimini kesintiye uğratmadan gerçekleştirebilmesidir. Wikipedia'nın da belirttiği gibi:
Veri alışverişi katmanını sunum katmanından ayırarak, Ajax, web sayfalarının ve dolayısıyla web uygulamalarının, tüm sayfayı yeniden yüklemeye gerek kalmadan dinamik olarak içerik değiştirmesine olanak tanır.
Bu yöntem, hem web sitesi performansı hem de kullanılabilirlik açısından oldukça faydalıdır. Asenkron yükleme, render bloklamadığı için, bir script etiketi ile karşılaşılsa bile sayfanın HTML'sinin parse edilmeye devam etmesini sağlar. Kullanılabilirlik açısından ziyaretçiler, sayfanın yeniden yüklenmesine gerek kalmadan belirli bilgilerin anında oluşturulduğunu görebilir. Bu, algılanan performansı iyileştirmek adına büyük bir adımdır.
Ajax Nasıl Çalışır?
Ajax'ın çalışma prensibi oldukça basittir. Aşağıda, geleneksel yöntemle bir web sunucusundan veri isteme işlemi ile Ajax yönteminin karşılaştırıldığı bir görsel bulunmaktadır. Aşağıdaki bölümde, her iki tarafta nelerin gerçekleştiğini açıklayacağızç
Geleneksel Yöntem (Alışıla Gelmiş)
Geleneksel yöntemin en başından itibaren, tarayıcının web sunucusuna veri talebinde bulunmak istediğini görebiliriz. Bu durumda aşağıdaki adımlar gerçekleşir:
1. Tarayıcıdan web sunucusuna bir HTTP isteği yapılır. Bu nedenle, kullanıcı bu isteğin işlenmesini ve bir yanıtın dönmesini beklemek zorundadır.
2. İstek web sunucusuna ulaşır ve uygun veri alınır.
3. İstenen veri tarayıcıya geri gönderilir ve kullanıcı bu veriyi görebilir.
Ajax Yöntemi
Aynı veriyi talep ederken Ajax yöntemi kullanıldığında aşağıdaki işlemler gerçekleşir:
1. Tarayıcı, Ajax motoruna bir JavaScript çağrısı yapar. Başka bir deyişle, bir XMLHttpRequest nesnesi oluşturulur.
2. Arka planda, sunucuya bir HTTP isteği yapılır ve uygun veri alınır.
3. HTML, XML veya JavaScript verisi Ajax motoruna geri gönderilir ve ardından istenen veri tarayıcıya iletilir.
Bu yöntemle, kullanıcı yaptığı isteğin ardından bilgilere ulaşana kadar geçen sürede herhangi bir kesinti yaşamaz.
Asenkron vs Senkron Yükleme
Script'lerin yüklenmesi konusunda, geleneksel olarak script'ler senkron yöntemle yüklenirdi. Bu süreç, sayfanın render edilmesi sırasında bir script etiketi ile karşılaşıldığında bu script'in sırayla yüklenmesini gerektirir, dolayısıyla HTML'nin parse edilmesi engellenirdi. Script tam olarak yüklendikten sonra, HTML parse edilmeye ve web sayfasının geri kalanı yüklenmeye devam ederdi.
Aşağıdaki görselde, art arda yüklenen 3 senkron script'i görebiliyoruz. Ancak, aynı zamanda bir asenkron script'in de aynı anda yüklendiğini, bu sayede daha verimli bir yükleme süreci sağlandığını görebiliyoruz.
Ajax Programlama Örnekleri
Script'lerin yüklenmesi konusunda, geleneksel olarak script'ler senkron yöntemle yüklenirdi. Bu süreç, sayfanın render edilmesi sırasında bir script etiketi ile karşılaşıldığında bu script'in sırayla yüklenmesini gerektirir, dolayısıyla HTML'nin parse edilmesi engellenirdi. Script tam olarak yüklendikten sonra, HTML parse edilmeye ve web sayfasının geri kalanı yüklenmeye devam ederdi.
Aşağıdaki görselde, art arda yüklenen 3 senkron script'i görebiliyoruz. Ancak, aynı zamanda bir asenkron script'in de aynı anda yüklendiğini, bu sayede daha verimli bir yükleme süreci sağlandığını görebiliyoruz.
Ajax Programlama Örnekleri
Ajax işlevlerini kullanma konusunda ise birçok olasılık mevcuttur. Tipik bir Ajax işlevi şu iki bileşenden oluşur:
$.ajax (url [, settings])
`ajax` fonksiyonunun `url` parametresi, istekte bulunmak istediğiniz URL'yi tanımlar ve `settings` parametresi ise isteğin yapılandırılmasını sağlar. Resmi jQuery ve Ajax belgelerindeki tam yapılandırma seçeneklerine göz atabilirsiniz.
$.ajax('demo.html', {
success: function (result) {
$ ('#testdiv').html (result);
}
});
Yukarıdaki örnek, jQuery ve Ajax kullanımının basit bir gösterimidir. `demo.html` URL'sine bir istek yapıyoruz. Ardından, sonucu alıp ID'si `#testdiv` olan öğeye ekliyoruz.
CyberRulz06 tarafından çevirilmiştir. Asıl makalede bulunan bâzı uzun detayları traşlayıp asıl çözümleri öne taşımaya çalıştım. Anlam bütünlüğü korunması için bazı kelimeler Türkçe de farklı çevirilmiştir ve orijinal görseller kullanılmıştır. İyi okumalar ve iyi forumlar
KeyCDN. (2018, October 4). What is Ajax programming - Explained. KeyCDN. What Is Ajax Programming - Explained - KeyCDN Support
$.ajax (url [, settings])
`ajax` fonksiyonunun `url` parametresi, istekte bulunmak istediğiniz URL'yi tanımlar ve `settings` parametresi ise isteğin yapılandırılmasını sağlar. Resmi jQuery ve Ajax belgelerindeki tam yapılandırma seçeneklerine göz atabilirsiniz.
$.ajax('demo.html', {
success: function (result) {
$ ('#testdiv').html (result);
}
});
Yukarıdaki örnek, jQuery ve Ajax kullanımının basit bir gösterimidir. `demo.html` URL'sine bir istek yapıyoruz. Ardından, sonucu alıp ID'si `#testdiv` olan öğeye ekliyoruz.
CyberRulz06 tarafından çevirilmiştir. Asıl makalede bulunan bâzı uzun detayları traşlayıp asıl çözümleri öne taşımaya çalıştım. Anlam bütünlüğü korunması için bazı kelimeler Türkçe de farklı çevirilmiştir ve orijinal görseller kullanılmıştır. İyi okumalar ve iyi forumlar
KeyCDN. (2018, October 4). What is Ajax programming - Explained. KeyCDN. What Is Ajax Programming - Explained - KeyCDN Support
