XHR İsteklerinin Bilinmesi Gereken Bilgileri

Modern web, ilgi çekici ve duyarlı bir kullanıcı deneyimi talep eder. Bunu başarırken, XMLHttpRequest (XHR) nesnesi kritik bir rol oynar. Asenkron iletişimin temeli olarak işlev gören XHR, web uygulamalarının arka planda sunucularla sorunsuz bir şekilde veri alışverişinde bulunmasını sağlayarak, kullanıcı etkileşimini bozan tam sayfa yeniden yüklemelerine olan ihtiyacı ortadan kaldırır.

💡

Bir API geliştirme platformu mu arıyorsunuz? Bugün Apidog'u denemeyi düşünün.

Apidog, kullanıcıları tüm yaşam döngüsü için gerekli tüm işlevlerle donatan, hepsi bir arada bir API geliştirme platformudur. API'ler oluşturabilir, test edebilir, taklit edebilir ve belgeleyebilirsiniz - API geliştirme için eksiksiz bir pakettir!

Apidog'un işlevleri hakkında daha fazla bilgi edinmek isterseniz,

Bu makale, XHR'nin temel işlevlerini derinlemesine inceleyerek, geliştiricilere dinamik ve ilgi çekici web deneyimleri oluşturmak için gücünden nasıl yararlanacakları konusunda kapsamlı bir anlayış sunmaktadır.

Bu makaleyi tamamen anlamak için, önce XHR (XMLHttpRequest) olan temel çerçeveden geçelim.

XHR Nedir?

XMLHttpRequest anlamına gelen XHR, JavaScript kodunun bir web sunucusuyla iletişim kurmasını sağlayan, web tarayıcılarında yerleşik bir nesnedir.

XHR birkaç adımda çalışır:

Sunucudan veri alın: Canlı hava durumu güncellemeleri görüntüleyen bir web sayfanız olduğunu düşünün. XHR, sayfadaki JavaScript kodunun, tüm sayfayı yeniden yüklemeden bir hava durumu sunucusundan veri almasını sağlar. Bu, kullanıcı deneyimini daha sorunsuz hale getirir.
Sunucuya veri gönderin: XHR ayrıca sunucuya veri göndermek için de kullanılabilir. Örneğin, bir web sayfasında bir form gönderdiğinizde, XHR, form verilerini işlenmek üzere sunucuya göndermek için arka planda kullanılabilir.
Sunucudan yanıt alın: XHR, sunucudan veri gönderdikten veya aldıktan sonra bir yanıt alır. Bu yanıt, web sayfasını güncellemek veya başka eylemler gerçekleştirmek için JavaScript kodu tarafından kullanılabilir.

Kısacası, XHR, tam bir sayfa yenilemesi gerektirmeden sunucularla veri alışverişinde bulunabilen dinamik web sayfalarını etkinleştirir. Fetch API adlı, benzer işlevselliği elde etmenin daha yeni ve daha modern bir yolu vardır, ancak XHR, eski tarayıcılarla geriye dönük uyumluluk için hala yaygın olarak kullanılmaktadır.

XHR İstekleri Kavramı

Süreç

Oluşturma

Bir web sayfasının JavaScript kodu, bir XMLHttpRequest nesnesi oluşturarak bir XHR isteği başlatır.

Yapılandırma

Komut dosyası, aşağıdaki gibi ayrıntıları belirterek isteği yapılandırır:

HTTP yöntemi (GET, POST, vb.)
Erişilecek sunucu kaynağının URL'si
İsteğin asenkron veya senkron doğası (duyarlılık için asenkron önerilir)
Sunucuya gönderilecek veriler (varsa)
Çeşitli istek aşamaları için olay işleyicileri

İsteği Gönderme

open() ve send() yöntemleri, isteği sunucuya göndermek için kullanılır.

Sunucu İşleme

Sunucu, isteği HTTP yöntemine göre işler ve veri sağlar.

Yanıt

Sunucu, tarayıcıya veri (örneğin, JSON, HTML) ve durum kodları (örneğin, başarı için 200) içeren bir yanıt gönderir.

Olay İşleme

Tarayıcının JavaScript kodu, daha önce tanımlanan olay dinleyicileri (özellikle onreadystatechange) aracılığıyla yanıtı işleyebilir. Bu, komut dosyasının yanıt verilerini ayrıştırmasına ve web sayfasını buna göre güncellemesine olanak tanır.

Bir XHR İsteği Çağırma Konusunda Adım Adım Kılavuz

Bu bölüm, bir XHR isteğinin nasıl çağrılacağına dair basitleştirilmiş bir JavaScript kılavuzu içerir. Bu, istemci kodlamasını içerdiğinden, bir IDE (Entegre Geliştirme Ortamı) hazırlamanız gerekecektir!

1. Bir XMLHttpRequest Nesnesi Oluşturun

JavaScript

let xhr = new XMLHttpRequest();

Bu, sunucuyla etkileşim kurmanızı sağlayan yeni bir nesne oluşturur.

2. İsteği Yapılandırın

İstek ayrıntılarını tanımlamak için open() yöntemini kullanın:

HTTP Yöntemi (gerekli): Ortak yöntemlerin GET, POST, PUT ve DELETE olduğu, gerçekleştirmek istediğiniz işlemi seçin.
URL (gerekli): Erişmek istediğiniz sunucu kaynağının web adresini belirtin (örneğin, "https://api.example.com/data").
Asenkron (isteğe bağlı, varsayılan olarak true): Asenkron istekler için true olarak ayarlayın (yanıtı beklerken tarayıcının çalışmaya devam etmesini sağlar), senkron için false (yanıt gelene kadar tarayıcıyı engeller - önerilmez).

