Ajax Veri İstekleri ve Yanıtları Eğitimi

Eğitim Hakkında

fetch/XHR, JSON, async/await ve hata yönetimi

Bu orta seviye eğitim, web uygulamalarında sayfayı yeniden yüklemeden veri alıp göndermenin temeli olan Ajax'ı uygulamalı öğretir. XMLHttpRequest ve modern fetch API, HTTP metotları (GET/POST/PUT/DELETE), istek başlıkları ve gövdesi, JSON serileştirme işlenir. Ardından Promise ve async/await ile asenkron akış, yanıt durum kodları ve hata yönetimi, CORS, istek iptali (AbortController), yükleme göstergesi, debounce ile istek yönetimi ve DOM güncelleme ele alınır. Katılımcı, bir API'den veri çekip kullanıcı arayüzünü dinamik güncelleyen akışlar yazabilir.

Süre ve Format

2 Gün. Her gün dört modül; katılımcılar temel istekten hata yönetimi ve dinamik arayüze ilerler.

Seviye

Orta Seviye — Tarayıcıda Ajax ile asenkron veri alışverişi, fetch/XHR, JSON işleme ve hata yönetiminin ele alınması.

Öğrenme Metodu

Katılımcılar gerçek API'lere karşı fetch/XHR istekleri yazıp yanıtları işleyip arayüzü güncelleyerek öğrenir.

Neden Bu Eğitim?

🔄Asenkron

Sayfayı dondurmadan arka planda veri alışverişi yaparsınız.

📦JSON İşleme

API yanıtlarını JSON olarak işleyip arayüze yansıtırsınız.

🛡️Hata Yönetimi

Durum kodları ve hataları sağlam biçimde ele alırsınız.

Anahtar Konular

ajax eğitimifetch apixmlhttprequestasync awaitjsoncorshttp istekabortcontrollerasenkron javascriptapi tüketme

“Modern web, sayfayı yenilemeden konuşan arayüzler üzerine kuruludur.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam gereksinimleri

1

JavaScript

Temel JavaScript (fonksiyon, DOM) bilgisi beklenir.

2

Web Temeli

HTML/DOM ve HTTP kavramlarına aşinalık faydalıdır.

3

JSON

JSON yapısına aşinalık yararlıdır.

4

Çalışma Ortamı

Bir tarayıcı, metin editörü ve test edilebilir bir API/erişim.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı, fetch ve XHR ile asenkron istek atıp JSON yanıt işleyebilir.

Modül 1

Ajax Kavramı

Senkron ve asenkron fark
Sayfa yenilemeden veri alışverişi
İstek-yanıt döngüsü
Tarayıcı ve sunucu rolü
HTTP metotları özeti
Ajax kullanım senaryoları

Modül 2

XMLHttpRequest

XHR nesnesi ve open/send
readyState ve durum
onload/onerror olayları
Yanıtın okunması
XHR'ın sınırları
fetch'e neden geçildiği

Modül 3

fetch API

fetch ile GET isteği
Response nesnesi ve .json()
POST ve istek gövdesi (body)
Başlıklar (headers) ve content-type
PUT/DELETE metotları
fetch'in Promise döndürmesi

Modül 4

JSON İşleme

JSON.parse ve JSON.stringify
Nesne ve dizi gezinme
İç içe veriye erişim
Veriyi DOM'a yansıtma
Liste render etme
Tip ve null kontrolü

Günün hedefiKatılımcı, async/await ile akış kurar ve hataları/kullanıcı deneyimini yönetebilir.

Modül 1

Promise ve async/await

Promise zinciri (.then/.catch)
async/await söz dizimi
Hata yakalama (try/catch)
Ardışık ve paralel istek (Promise.all)
Callback hell'den kaçınma
Asenkron akış tasarımı

Modül 2

Durum ve Hata Yönetimi

HTTP durum kodları (2xx/4xx/5xx)
response.ok kontrolü
Ağ hatası vs sunucu hatası
Kullanıcıya hata gösterme
Yeniden deneme (retry)
Zaman aşımı yönetimi

Modül 3

CORS ve Güvenlik

CORS mekanizması
Preflight istekleri
Kimlik doğrulama başlıkları (token)
credentials ve cookie
Hassas veriyi koruma
Yaygın CORS hataları

Modül 4

UX ve İstek Yönetimi

Yükleme göstergesi (spinner)
AbortController ile istek iptali
Debounce ile arama isteği
Boş ve hata durumları
İyimser (optimistic) güncelleme
Dinamik arayüz güncelleme

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Ajax Kavramı

Asenkron istek-yanıt döngüsünü açıklarsınız.

✅

fetch

fetch ile GET/POST/PUT/DELETE istekleri atarsınız.

✅

JSON

JSON yanıtları işleyip arayüze render edersiniz.

✅

async/await

Promise ve async/await ile akış tasarlarsınız.

✅

Hata Yönetimi

Durum kodları ve hataları sağlam ele alırsınız.

✅

CORS

CORS ve kimlik doğrulama başlıklarını yönetirsiniz.

✅

İstek Yönetimi

AbortController ve debounce ile istekleri yönetirsiniz.

✅

Dinamik Arayüz

Veriyle DOM'u dinamik ve akıcı güncellersiniz.

Kimler İçin Uygundur?

Frontend geliştiricileri
web'e yeni geçen yazılımcılar
API tüketen arayüzler yazanlar
asenkron veri akışını öğrenmek isteyenler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Frontend geliştiricileri, web'e yeni geçen yazılımcılar ve API tüketen arayüzler yazanlar için uygundur.

JavaScript bilmem gerekir mi?

Temel JavaScript (fonksiyon ve DOM) bilgisi beklenir; asenkron akış ve fetch eğitimde adım adım işlenir.

XHR hâlâ gerekli mi?

Modern kodda fetch tercih edilir ama XHR mevcut kodlarda ve ilerleme olayları gibi senaryolarda görülür; eğitim ikisini de ele alır.

CORS hatalarını nasıl çözerim?

Eğitim CORS mekanizmasını, preflight isteklerini ve sunucu tarafı yapılandırma gerekliliğini açıklayarak yaygın hataların kaynağını gösterir.

Eğitim sonunda sertifika veriliyor mu?

Katılım ve değerlendirme sonrası Digital Vizyon Akademi Katılım ve Başarı Sertifikası verilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

AJAX DATA REQUESTS & RESPONSES EĞİTİMİ