AJAX
Asenkron JavaScript ve XML
- Okunuşu
- eyceks
Kısaca
AJAX (Asynchronous JavaScript and XML), JavaScript ile sunucudan arka planda veri alıp sayfayı yeniden yüklemeden yalnızca bir kısmını güncelleme tekniğidir.
AJAX nedir?
İlk web sayfaları yeni veriye ihtiyaç duyduklarında baştan sona yeniden yüklenmek zorundaydı: formu gönder, bekle, yepyeni bir sayfa al. AJAX bunu değiştirdi. JavaScript arka planda bir istek gönderir, kullanıcı çalışmaya devam eder; yanıt geldiğinde betik, arama önerileri listesi ya da gelen kutusundaki yeni mesajlar gibi sayfanın yalnızca değişen kısmını günceller.
Bu ad 2005'te Jesse James Garrett tarafından, Gmail ve Google Maps gibi uygulamaların nasıl masaüstü yazılımı gibi hissettirdiğini anlatmak için bulundu. Altta yatan tarayıcı özelliği olan XMLHttpRequest birkaç yıl önce ortaya çıkmıştı. Addaki X'e rağmen bugünkü AJAX istekleri neredeyse her zaman XML değil JSON taşır.
Modern kod XMLHttpRequest yerine Fetch API'yi kullanır: fetch(url) bir promise döndürür; bu da async ve await ile doğal olarak uyuşur. Kütüphaneler ve framework'ler bunun üzerine kurulur; tek sayfalı uygulamalar da aslında baştan sona AJAX'tır: sayfa bir kez yüklenir, sonra geri kalan her şey için bir API ile konuşur.
Sık yapılan bir yanlış, AJAX'ın bir kütüphane ya da ayrı bir teknoloji olduğunu düşünmektir. Standart parçalardan kurulmuş bir kalıptır: JavaScript, arka planda yapılan bir HTTP isteği ve DOM güncellemeleri. Başka bir alan adına yapılan istekler yine tarayıcının aynı köken (same-origin) kurallarına uyar; bu yüzden sunucunun bunlara CORS ile izin vermesi gerekir.
Önemli noktalar
- AJAX veriyi arka planda yükler ve sayfanın bir kısmını günceller.
- Terim 2005'ten gelir; XMLHttpRequest daha önce vardı.
- Bugünkü istekler genellikle XML değil JSON taşır.
- Modern kod promise'ler ve async/await ile Fetch API'yi kullanır.
- Başka kökene giden AJAX istekleri için sunucunun CORS ile izin vermesi gerekir.
Örnek
const input = document.querySelector("#search");
const list = document.querySelector("#suggestions");
input.addEventListener("input", async () => {
const response = await fetch(`/api/suggest?q=${encodeURIComponent(input.value)}`);
const suggestions = await response.json(); // JSON, not XML
// Update just this part of the page
list.replaceChildren(
...suggestions.map((text) => Object.assign(document.createElement("li"), { textContent: text })),
);
});Sık sorulan sorular
AJAX hâlâ kullanılıyor mu?
Teknik her yerde, ama ad daha az kullanılıyor. Veriyi fetch ile yükleyip yenilenmeden kendini güncelleyen her sayfa AJAX yapıyor demektir.
AJAX ile fetch arasındaki fark nedir?
AJAX genel tekniktir. Fetch API ise arka plandaki isteği yapmaya yarayan, eski XMLHttpRequest nesnesinin yerini alan modern tarayıcı fonksiyonudur.
AJAX'ın XML kullanması gerekir mi?
Hayır. Ad bulunduğunda XML yaygındı, ama bugün AJAX isteklerinin neredeyse hepsi JSON gönderip alır; düz metin ve HTML dahil her biçimi taşıyabilirler.
İlgili sayfalar
- JavaScriptWeb Geliştirme, s. 25JavaScript, web tarayıcılarında sayfaları etkileşimli hale getiren ve Node.js gibi çalışma ortamlarıyla sunucularda da çalışan programlama dilidir.
- JSONBackend ve API'ler, s. 24JSON, yapılandırılmış veriyi anahtar-değer çiftleri ve listelerle saklayıp aktarmaya yarayan, insanın da makinenin de okuyabildiği hafif bir metin biçimidir.
- APIBackend ve API'ler, s. 2API, bir yazılımın başka bir yazılımdan veri ya da işlem talep etmesini sağlayan, belgelenmiş ve öngörülebilir kurallar bütünüdür.
- PromiseProgramlamanın Temelleri, s. 46Promise, asenkron bir işlemin nihai sonucunu temsil eden bir nesnedir; iş bittiğinde kodun başarıya ya da hataya tepki vermesini sağlar.
- CORSWeb Geliştirme, s. 9CORS, bir sunucunun JavaScript'ten istek yapan hangi diğer sitelerin yanıtlarını okuyabileceğini bildirmesini sağlayan tarayıcı güvenlik mekanizmasıdır.
- SPAWeb Geliştirme, s. 42SPA, tek bir HTML sayfası yükleyip içeriği JavaScript ile güncelleyen ve görünümler arası geçişte sayfayı yeniden yüklemeyen web uygulamasıdır.
- jQueryWeb Geliştirme, s. 26jQuery, öğe seçmeyi, olay yönetimini, animasyonu ve AJAX isteklerini tüm tarayıcılarda çalışan kısa bir sözdizimiyle kolaylaştıran JavaScript kütüphanesidir.
Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin