AJAX Nedir ve Nasıl Çalışır?

“AJAX Nedir?” AJAX, Asynchronous JavaScript and XML, Türkçe olarak Eşzamansız ve XML’in kısaltılmışıdır. Sunucuya gelen herhangi bir isteği arkaplanda işleyerek web uygulamalarının eşzamanlı olmadan çalışmasına olanak sağlayan bir takım web geliştirme teknikleridir. Bir şey anlamadınız mı? AJAX nedir sorusunun cevabı yeterince açık değil mi? Merak etmeyin her terminolojiyi ayrı ayrı açıklayacağız.

JavaScript tanınmış bir kodlama dilidir. Öbür fonksiyonların yanında, bir web sitenin dinamik içeriğini yönetir ve dinamik kullanıcı etkileşmesine izin verir. Adından da anlayabileceğiniz gibi , eXtensible Markup Language – Genişletebilir İşaretleme Dili, XML, HTML gibi işaretleme dilinin başka bir değişkenidir. Eğer HTML veriyi göstermek için tasarlandıysa, XML veriyi kapsamak ve taşımak için tasarlanmıştır.

Hem JavaScript, hem de XML AJAX’da eşzamanlı olmadan çalışır. Sonuç olarak, AJAX kullanan herhangi bir web uygulaması tüm sayfayı yenileme ihtiyacı olmadan veri yollayabilir ve alabilir.

AJAX’ın Pratik Örnekleri

Google’un otomatik tamamlama özelliğini düşünün. Siz anahtar kelimelerinizi yazarken o size onları tamamlamanıza yardım eder. Sayfa aynı kalırken anahtar kelimeler gerçek zamanlı olarak değişir. 90’ların başlarında, internet şimdiki kadar gelişmediği zamanlarda aynı özellik Google’ın ekranınızda her yeni bir öneri çıktığında sayfanızı yeniden başlatmasını gerektirirdi. AJAX veri değişimi ve sunuş katmanının birbirlerinin fonksiyonlarına karışmadan aynı anda çalışmalarına olanak sağlar.

AJAX Nedir Örneği: Google Otomatik Tamamlama
Google Otomatik Tamamlama

AJAX konsepti 90’ların ortalarından beri var olan bir konsepttir. Ancak, Google bu konsepti 2004’de Google Mail ve Google Maps’de kullanmaya başladığından beri daha geniş bir şekilde tanınmaya başladı. Bugünlerde çeşitli web uygulamalarında sunucu iletişim işlemini düzene koymak için yaygın bir biçimde kullanılmaktadır.

İşte AJAX’ın günlük hayatlarımızda kullanıldığını gördüğümüz kullanışlı daha fazla örnek:

  • Oylama ve puanlama sistemi
    Hiç online olarak aldığınız bir ürün için puan verdiniz mi? Hiç online bir oylama formu doldurdunuz mu? Her türlü, iki işlem de AJAX kullanır. Puanlama veya oylama tuşuna tıkladığınızda, web site hesaplamayı güncelleyecek ancak bütün sayfa değişmemiş kalacaktır.
  • Sohbet odaları
    Bazı web siteleri ana sayfalarında müşteri desteği memurlarından birine konuşabileceğiniz, yerleşik bir sohbet odası kullanır. Eğer aynı anda sayfada dolaşmak istiyorsanız endişelenmenize gerek yoktur. AJAX, her mesaj attığınızda ve aldığınızda sayfanızı yenilemeyecektir.
  • Twitter’ın gündem bildirimi
    Twitter yakın zamanda güncellemeleri için AJAX kullandı. Belirli gündem konuları hakkında her yeni tweet atıldığında, Twitter ana sayfayı etkilemeden yeni rakamları güncelleyecektir.

Basitçe, AJAX aynı anda çok görev yapmayı kolaylaştırır. Eğer iki işlemin eşzamanlı olarak çalıştığı benzer bir duruma rastlarsanız – biri çalışır durumda, diğeri ise boştayken, bu AJAX’ın işi olabilir.

AJAX Nasıl Çalışır?

AJAX’ın ne tek bir teknoloji, ne de bir program dili olmadığını unutmayın. Daha önce de belirttiğimiz gibi, AJAX bir takım web geliştirme tekniğidir. Sistem genellikle aşağıdakileri içerir:

  • Ana dil için HTML/XHTML ve sunum için CSS.
  • Dinamik görüntü verisi ve etkileşimi için Document Object Model – Döküman Nesne Modeli (DOM).
  • Veri değişimi için XML ve manipülasyonu için ise XSLT. Birçok geliştirici JSON kullanmaya başladı çünkü şeklen JavaScript’e daha yakın.
  • Eşzamansız iletişim için  XMLHttpRequest objesi.
  • Son olarak, bütün bu teknolojileri bir araya getirmek için JavaScript.

Tam olarak anlamak için biraz teknik bilgiye ihtiyacınız olabilir. Ancak, AJAX’ın nasıl çalıştığına dair genel prosedür oldukça basittir. Daha da ileri karşılaştırma için aşağıdaki diyagrama ve tabloya göz atın.

Diyagram:

Ajax'ın nasıl çalıştığına dair diyagram.

Karşılaştırma tablosu:

Klasik modelAJAX modeli
1. Web tarayıcıdan sunucuya bir HTTP isteği yollanır.

 

2. Sunucu isteği alır ve sonradan veriye erişir.

3. Sunucu istenilen veriyi web tarayıcısına yollar.

4. Web tarayıcısı veriyi alır ve veriyi göstermek için sayfayı yeniler.

Bu süreçte, kullanıcıların tüm işlem bitene kadar beklemekten başka yapabilecekleri bir şey yoktur. Sadece zaman tüketici değil, ayrıca sunucuya gereksiz bir yüke de neden olur.

1. Tarayıcı bir JavaScript çağrısı yaratır, bu çağrı da daha sonra XMLHttpRequest’i aktif eder.

 

2. Arkaplanda, web tarayıcısı sunucu için bir HTTP isteği yaratır.

3. Sunucu veriyi alır, erişir ve web tarayıcısına geri yollar.

4. Web tarayıcısı istenilen veriyi alır, veri ise sayfada direkt olarak gözükür. Sayfayı yenilemek gerekmez.

Sonuç

Tanımı bir kenara bırakırsak, AJAX’ı kullanmanın en iyi kısmı kullanıcı deneyimini kolaylaştırmasıdır. Ziyaretçileriniz içeriğinize erişmek için uzun süreler beklemek zorunda kalmazlar. Ancak, bu sizin neye ihtiyacınız olduğuna da bağlıdır. Örneğin, Google, Google Mail kullanırken, kullanıcılarına AJAX ve klasik versiyon arasında seçmelerine izin verir. Kullanıcıların ihtiyaçlarını listenizin en üstüne koyun ve AJAX’ı bu doğrultuda kullanın.

Umuyoruz ki bu makalede AJAX nedir sorusunu cevaplayabilmişizdir. Düşüncelerinizi ve yorumlarınızı aşağıdaki yorumlar kısmında bizimle paylaşabilirsiniz!

Author
Yazar

Gökhan O.

Gökhan Hostinger’da YouTube Takım Lideri olarak çalışmakta. WordPress hakkındaki tecrübe ve bilgisini bu blogda paylaşıyor. Hostinger’ın adını YouTube içeriği üzerinden duyurmayı kendine görev edinmiştir. Hobileri arasında oyun oynamak ve futbol maçları izlemek vardır.