- Konu sahibi
- #1
Ajax, JavaScript’in sayfanın tamamını yeniden yüklemeden sunucuyla veri alışverişi yapmasını sağlayan yaklaşımdır. Açılımı “Asynchronous JavaScript and XML” olsa da günümüzde XML kullanmak zorunlu değildir; uygulamalar çoğunlukla
Tarayıcıdaki JavaScript bir HTTP isteği başlatır. Sunucu isteği işler ve genellikle JSON biçiminde yanıt döndürür. JavaScript bu yanıtı aldıktan sonra DOM üzerinde yalnızca gerekli bölümü değiştirir. Kullanıcı bu sırada başka işlemler yapabilir; sayfa tamamen yenilenmediği için mevcut arayüz ve durum korunur.
Ajax ayrı bir programlama dili veya özel bir sunucu teknolojisi değildir. İstek göndermek için eski kodlarda
Aşağıdaki örnekte tarayıcı, aynı uygulamadaki
Sunucunun başarılı durumda en az şu yapıda JSON döndürmesi beklenir:
Burada
Ajax uygulamasında seçim çoğunlukla kodun yaşı ve isteğin gereksinimine göre yapılır:
Sunucu başka bir alan adında bulunuyorsa tarayıcı CORS kurallarını uygular. İstemciye rastgele bir başlık eklemek bu kuralı aşmaz; sunucunun uygun CORS yanıt başlıklarını vermesi gerekir. Aynı kaynakta çalışan istemci ve API kullanmak, başlangıçta gereksiz CORS sorunlarını azaltır.
Ajax kullanan bir arayüz tasarlarken önce API’nin isteği, yanıt biçimini ve hata durumlarını netleştirin. Ardından istemcide yükleniyor, başarılı ve başarısız durumları ayrı ele alın. İhtiyaç yalnızca yeni sayfa açmaksa normal bağlantı veya form gönderimi daha basit olabilir; sayfanın bir bölümünü yenilemek yeterliyse Ajax uygun çözümdür.
Hayır. Ajax çoğunlukla istemcinin başlattığı bağımsız HTTP isteklerinden oluşur. WebSocket ise bağlantıyı açık tutarak istemci ve sunucunun iki yönlü, sürekli iletişim kurmasına uygundur.
Hayır. Kimlik doğrulama, yetkilendirme, veri doğrulama ve akışın gerektirdiği CSRF koruması sunucuda yine uygulanmalıdır. CORS ise tarayıcının sunucunun bildirdiği politikaya göre uyguladığı ayrı bir okuma kısıtıdır; API yetkilendirmesinin yerine geçmez. Ajax yalnızca verinin sayfa yenilenmeden taşınma biçimini değiştirir.
fetch() ile JSON gönderip alır. Örneğin bir form gönderildiğinde yalnızca sonuç alanının güncellenmesi, Ajax kullanımına tipik bir örnektir.Ajax nasıl çalışır?
Tarayıcıdaki JavaScript bir HTTP isteği başlatır. Sunucu isteği işler ve genellikle JSON biçiminde yanıt döndürür. JavaScript bu yanıtı aldıktan sonra DOM üzerinde yalnızca gerekli bölümü değiştirir. Kullanıcı bu sırada başka işlemler yapabilir; sayfa tamamen yenilenmediği için mevcut arayüz ve durum korunur.
Ajax ayrı bir programlama dili veya özel bir sunucu teknolojisi değildir. İstek göndermek için eski kodlarda
XMLHttpRequest, güncel kodlarda ise çoğunlukla fetch() kullanılır. İstek yine HTTP kurallarına, sunucunun yanıtına ve tarayıcının aynı kaynak politikasına tabidir.| Yöntem | Uygun kullanım | Dikkat edilmesi gereken |
|---|---|---|
fetch() | Yeni uygulamalarda JSON ve standart HTTP istekleri | HTTP hatalarını response.ok ile ayrıca kontrol edin |
XMLHttpRequest | Eski kod tabanları veya ayrıntılı ilerleme olayları | Olay tabanlı ve daha ayrıntılı bir kullanım gerektirir |
| Form gönderimi | Basit veri gönderme ve normal sayfa akışı | Ajax yoksa sayfa genellikle yeniden yüklenir |
Somut örnek: Sunucudan mesaj alma
Aşağıdaki örnekte tarayıcı, aynı uygulamadaki
/api/message adresine GET isteği gönderir ve dönen JSON içindeki mesajı sayfaya yazar. İstemci kodunun çalışması için sunucunun bu adrese JSON yanıtı vermesi gerekir.
HTML:
<button id="load">Mesajı getir</button>
<p id="result">Henüz istek yapılmadı.</p>
<script>
const button = document.querySelector('#load');
const result = document.querySelector('#result');
button.addEventListener('click', async () => {
result.textContent = 'Yükleniyor...';
try {
const response = await fetch('/api/message');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
if (typeof data.message !== 'string') {
throw new Error('Beklenen message alanı bulunamadı');
}
result.textContent = data.message;
} catch (error) {
result.textContent = 'İstek başarısız oldu.';
console.error(error);
}
});
</script>Sunucunun başarılı durumda en az şu yapıda JSON döndürmesi beklenir:
Kod:
{"message":"Sunucudan gelen mesaj"}- HTML dosyasını,
/api/messageyolunu sağlayan bir web sunucusundan yayınlayın. Dosyayı doğrudanfile://ile açmak yerine bir geliştirme sunucusu kullanın. - Butona basın. Başarılı durumda paragrafın içeriği sunucunun gönderdiği mesajla değişir.
- “İstek başarısız oldu.” görünürse tarayıcının geliştirici araçlarındaki Network sekmesinden adresi, HTTP durum kodunu ve yanıtı kontrol edin.
- Yanıt JSON değilse veya
messagealanı yoksa sunucu yanıtını istemcinin beklediği biçime getirin.
Burada
response.ok yalnızca HTTP durumunun başarılı aralıkta olup olmadığını kontrol eder; sunucunun döndürdüğü iş verisinin doğru olduğunu garanti etmez. Ayrıca fetch() ağ hatalarında reddedilebilir, ancak 404 veya 500 gibi HTTP yanıtlarında kendiliğinden hata fırlatmaz. Bu nedenle response.ok kontrolü önemlidir.Hangi yöntemi ne zaman kullanmalı?
Ajax uygulamasında seçim çoğunlukla kodun yaşı ve isteğin gereksinimine göre yapılır:
Sunucu başka bir alan adında bulunuyorsa tarayıcı CORS kurallarını uygular. İstemciye rastgele bir başlık eklemek bu kuralı aşmaz; sunucunun uygun CORS yanıt başlıklarını vermesi gerekir. Aynı kaynakta çalışan istemci ve API kullanmak, başlangıçta gereksiz CORS sorunlarını azaltır.
Sık yapılan hatalar
- İsteğin tamamlanmasını beklemeden yanıtı kullanmak:
fetch()bir Promise döndürür;awaitveya.then()kullanılmalıdır. - Sadece ağ hatasını ele almak: 404 ve 500 yanıtlarını da
response.okile kontrol edin. - Her yanıtı JSON sanmak: Sunucu HTML, boş gövde veya farklı bir içerik döndürebilir. Yanıt biçimini API sözleşmesiyle eşleştirin.
- Yüklenme ve hata durumlarını göstermemek: Kullanıcıya isteğin devam ettiğini ve başarısız olduğunu açıkça bildirin.
- Güvenilmeyen yanıtı doğrudan
innerHTMLiçine koymak: Metin gösterirkentextContentkullanmak, gereksiz HTML yorumlamasını önler.
Ajax kullanan bir arayüz tasarlarken önce API’nin isteği, yanıt biçimini ve hata durumlarını netleştirin. Ardından istemcide yükleniyor, başarılı ve başarısız durumları ayrı ele alın. İhtiyaç yalnızca yeni sayfa açmaksa normal bağlantı veya form gönderimi daha basit olabilir; sayfanın bir bölümünü yenilemek yeterliyse Ajax uygun çözümdür.
Sık sorulan sorular
Ajax ile WebSocket aynı şey midir?
Hayır. Ajax çoğunlukla istemcinin başlattığı bağımsız HTTP isteklerinden oluşur. WebSocket ise bağlantıyı açık tutarak istemci ve sunucunun iki yönlü, sürekli iletişim kurmasına uygundur.
Ajax kullanınca güvenlik kontrolleri ortadan kalkar mı?
Hayır. Kimlik doğrulama, yetkilendirme, veri doğrulama ve akışın gerektirdiği CSRF koruması sunucuda yine uygulanmalıdır. CORS ise tarayıcının sunucunun bildirdiği politikaya göre uyguladığı ayrı bir okuma kısıtıdır; API yetkilendirmesinin yerine geçmez. Ajax yalnızca verinin sayfa yenilenmeden taşınma biçimini değiştirir.
