Mustafa HAMIT

JavaScript ile bir sunucuya istek atmak ve veri almak için kullanılan eski ama önemli yöntemlerden biri XMLHttpRequest (XHR)’tir. Günümüzde yerini büyük ölçüde Fetch API almış olsa da, birçok projede hâlâ kullanılmaktadır.

---

XMLHttpRequest Nedir?

XMLHttpRequest, JavaScript kullanarak bir sunucuya HTTP isteği göndermeyi ve sunucudan veri almayı sağlayan bir nesnedir.

Sayfa yenilenmeden veri çekmek için kullanılır (AJAX mantığı).

---

Basit GET İsteği Örneği

var xhr = new XMLHttpRequest();

xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);

xhr.onload = function () {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.send();

Bu kod:

• Bir GET isteği oluşturur
• API’ye bağlanır
• Gelen veriyi JSON’a çevirir
• Konsola yazdırır

---

POST İsteği Örneği

var xhr = new XMLHttpRequest();

xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function () {
  console.log(xhr.responseText);
};

var data = JSON.stringify({
  title: "Test",
  body: "İçerik",
  userId: 1
});

xhr.send(data);

---

XMLHttpRequest Özellikleri

• Sayfa yenilemeden veri alabilir
• Asenkron çalışır
• HTTP isteklerini yönetir
• Eski tarayıcılarda bile desteklenir

---

XMLHttpRequest vs Fetch API

Modern JavaScript’te artık genellikle Fetch API tercih edilir. Bunun nedeni:

• Fetch daha basit ve okunabilir
• Promise tabanlıdır
• Daha modern bir yapı sunar

Ancak XMLHttpRequest:

• Daha eski projelerde yaygındır
• Bazı özel durumlarda hâlâ kullanılabilir

---

Dikkat Edilmesi Gerekenler

• readyState ve status kontrolü yapılmalıdır
• Hata durumları manuel yönetilir
• Kod yapısı fetch’e göre daha karmaşıktır

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

---

Sonuç

XMLHttpRequest, JavaScript ile sunucuya istek atmanın eski ama temel yöntemlerinden biridir. Günümüzde yerini büyük ölçüde Fetch API alsa da, bu yapıyı bilmek özellikle eski projeleri anlamak açısından önemlidir.

---

Sık Sorulan Sorular (SSS)

XMLHttpRequest hala kullanılıyor mu?

Evet, özellikle eski projelerde ve bazı özel durumlarda kullanılmaktadır.

Fetch mi XMLHttpRequest mi?

Yeni projelerde Fetch API tercih edilmelidir.

AJAX ile ilişkisi nedir?

XMLHttpRequest, AJAX işlemlerinin temelini oluşturur.

Detaylar için JavaScript fetch kullanımı ile ilgili yazıyı okuyabilirsiniz

Link: https://www.mustafahamit.com/javascript-fetch-nedir/