JavaScript XMLHttpRequest (XHR) Rehberi: API İstekleri ve Tarihi

Şimdiye kadar API'lerin ne olduğunu, HTTP isteklerinin nasıl çalıştığını ve Hoppscotch gibi araçlarla nasıl test edileceğini öğrendik. Şimdi sıra geldi JavaScript ile istek yapmaya.

Bu makalede JavaScript'in orijinal istek yapma yöntemi olan XMLHttpRequest (XHR) ile tanışacağız. Spoiler: Bu yöntem artık pek kullanılmıyor, ama nereden geldiğimizi anlamak için bilmek önemli.

XMLHttpRequest Nedir?

XMLHttpRequest, JavaScript'te HTTP isteği yapmak için kullanılan ilk ve en eski yöntemdir. 1999 yılında Microsoft tarafından geliştirildi ve tüm tarayıcılar tarafından desteklendi.

İsmi Neden XML?

O dönemde veri formatı olarak XML popülerdi. Bugün JSON kullanıyoruz ama isim değişmedi. Garip ama böyle.

Büyük/Küçük Harf Karmaşası

metin

XMLHttpRequest
^^^   ^
XML   H büyük, ttp küçük

"HTTP" normalde tamamen büyük harf yazılır ama burada sadece "H" büyük. Bu tutarsızlık herkesi rahatsız eder ama yapacak bir şey yok.

Neden Öğreniyoruz?

XHR artık günlük geliştirmede kullanılmıyor. Yerini Fetch API ve Axios aldı. Peki neden öğreniyoruz?

Tarihi bağlam - JavaScript'in evrimini anlamak
Eski kodlar - Legacy projelerde karşılaşabilirsiniz
Minnettarlık - Modern araçların ne kadar iyi olduğunu takdir etmek

Önemli: Bu sözdizimini ezberlemenize gerek yok. Sadece mantığı anlayın.

Temel Kullanım

Adım 1: XHR Nesnesi Oluşturma

javascript

const xhr = new XMLHttpRequest();

Adım 2: Event Listener'ları Tanımlama

javascript

xhr.onload = function() {
    // İstek başarılı olduğunda çalışır
    console.log("Başarılı!");
    console.log(this.responseText);
};

xhr.onerror = function() {
    // Hata olduğunda çalışır
    console.log("Hata oluştu!");
};

Adım 3: İsteği Açma

javascript

xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");

İlk parametre HTTP metodu, ikinci parametre URL.

Adım 4: İsteği Gönderme

javascript

xhr.send();

Tam Kod

javascript

// 1. XHR nesnesi oluştur
const xhr = new XMLHttpRequest();

// 2. Başarı durumunda ne yapılacak
xhr.onload = function() {
    console.log("Yanıt alındı:");
    console.log(this.responseText);
};

// 3. Hata durumunda ne yapılacak
xhr.onerror = function() {
    console.log("Bir hata oluştu!");
};

// 4. İsteği hazırla (GET metodu, URL)
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");

// 5. İsteği gönder
xhr.send();

Yanıtı İşleme

responseText bir string'dir. JSON olarak kullanmak için parse etmeliyiz:

javascript

const xhr = new XMLHttpRequest();

xhr.onload = function() {
    // responseText bir string
    console.log(typeof this.responseText);  // "string"

    // JSON.parse ile nesneye çevir
    const veri = JSON.parse(this.responseText);

    // Artık nesne olarak kullanabiliriz
    console.log(veri.title);
    console.log(veri.body);
};

xhr.onerror = function() {
    console.log("Hata!");
};

xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");
xhr.send();

Çıktı:

metin

sunt aut facere repellat provident occaecati excepturi optio reprehenderit
quia et suscipit...

Pratik Örnek: Kullanıcı Bilgisi Getirme

javascript

function kullaniciBilgisiGetir(id) {
    const xhr = new XMLHttpRequest();

    xhr.onload = function() {
        if (this.status === 200) {
            const kullanici = JSON.parse(this.responseText);
            console.log("İsim:", kullanici.name);
            console.log("Email:", kullanici.email);
            console.log("Şehir:", kullanici.address.city);
        } else {
            console.log("Hata kodu:", this.status);
        }
    };

    xhr.onerror = function() {
        console.log("Ağ hatası!");
    };

    xhr.open("GET", `https://jsonplaceholder.typicode.com/users/${id}`);
    xhr.send();
}

// Kullanım
kullaniciBilgisiGetir(1);

