giriiş
JavaScript'te Ajax'ı çağırmanın, kullanıcı deneyimini büyük ölçüde iyileştirebilecek birçok farklı yolu vardır; örneğin sunucuya veri gönderme, kullanıcı adlarını kontrol etme, otomatik tamamlama formları oluşturma, oylama ve derecelendirme, sohbet odaları oluşturma ve daha fazlası.
Bu makale, AJAX çağrıları yapmak için kullanılan farklı seçeneklerin en güncel listesi hakkında bilgi içermektedir. Basitçe anlatmak gerekirse, bu seçeneklerin ne olduğuna odaklanalım; her seçeneğin avantajları ve dezavantajları vardır.
1. XHR
XMLHttpRequest, bir web sayfasının sunucuya istek göndermesine ve sayfanın tamamını yeniden yüklemeden yanıt almasına olanak tanıyan bir nesnedir (çoğu tarayıcıda yerel bir bileşen, Microsoft Internet Explorer'da ise bir ActiveX nesnesi). Kullanıcı, sayfa yeniden yüklenmemiş gibi aynı sayfada devam eder ve daha da önemlisi, işlemeyi görmez veya fark etmez - yani, en azından varsayılan olarak, yeni bir sayfa yüklemesi görmez.
XMLHttpRequest nesnesini kullanmak, geliştiricinin sunucudan gelen verilerle tarayıcıda zaten yüklenmiş olan bir sayfayı değiştirmesine olanak tanır; böylece sayfanın tamamını sunucudan yeniden istemeye gerek kalmaz.
XHR kullanarak GET isteği oluşturma
const Http = new XMLHttpRequest();
const url='http://yourdomain.com/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}XHR kullanarak gönderme isteği oluşturma
var xhr = new XMLHttpRequest();
xhr.open("POST", '/submit', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
}
}
xhr.send("name=Ketan&id=1");2. Fetch API
Fetch API, sunucudan kaynakları almak için XMLHttpRequest'e yeni bir alternatiftir. XMLHttpRequest'ten farklı olarak, daha güçlü bir özellik setine ve daha anlamlı isimlere sahiptir. Fetch ayrıca sözdizimi ve yapısı sayesinde esnek ve kullanımı kolaydır. Ancak, onu diğer AJAX HTTP kütüphanelerinden ayıran şey, tüm modern web tarayıcıları tarafından desteklenmesidir. Fetch, istek-yanıt yaklaşımını izler; Fetch bir istekte bulunur ve bir Response nesnesine çözümlenen bir söz (promise) döndürür.
Fetch API kullanmanın faydaları
- Esnek ve kullanımı kolaydır.
- Promises sayesinde "Callback Hell" (geri dönüş aramaları) sorunundan kurtulabilirsiniz.
- Tüm modern tarayıcılar tarafından desteklenmektedir.
- İstek-yanıt yaklaşımını izler.
Fetch API kullanmanın dezavantajları
- Varsayılan olarak çerez göndermez.
- CORS varsayılan olarak devre dışıdır.
Fetch API'de GET isteği oluşturma
fetch('https://www.yourdomain.com', {
method: 'get'
})
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
}Fetch API'de POST isteği oluşturma
var url = 'https://www.yourdomain.com/updateProfile';
var data = {username: 'courseya'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));3. jQuery
jQuery, harika ve muhteşem web uygulamaları oluşturmak için kullanabileceğiniz istemci tarafı bir programlama dilidir. Ücretsizdir, ancak güçlüdür, kurulumu ve öğrenmesi nispeten kolaydır ve hayal edebileceğiniz veya düşünebileceğiniz hemen her şeyi yapmanıza olanak tanıyan birçok eklenti ve uzantıya sahiptir. Hızlıca başlayabilirsiniz ve daha sonra gerçekten ustalaştığınızda ondan daha gelişmiş bir dili kullanamazsınız.
jQuery kullanmanın avantajları
- jQuery'nin en büyük avantajı sadeliğidir.
- Ayrıca, jQuery'nin kullanıcılara eklenti ekleme olanağı sağlaması nedeniyle inanılmaz derecede esnektir.
- Ayrıca sorunlarınıza çok hızlı bir çözüm sunar. Daha "iyi" çözümler olabilirken, jQuery ve geliştiricileri, jQuery'yi hızlı ve etkili bir şekilde uygulayabilmenizi sağlamak için bir ekip olarak çalışır ve bu da size para tasarrufu sağlar.
- Açık kaynak yazılım, geliştiriciler için hızlı büyüme ve bürokratik engeller olmadan mümkün olan en iyi hizmeti sunma özgürlüğü anlamına gelir.
jQuery kullanmanın dezavantajları
- Ayrıca, sık güncellemeler, topluluk üyelerinin çözüm önerileri sunma olasılığının da düşük olduğu anlamına gelir.
- Şu anda piyasada birçok farklı jQuery sürümü mevcut ve bazıları diğerlerine göre daha az uyumlu.
- Bazen jQuery, bazı durumlarda CSS'ye kıyasla daha yavaş olabilir. Bu durumda, basitliği bir dezavantaja dönüşür çünkü istemci tarafı etkileşimleri için uygun değildir.
jQuery'de GET isteği oluşturma
$.ajax({
url: '/users',
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});jQuery kullanarak POST isteği oluşturma
$.ajax({
url: '/users',
type: "POST",
data: {
name: "Ipseeta",
id: 1
},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});4. Axios
Axios, hem tarayıcıda hem de Node.js ortamında çalışan, vaat tabanlı birçok HTTP istemcisinden biridir. Temelde XMLHttpRequest ve Node HTTP arayüzüyle başa çıkmak için tek bir API sağlar. Bunun dışında, yeni ES6 sözdizimi için bir polyfill kullanarak istekleri bağlar.
Axios kullanmanın faydaları
- Kutudan Çıkar Çıkarmaz Destek Sözü
- XSRF saldırılarına karşı koruma için istemci tarafı desteği.
- İstekler veya yanıtlar yerine getirilmeden önce kaydedilebilir.
- JSON verileri için otomatik dönüştürme
- Promise API'yi destekler.
- Bir talebi düzenleyebilir veya iptal edebilirsiniz.
- Yanıt süresi ayarlanabilir.
- Hem Node.js'de hem de tarayıcıda çalışır.
Axios'ta GET isteği oluşturma
axios.get('/get-user', {
params: {
ID: 1
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});Axios'ta POST isteği oluşturma
axios.post('/user', {
name: 'Sanjeev',
id: 1
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});5. Talep
Request kütüphanesi, HTTP çağrıları yapmanın en basit yollarından biridir. Yapısı ve sözdizimi, Node.js'de isteklerin nasıl işlendiğine çok benzer. Şu anda GitHub'da 18 bin yıldıza sahip olan proje, mevcut en popüler HTTP kütüphanelerinden biri olduğu için bahsetmeye değer.
Sözdizimi
var request = require('request');
request('http://www.yourdomain.com', function (error, response, body) {
console.log('error:', error);
console.log('statusCode:', response && response.statusCode);
console.log('body:', body);
});6. Süper Ajan
SuperAgent, okunabilirliğe ve esnekliğe odaklanan, hafif ve gelişmiş bir AJAX kütüphanesidir. Piyasadaki diğer kütüphanelerin aksine, SuperAgent'ın öğrenme eğrisi kolaydır. SuperAgent, GET, POST, PUT, DELETE ve HEAD gibi yöntemleri kabul eden bir istek nesnesine sahiptir.
Süper Acente Avantajları
- Eklenti tabanlı bir ortama ve ekosisteme sahip olup, ek veya ilave işlevsellik için uzantılar oluşturulabilir ve geliştirilebilir.
- Kolayca ayarlanabilir
- HTTP istekleri için güzel bir arayüz.
- İstek göndermek için birden fazla zincirleme fonksiyon.
- Yükleme ve indirme ilerlemesini desteklemelidir.
- Parçalı taşıma şifrelemesini desteklemektedir.
- Eski tarz aramalar desteklenmektedir.
- Birçok yaygın özellik için çok sayıda eklenti mevcuttur.
GET isteği oluşturun
request
.get('/user')
.query({ id: 1 })
.then(res => {
});Bir gönderi isteği oluşturun
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"Ipseeta","id":1}')
.then(callback)
.catch(errorCallback)Sonuç
Seçim, projenize, ölçeğine, hedef kitlesine ve benimsenme oranına bağlı olacaktır. Doğru veya yanlış bir seçim yoktur. Yanlış gereksinimler için yanlış kütüphaneyi seçerseniz, bu sorunun cevabı ortaya çıkabilir. İş için doğru aracı seçin.
