Embedded Files
HAZIRLAYAN: Abdullah Özcan - 22430070003
JavaScript ile HTTP İstekleri ve API Entegrasyonu
Web uygulamaları, genellikle dış kaynaklara (örneğin sunucular veya hizmetler) HTTP istekleri göndererek veri alışverişi yapar. JavaScript, web tarayıcılarında çalışan bir programlama dilidir ve HTTP istekleri konusunda güçlü yeteneklere sahiptir. JavaScript kullanarak HTTP istekleri yapma ve API Entegrasyonunun 4 yolu vardır:
1.XMLHttpRequest ile GET isteği yapma
2.XMLHttpRequest ile POST isteği yapma
3.Fetch API ile GET isteği yapma
4.Fetch API ile POST isteği yapma
XMLHttpRequest Kullanma
XMLHttpRequest ile HTTP İstekleri Yapma XMLHttpRequest, JavaScript tarafından sunulan bir nesnedir ve HTTP istekleri yapmak için kullanılır. İşte XMLHttpRequest kullanarak GET ve POST istekleri yapılabilir.
1.XMLHttpRequest ile GET İsteği
XMLHttpRequest, JavaScript tarafından sunulan bir nesnedir ve web tarayıcılarında yerleşik olarak bulunan bir HTTP istemcisidir. XMLHttpRequest, web tarayıcısı tarafından sunulan bir API'dir ve JavaScript kodu aracılığıyla HTTP protokolü kullanarak sunuculara GET, POST gibi HTTP istekleri göndermeyi sağlar.
XMLHttpRequestGET isteği, web tarayıcısından sunucuya bir HTTP GET isteği göndererek,sunucudan veri almayı hedefler. GET isteği, sunucudan kaynakları (örneğin HTMLsayfaları, resimler, veri dosyaları) okumak için kullanılır ve sunucudan veriyitalep eden tarafın isteğine yanıt olarak sunucu tarafından veri döndürür. GETisteği, URL üzerinden parametreler ekleyerek veya başlık bilgileri kullanaraksunucuya veri iletebilir ve sunucudan veriyi alabilir.
XMLHttpRequestile yapılan GET isteği, kullanıcı tarafından istenen kaynakların sunucudanalınmasını sağlar ve bu kaynaklar JavaScript kodu tarafından işlenipkullanılabilir. Bu, web uygulamalarında, dış kaynaklardan veri çekme, APIentegrasyonu, veri alışverişi gibi senaryolarda sıkça kullanılır. Örneğin, birhaber sitesi, hava durumu servisinden hava durumu verisini almak için bir GETisteği yapabilir ve bu veriyi kullanıcıya göstermek için kullanabilir.
var xhr = new XMLHttpRequest();
var url = "https://www.example.com/data"; // Veriyi almak istediğiniz URL
xhr.open("GET", url, true); // true, isteğin asenkron olarak yapılacağını belirtir
xhr.send();
xhr.onload = function() {
if (xhr.status === 200) { // İstek başarıyla tamamlandıysa
var response = xhr.responseText; // Sunucudan gelen veriyi alın
console.log(response); // Veriyi kullanın veya işleyin
} else {
console.error("GET isteği başarısız. Durum kodu: " + xhr.status); // Hata durumunda hata mesajı yazdırın
}
};
Bu kodda önce XMLHttpRequest nesnesi oluşturuluyor ve veri almak istediğimiz URL belirtiliyor. Ardından, open metodunu kullanarak GET isteğini yapılandırıyoruz, send metodunu kullanarak isteği başlatıyoruz.
Sonrasında, onreadystatechange olay dinleyicisi ekliyoruz. readyState özelliği, isteğin mevcut durumunu temsil eder. XMLHttpRequest.DONE değeri, isteğin tamamlandığını gösterir. Eğer isteğin durumu XMLHttpRequest.DONE ise ve status özelliği 200 ise (yani istek başarıyla tamamlandıysa), responseText özelliğinden sunucudan gelen veriyi alıp kullanabiliriz. Aksi halde, hata durumunda bir hata mesajı yazdırıyoruz.
2.XMLHttpRequest ile POST İsteği
XMLHttpRequest POST isteği, JavaScript tarafından sunulan bir nesne olan XMLHttpRequest'i kullanarak web tarayıcısından sunucuya HTTP POST isteği gönderme işlemidir. POST isteği, sunucuya veri göndermek için kullanılır ve sunucu tarafından bu veriye yanıt olarak bir işlem gerçekleştirilir.
XMLHttpRequestile yapılan POST isteği, sunucuya veri gönderme ihtiyacı duyan senaryolardakullanılır. Örneğin, bir web formundaki kullanıcı verilerini sunucuyakaydetmek, yeni bir kayıt oluşturmak, mevcut bir kaydı güncellemek veya veritabanına yeni bir girdi eklemek gibi durumlarda POST isteği kullanılabilir.
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
} else {
console.error("HTTP isteği başarısız. Durum kodu: " + xhr.status);
}
}
};
var data = {name: "John", age: 30};
xhr.send(JSON.stringify(data));
POST isteği, GET isteğine benzer olarak "open()," "setRequestHeader()," "onreadystatechange" ve "send()" gibi XMLHttpRequest metotlarını kullanır. Farklı olan ise isteğin metodunu ("POST") ve gövdeye ("body") gönderilecek veriyi eklemektir. Örneğin, yandaki gibi bir kod parçası ile bir POST isteği yapılabilir.
Yandaki örnekte, xhr.open() metodu ile POST isteğinin hedef URL'si ve asenkron olup olmadığı belirtilir. xhr.setRequestHeader() metodu ile isteğin başlık bilgileri ayarlanır, bu örnekte Content-Type başlığı application/json olarak ayarlanarak gönderilecek verinin JSON formatında olduğu belirtilir. xhr.onreadystatechange olayı ile isteğin tamamlanıp tamamlanmadığı takip edilir ve isteğin tamamlandığı durumda cevap işlenir. xhr.send() metodu ile isteğin gövdesine veri eklenerek POST isteği tamamlanır. Bu örnekte JSON.stringify() metodu ile JavaScript nesnesi JSON formatına dönüştürülüp isteğin gövdesine eklenir.
Fect API Entegrasyonu
Fetch API ile HTTP İstekleri Yapma Fetch API, modern bir JavaScript API'sidir ve daha basit ve kullanıcı dostu bir HTTP istekleri yapma yöntemidir. İşte Fetch API kullanarak GET ve POST istekleri yapılabilir
1.Fect API ile GET İsteği
Fetch API, JavaScript tarafından sunulan modern bir web API'dir ve HTTP isteklerini yönetmek için kullanılır. Fetch API ile GET isteği, web tarayıcısından sunucuya bir HTTP GET isteği gönderme işlemidir ve sunucudan veri almayı hedefler.
Fetch API,XMLHttpRequest nesnesine alternatif olarak geliştirilmiş bir API'dir vekullanımı daha basit ve güçlüdür. Fetch API, Promise tabanlıdır ve modernJavaScript kodlama standartlarına uygun olarak tasarlanmıştır.
fetch('https://api.example.com/data')
.then(function(response) {
if (response.ok) {
return response.json();
} else {
throw new Error('HTTP isteği başarısız. Durum kodu: ' + response.status);
}
})
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.error(error);
});
Yandaki örnekte, fetch() metodu ile GET isteğinin hedef URL'si belirtilir. Fetch API, varsayılan olarak GET isteklerini yapar. then() metotları ile cevap işlenir. İlk then() bloğunda, cevap (response) nesnesinin durumu (status) kontrol edilir ve başarılı bir cevap ise response.json() metodu ile cevap JSON formatında okunur. Ardından ikinci then() bloğunda, veri (data) kullanılır. Eğer cevap başarılı değilse, throw ifadesi ile bir hata oluşturulur ve catch() bloğu ile hata yönetimi yapılır.
2.Fect API ile POST İsteği
Fetch API, JavaScript tarafından sunulan modern bir web API'dir ve HTTP isteklerini yönetmek için kullanılır. Fetch API ile POST isteği, web tarayıcısından sunucuya bir HTTP POST isteği gönderme işlemidir ve sunucuya veri göndermeyi hedefler.
Fetch API,XMLHttpRequest nesnesine alternatif olarak geliştirilmiş bir API'dir vekullanımı daha basit ve güçlüdür. Fetch API, Promise tabanlıdır ve modernJavaScript kodlama standartlarına uygun olarak tasarlanmıştır.
const url = 'https://api.example.com/data';
const data = { name: 'John', age: 30 };
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(function(response) {
if (response.ok) {
return response.json();
} else {
throw new Error('HTTP isteği başarısız. Durum kodu: ' + response.status);
}
})
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.error(error);
});
Yukarıdaki örnekte, fetch() metodu ile POST isteğinin hedef URL'si belirtilir. method parametresi POST olarak ayarlanarak POST isteği yapılır. headers parametresi ile isteğe başlık bilgileri eklenir, örneğin Content-Type başlığı ile verinin JSON formatında olduğu belirtilir. body parametresi ile veri (data) gönderilir. JSON.stringify() metodu ile JavaScript nesnesi JSON formatına dönüştürülerek gönderilir.
Cevap (response) işleme aşamaları, GET isteğinde olduğu gibi then() ve catch() blokları ile gerçekleştirilir. İlk then() bloğunda, cevap (response) nesnesinin durumu (status) kontrol edilir ve başarılı bir cevap ise response.json() metodu ile cevap JSON formatında okunur. Ardından ikinci then() bloğunda, veri (data) kullanılır. Eğer cevap başarılı değilse, throw ifadesi ile bir hata oluşturulur ve catch() bloğu ile hata yönetimi yapılır.
Page updated
Report abuse