Örnek:

xhr.open("GET", "https://api.example.com/data", true);  // Belirtilen URL'ye GET isteği, asenkron

3. İsteğe Bağlı Başlıkları Ayarlayın (Varsa)

İstek için ek başlıklar tanımlamak için setRequestHeader() yöntemini kullanın. Bu, sunucunun gereksinimlerine bağlı olarak gerekli olabilir.

Örnek (veri biçimini JSON olarak belirtme):

xhr.setRequestHeader("Content-Type", "application/json");

4. Gönderilecek Verileri Hazırlayın (Varsa)

POST veya PUT gibi yöntemler için, sunucuya gönderilecek verileri hazırlamanız gerekebilir. Bu veri biçimi sunucuya bağlıdır. Bir dize, JSON nesnesi veya başka bir şey olabilir. Bu verileri ayarlamaya yönelik belirli yöntem, biçime bağlıdır.

5. İsteği Gönderin

Her şey yapılandırıldıktan sonra, isteği başlatmak için send() yöntemini kullanın:

xhr.send(dataToSend); // dataToSend, HTTP yöntemine bağlı olarak isteğe bağlıdır

6. Yanıtı İşleyin

Sunucunun yanıtını olay dinleyicileri kullanarak işlemeniz gerekecektir:

onreadystatechange: Bu olay, isteğin yaşam döngüsü boyunca tetiklenir. İsteğin ilerlemesini belirlemek için readyState özelliğini ve HTTP durum kodunu almak için status özelliğini kontrol edebilirsiniz.
Diğer olaylar: Belirli eylemler için onload (başarılı tamamlanma için) veya onerror (hatalar için) gibi olayları da kullanabilirsiniz.

Başarı ve hata senaryolarını işlemek için onreadystatechange kullanan bir örnek:

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {  // İstek tamamlandı
    if (xhr.status === 200) {  // Başarılı
      console.log(xhr.responseText);  // Yanıt verilerine erişin (genellikle bir dize)
      // Yanıt verilerini burada işleyin (örneğin, web sayfasını güncelleyin)
    } else {
      console.error("Error:", xhr.statusText);
    }
  }
};

Apidog - XHR Çerçevesini API'lerle Entegre Edin

Artık istemci kodu örneğiniz hazır olduğuna göre, diğer insanların (veya kendinizin) kullanması için bir API oluşturmayı düşünebilirsiniz! Bu iş için mükemmel bir araç, endüstri düzeyinde API'ler üretmek için kapsamlı bir API geliştirme platformu olan Apidog'dur!

button

Apidog Kullanarak Kendi REST API Uç Noktalarınızı Tasarlamak

Apidog, kullanıcılara en kaliteli API'leri üretmek için basit ama sezgisel bir platform sağlar! Yeni geliştirme ortamına alışmak uzun sürmeyecek.

Yukarıdaki resimde gösterildiği gibi, New API düğmesine basarak başlayın.

Bu bölüm, API'nizin eylemlerini tam olarak tasarlamanıza olanak tanır. Şunları detaylandırabilirsiniz:

Uygulamaların API'nizle nasıl "konuşacağı" (GET, POST, PUT, DELETE).
Uygulamaların bağlanacağı belirli web adresi (uç nokta).
Belirli verilere ulaşmak için web adresine dahil edilmesi gereken herhangi bir gerekli ayrıntı.
API'nizin o bölümünün ne yaptığına dair basit bir açıklama.

Apidog Kullanarak API'leri Test Etme

İlk adım, test etmek istediğiniz belirli API uç noktasını girmektir. Test ettiğiniz belirli API için gerekirse parametreler gibi ek ayrıntılar ekleyin.

Bir URL'de birden fazla parametre kullanma konusunda emin değilseniz, bu makale (bağlantı dahil değil), daha büyük veri kümeleri içindeki tam kaynağa nasıl ulaşacağınız konusunda size rehberlik edebilir!

Send düğmesine bastıktan sonra, API'nin yanıtını ayrıntılı olarak görüntüleyebilirsiniz. API yanıtı için durum kodunun başarılı bir isteği gösterip göstermediğini görün ve istemci kodunuzun arka uç sunucularından gelen verileri işleyebilmesi için ham isteği görüntüleyin.

button

Sonuç

XHR istekleri, dinamik web deneyimlerini şekillendirmede çok önemli bir rol oynamıştır. Tam sayfa yeniden yüklemeleri olmadan verileri asenkron olarak getirme yetenekleri, web uygulamalarının sunucularla etkileşim biçiminde devrim yaratmıştır. Fetch API gibi daha yeni teknolojiler avantajlar sunarken, XHR yaygın olarak desteklenmeye devam ediyor ve etkileşimli web özellikleri oluşturmak için sağlam bir temel sağlıyor. XHR isteklerini anlamak, geliştiricileri bu çok yönlü araçtan yararlanmaya ve sorunsuz bir kullanıcı deneyimi sunan kullanıcı dostu web uygulamaları oluşturmaya teşvik eder.

Web geliştirme gelişmeye devam ettikçe, XHR istekleri muhtemelen daha yeni gelişmelerle birlikte var olmaya devam edecektir. XHR'de ustalaşarak, geliştiriciler çeşitli web geliştirme senaryolarında uygulanabilir değerli beceriler kazanır ve zengin ve ilgi çekici web uygulamaları oluşturmalarına olanak tanır.