Çıktı:

metin

İsim: Leanne Graham
Email: Sincere@april.biz
Şehir: Gwenborough

Durum Kodunu Kontrol Etme

onload çağrıldı diye her şey yolunda demek değil. Durum kodunu kontrol etmeliyiz:

javascript

xhr.onload = function() {
    if (this.status >= 200 && this.status < 300) {
        // Başarılı (2xx)
        const veri = JSON.parse(this.responseText);
        console.log("Başarılı:", veri);
    } else if (this.status === 404) {
        console.log("Kaynak bulunamadı!");
    } else if (this.status === 500) {
        console.log("Sunucu hatası!");
    } else {
        console.log("Beklenmeyen durum:", this.status);
    }
};

XHR'nin Sorunları

Sorun 1: Callback Hell (Cehennem)

Birden fazla ardışık istek yapmak istediğinizde iç içe callback'ler oluşur:

javascript

// İlk istek: Kullanıcıyı getir
const xhr1 = new XMLHttpRequest();
xhr1.onload = function() {
    const kullanici = JSON.parse(this.responseText);
    console.log("Kullanıcı:", kullanici.name);

    // İkinci istek: Kullanıcının postlarını getir
    const xhr2 = new XMLHttpRequest();
    xhr2.onload = function() {
        const postlar = JSON.parse(this.responseText);
        console.log("Post sayısı:", postlar.length);

        // Üçüncü istek: İlk postun yorumlarını getir
        const xhr3 = new XMLHttpRequest();
        xhr3.onload = function() {
            const yorumlar = JSON.parse(this.responseText);
            console.log("Yorum sayısı:", yorumlar.length);

            // Dördüncü istek...
            // Daha da içeri...
            // Daha da içeri...
        };
        xhr3.open("GET", `https://jsonplaceholder.typicode.com/posts/${postlar[0].id}/comments`);
        xhr3.send();
    };
    xhr2.open("GET", `https://jsonplaceholder.typicode.com/users/${kullanici.id}/posts`);
    xhr2.send();
};
xhr1.open("GET", "https://jsonplaceholder.typicode.com/users/1");
xhr1.send();

Bu kod:

Okunması zor
Bakımı zor
Hata yönetimi karmaşık
Test edilmesi zor

Bu duruma "Callback Hell" veya "Pyramid of Doom" denir.

Sorun 2: Promise Desteği Yok

XHR, Promise döndürmez. Bu yüzden:

async/await kullanamayız
.then() zinciri yapamayız
Modern JavaScript patterns'lerini uygulayamayız

Sorun 3: Sözdizimi Karmaşık

Basit bir GET isteği için bile:

Nesne oluştur
Event listener'lar tanımla
open() çağır
send() çağır

4 ayrı adım, 10+ satır kod.

Sorun 4: Manuel JSON Parse

Her seferinde JSON.parse() çağırmak gerekiyor. Unutursanız string ile uğraşırsınız.

XHR ile POST İsteği

POST yaparken body göndermemiz gerekir:

javascript

const xhr = new XMLHttpRequest();

xhr.onload = function() {
    if (this.status === 201) {
        const yeniKayit = JSON.parse(this.responseText);
        console.log("Oluşturuldu! ID:", yeniKayit.id);
    }
};

xhr.onerror = function() {
    console.log("Hata!");
};

// POST isteği aç
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");

// Content-Type header'ı ekle
xhr.setRequestHeader("Content-Type", "application/json");

// Body'yi JSON string olarak gönder
const veri = {
    title: "Yeni Başlık",
    body: "Bu bir test içeriğidir.",
    userId: 1
};

xhr.send(JSON.stringify(veri));

Dikkat edin:

setRequestHeader() ile header ekliyoruz
JSON.stringify() ile nesneyi string'e çeviriyoruz
send() içine body'yi veriyoruz

XHR Özellikleri ve Metodları

Özellikler

Özellik	Açıklama
`responseText`	Yanıt gövdesi (string)
`status`	HTTP durum kodu (200, 404, vb.)
`statusText`	Durum mesajı ("OK", "Not Found", vb.)
`readyState`	İsteğin durumu (0-4 arası)

Metodlar

Metod	Açıklama
`open(method, url)`	İsteği hazırla
`send(body)`	İsteği gönder
`setRequestHeader(name, value)`	Header ekle
`abort()`	İsteği iptal et

Event'ler

