AJAX bir sayfa üzerinde, sayfa yenilenmeden dinamik bir şekilde veri yükleme ve göndermeyi sağlayan bir teknolojidir. Web geliştirmesine ilginiz varsa, web dünyasının alt yapısı hakkında ilgi duyuyorsanız doğru bir başlığa geldiniz. Yazımızda AJAX ne amaçla kullanılmakta, ne işe yaramakta ve de tarihsel gelişimi nasıl gerçekleşmiş sizlere aktaracağız.
İçindekiler
AJAX Nasıl Ortaya Çıktı?
2005 yılına kadar adını bile duymadığımız AJAX teknolojisinin tarihi birkaç sene daha öncesine, 2000’lerin başlarında başlamaktadır.
Google: Gmail ve Google Maps
Bulunduğumuz yıl da tam da Google’ın Gmail’i halka açtığı yıl. Gmail 1GB depolama alanı ve etkili arama özellikleriyle rakiplerinin önüne geçmişti bile. Hatta ilk başta kullanmanın yolu davet almaktı, böylece daha özel bir his uyandırıyordu. Etkili arama özelliği sayesinde siz arama çubuğuna kelimeleri yazmaya başladığınız an sonuçlar otomatik tamamlanıyor ya da öneriler çıkmaya başlıyordu. Hızlı ve etkin bir sohbet deneyimi, bir sayfaya tıklandığında çok hızlı bir şekilde yüklenmesi ve daha fazlası Gmail’i eşsiz bir hale getiriyordu. Bunların hepsinin tarayıcısı üzerinde gerçekleşmesi şaşırtıcıydı. O zamanlar masaüstü uygulamaları zirvedeydi ve internetin böyle bir altyapıya sahip olunmadığı düşünülüyordu. Gmail ise aynı bir masaüstü uygulaması gibi tarayıcıda çalışıyordu.
2004 yılında Google’ın satın aldığı Where2 Teknolojileri şirketiyle birlikte yeni bir projeyi de bünyelerine dahil etmişlerdi. Bu proje bir harita uygulamasıydı ve kullanıcı sadece fareyi kaydırarak harita üzerinde gezinebilmekteydi. Bu uygulama masaüstü olarak geliştirilmişti. Google’ın kurucu ortağı olan Larry Page ise web’in büyük bir hayranı olarak uygulamanın web sitesi olmasını istedi.
Şubat 2005’te Google Haritalar beta sürümüyle sunucuya çıkmıştı. Evet bahsettiğimiz meşhur Google Haritalar uygulamasının ta kendisi.
Önce Gmail, ardından Google haritalar kullanıcıya sunulduğunda, kullanıcıların karşılaştıkları performans etkileyiciydi. Arayüzleri dinamik ve en son teknolojiye sahipti. Web için başka bir geleceğin sinyalleri çalmaya başlamıştı. İkisinin de alt yapısında Javascript vardı. Amaçları sunucuya eşzamansız olarak bağlanmak ve yeni bir sayfa yüklemeden verileri indirmekti.
Microsoft: Outlook
Eş zamanlı olarak bir başka teknoloji devinde farklı rüzgarlar esmekteydi. Microsoft, Internet Explorer başta olmak üzere Windows işletim sisteminde Java Sanal Makine uygulamasını çalıştırmak amaçlı eklentiyi eklemişti. Fakat bu gerçekleşir gerçekleşmez, Sun (Java’nın yaratıcıısı) Microsoft Java standartlarına tam olarak uymadığı için dava açmıştı. O sıralar başka bir dava ile uğraştığından ötürü Microsoft uğraşmaya girmeden Java’yı işletim sisteminden kaldırmıştı.
Fakat bir problem vardı. Outlook e-posta web uygulamalarının çalışması konusunda Java kullanmışlardı ve şimdi bu boşluğu doldurmaları gerekliydi. Bu konuda çözümü Javascript’de bulacaklardı elbette. Yeni bir Javascript eklentisi yazan ekip, bu eklentiye XMLHttpRequest adını verdiler. Bu eklenti tarayıcı sunucuya bir HTTP isteğinde bulunduğunda arka planda bazı verileri XML’de geri almayı sağlıyordu. Bir başka deyişle sayfa yüklenmeden veriler yenilebilir hale gelmişti. Outlook bu sayede kusursuz bir şekilde çalışıyordu.
Sadece Outlook için düşünülse de bunu gören diğer tarayıcılar “biz de isteriz” düşüncesiyle kendi eklentilerini yapmaya koyuldular. Kısa süre içinde birçok yerde örnekleri görülmeye başlandı.
Gmail ve Google Haritalar bu eklentiyi çoktan bulmuş ve hayata geçirmişlerdi bile.
Hem Google hem de Microsoft ekibi sadece Javascript’e güvenmeyi riskli bulsalar da, sonunda başarmışlardı. Kullanıcılar bu gelişmeden fazlasıyla mutluydu. Web kendine yeni bir çağ açmıştı.
AJAX: AJAX’ın ismine kavuşması
Yeni bir çağın başlangıcı olan bu eklentiye sonunda isim verilmeye karar verilmişti. Jesse James Garett, Asenkron Javascript ve XML gibi fazlasıyla akılda kalıcı bir isim için AJAX kısaltmasını uygun gördü. İlkeler bütünü olarak çevireceğimiz AJAX ne bir programlama diliydi ne de bir teknoloji. Bazı adımlardan oluşan ve de Javascript’in nasıl kullanılacağı aktaran bir bütündü sadece.
Zaman içinde kavramlar birbirlerinin yerini almış olsa da AJAX web’in yalnızca belgelerden ibaret olmadığını göstermiş oldu. Uygulamalar da bu şekilde web dünyasına girişini yapmış oldu.
AJAX Nedir?
AJAX’ın nasıl ortaya çıktığından bahsederken, ne olduğunu da örneklerle görmüş olduk bir nevi. AJAX sayfa yüklenmeden verinin sunucuya gönderilmesi, alınmasını sağlayan bir teknolojidir, sistemdir.
Önyüz için HTML, CSS kullanan, veri değişimini XML/ JSON yapısıyla sağlayan, eşzamansız iletişim için XMLHttpRequest kullanmakta olan ve bunları birleştirmek için Javascript'e ihtiyaç duyan bir sistemdir.
Adımları tek tek alırsak:
Tarayıcı üzerinde bir Javascript çağrısı yaratılır.
Bu çağrı XMLHttpRequest ile etkileşime girer.
Bunun ardından arka planda sunucuya bir HTTP isteği gönderilir.
Sunucu isteği alır, veriyi işleyerek geri gönderir.
Web tarayıcısı veriyi alır ve bu sayfada gözükür. Sayfa yenilenmez.
AJAX sayesinde web sayfaları seri bir şekilde güncellenir. Bu da beraberinde hızı getirir. Bu sayede daha iyi bir performans hizmeti kullanıcıya sağlanmış olur. Sunucuyla iletişim kurmak için Javascript kullanıldığından sunucu taraflı işlem azaltılmış olur. AJAX, tarayıcılar tarafından desteklenmektedir.
AJAX Ne İşe Yarar?
Üyelik formu doldururken, üyeliğinizin onaylandığını görmek adına sayfayı yenilemeye ihtiyaç duymamanız aslında AJAX’ın ne işe yaradığını özetlemektedir.
Google’da bir arama yaptığınızda sizi tamamlaması, önerilerde bulunması gibi gün içinde sıkça gerçekleştirdiğimiz eylemlerin mimarıdır. Eğer AJAX olmasaydı her harfin ardından sayfa yenilecek ve önerilenleri görecektik. Sadece bir saniye internet kopukluğu yaşadığımızda dayanamıyoruz, AJAX iyi ki var demeliyiz. 🙂
AJAX ve SPA
SPA ya da Single Page Application, web uygulamasının tarayıcı üzerinde tek sayfa şeklinde çalıştığı web uygulamalarıdır. Tek Sayfa Uygulamaları olarak çevirebiliriz. SPA’nın büyük avantajı hızlı olmasıdır. Gerekli kaynaklar bir kez yüklendikten sonra, yeniden yüklenmeye ihtiyaç duymaz. Kaynaklardan kasıt HTML, CSS gibi web sayfasının görüntüsünü oluşturan yapılardır.
Gmail, Google Maps, Google Drive, Netflix, Twitter, Linkedin, Pinterest, Jira gibi birçok örneğini görebiliriz. Bu uygulamaların ortak yanı gerçek zamanlı güncelleme ile çalışmalarıdır. Bu nedenle SPA tercihi bu uygulamalarda daha iyi bir sonuç vermektedir.
SPA çalışma prensibini Javascript ve AJAX teknolojisi sayesinde edinmiştir. AJAX sayesinde sayfa yenilenmeden tarayıcı, sunucu ile iletişim halinde kalabilmektedir. SPA da tek sayfa çalışma prensibi ile bu iletişime ihtiyaç duyar.
Bunu bir örnek vermek gerekirse bir üyelik formu doldurduğunuzu varsayalım. Üye ol butonunu seçmemizin ardından bize üyeliğimizin onaylandığına dair bir geri dönüt sunulmaktadır. Bu geri dönüt sayfa yenilenmeden, çok hızlı bir şekilde gerçekleştirmiştir. Arka planda AJAX kullanımı bunu sağlamıştır. Eğer AJAX kullanılmasaydı ya sayfa yeniden yüklenecek ya da başka bir sayfaya yönlendirilerek geri dönüt mesajını görecektik. Bu konuda SPA, AJAX sayesinde veriyi kontrol edebilmektedir.
AJAX Nerelerde Kullanılır?
Form Doğrulama
Sıralama/ Listeleme veya Filtreleme
Aramaların otomatik tamamlaması, öneriler almak
Arama sonuçlarını anında görüntüleyebilmek
Değerlendirme yapabilmek / Oy Verebilmek (yemek sepeti gibi)
Sohbet Siteleri (gerçek zamanlı konuşma)
İçeriğimiz içinde AJAX teknolojisini ele aldık, ya da artık kurallar bütünü diyebiliriz. Tarihçesinden, kullanılma alanlarından bahsettiğimiz yazımızla ilgili görüşlerinizi bizimle paylaşmayı unutmayın!