Event	Ne Zaman Tetiklenir
`onload`	İstek tamamlandığında
`onerror`	Ağ hatası olduğunda
`onprogress`	İndirme ilerlerken
`onreadystatechange`	readyState değiştiğinde

readyState Değerleri

readyState isteğin hangi aşamada olduğunu gösterir:

Değer	Sabit	Anlam
0	UNSENT	İstek oluşturulmadı
1	OPENED	open() çağrıldı
2	HEADERS_RECEIVED	Header'lar alındı
3	LOADING	Yanıt yükleniyor
4	DONE	İşlem tamamlandı

javascript

xhr.onreadystatechange = function() {
    console.log("readyState:", this.readyState);

    if (this.readyState === 4) {
        if (this.status === 200) {
            console.log("Başarılı!");
        }
    }
};

Not: onload kullanmak daha pratik. onreadystatechange eski yöntem.

XHR vs Modern Yöntemler

Özellik	XHR	Fetch	Axios
Promise	❌	✅	✅
async/await	❌	✅	✅
Otomatik JSON	❌	❌	✅
Sözdizimi	Karmaşık	Orta	Basit
Tarayıcı desteği	Tüm tarayıcılar	Modern tarayıcılar	Kütüphane gerekli

Ne Zaman XHR Kullanılır?

Kullanın:

IE11 gibi çok eski tarayıcıları desteklemeniz gerekiyorsa
Yükleme progress'i takip etmeniz gerekiyorsa (Fetch'te sınırlı)
Legacy kod bakımı yapıyorsanız

Kullanmayın:

Yeni projeler
Modern tarayıcıları hedefliyorsanız
Promise tabanlı kod yazıyorsanız

Özet

Konu	Açıklama
XHR	JavaScript'te HTTP isteği yapmanın ilk yöntemi
Kullanım	`new XMLHttpRequest()` → `onload` → `open()` → `send()`
JSON Parse	`JSON.parse(this.responseText)`
Sorunları	Callback hell, Promise yok, karmaşık sözdizimi
Günümüzde	Fetch API ve Axios tercih ediliyor

Sırada Ne Var?

XHR'nin zorluklarını gördük. Şimdi modern ve çok daha kullanışlı bir yönteme geçiyoruz.

Bir sonraki makalede Fetch API ile tanışacağız - Promise tabanlı, temiz sözdizimli, modern JavaScript'in istek yapma yöntemi.

XMLHttpRequest (XHR)

XMLHttpRequest Nedir?

İsmi Neden XML?

Büyük/Küçük Harf Karmaşası

Neden Öğreniyoruz?

Temel Kullanım

Adım 1: XHR Nesnesi Oluşturma

Adım 2: Event Listener'ları Tanımlama

Adım 3: İsteği Açma

Adım 4: İsteği Gönderme

Tam Kod

Yanıtı İşleme

Pratik Örnek: Kullanıcı Bilgisi Getirme

Durum Kodunu Kontrol Etme

XHR'nin Sorunları

Sorun 1: Callback Hell (Cehennem)

Sorun 2: Promise Desteği Yok

Sorun 3: Sözdizimi Karmaşık

Sorun 4: Manuel JSON Parse

XHR ile POST İsteği

XHR Özellikleri ve Metodları

Özellikler

Metodlar

Event'ler

readyState Değerleri

XHR vs Modern Yöntemler

Ne Zaman XHR Kullanılır?

Kullanın:

Kullanmayın:

Özet

Sırada Ne Var?

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword

XMLHttpRequest Nedir?

İsmi Neden XML?

Büyük/Küçük Harf Karmaşası

Neden Öğreniyoruz?

Temel Kullanım

Adım 1: XHR Nesnesi Oluşturma

Adım 2: Event Listener'ları Tanımlama

Adım 3: İsteği Açma

Adım 4: İsteği Gönderme

Tam Kod

Yanıtı İşleme

Pratik Örnek: Kullanıcı Bilgisi Getirme

Durum Kodunu Kontrol Etme

XHR'nin Sorunları

Sorun 1: Callback Hell (Cehennem)

Sorun 2: Promise Desteği Yok

Sorun 3: Sözdizimi Karmaşık

Sorun 4: Manuel JSON Parse

XHR ile POST İsteği

XHR Özellikleri ve Metodları

Özellikler

Metodlar

Event'ler

readyState Değerleri

XHR vs Modern Yöntemler

Ne Zaman XHR Kullanılır?

Kullanın:

Kullanmayın:

Özet

Sırada Ne Var?

İlgili yazılar

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword