AJAX İşlemleri
AJAX İşlemleri
AJAX İşlemleri, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 1 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 1 dersten oluşur.
Giriş
Merhaba,
Bu derste jQuery AJAX Methods kullanarak uzak sunucuyla nasıl etkileşim kuracağımızı öğreniyoruz.
AJAX (Asynchronous Javascript And XML), web sayfasını yenilemeden Server ile eşzamansız veri aktarımı sağlayan bir teknolojidir.
Veriler sayfa yenilenmeden aktarılabildiği için özellikle kullanıcı deneyimi olumlu yönde etkilenir.
AJAX Örneği
Özellikle Facebook, Gmail ve Youtube gibi dünyanın en popüler web uygulamaları AJAX teknolojisini sıkça kullanır.
Aslında AJAX'ı yeni bir teknoloji olarak düşünmek yerine, JavaScript kullanarak server ile istemci arasında eşzamansız veri aktarımı sağlayan bir method olarak düşünebilirsiniz.
Şimdi AJAX kullanan bir function için bir örnek verelim.
Örneğin, youtube.com'da bir video izlediniz ve beğen düğmesine tıkladınız. Bu durumda beğeni olayımız, youtube sayfası yenilenmeden önce arka planda youtube sunucularına aktarılır.
Bu, bir AJAX isteğiyle gerçekleşen bir işlemdir.
AJAX Örneği
AJAX isteklerine bir örnek yapalım.
Aşağıda AJAX ile https://api.coddykit.com/api/coddy-test adresine gönderilen bir GET isteği kodu yer alıyor.
Bu, VanillaJS ile hazırlanmıştır ve görebileceğiniz gibi sözdizimi biraz karmaşıktır.
<div id="result"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4
&& this.status == 200) {
//we are writing the AJAX request response
//to div element that has result id
var result = document.getElementById('result');
result.innerHTML = JSON.stringify(this.responseText);
}
};
xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
xhttp.send();
</script>Uyarı
Daha önce söylediğimiz gibi, jQuery bir DOM değiştirme kütüphanesi olmasının yanı sıra AJAX işlemlerini kolaylaştıran yöntemler de sunar.
AJAX Methodu
jQuery ile AJAX isteklerimizi yönetmek için oldukça basit bir methodumuz var.
ajax() methodu ile Web dünyasında yaygın olarak kullanılan get, post veya put gibi HTTP methodlarını kolayca kullanabiliriz.
AJAX methodunun sözdizimi aşağıdaki gibidir.
$.ajax ({
url: 'remote URL'.
data: 'Data that we will send',
method: 'HTTP Method - Default GET',
success: 'Here, we should define function that work when Ajax get success result',
dataType: 'Interaction data type'
});
Bir örnek yapalım
<div id="result"></div>
<script>
$.ajax ({
url: 'https://api.coddykit.com/api/coddy-test',
success: function(data){
$('#result').text(JSON.stringify(data));
}
});
</script>AJAX örneği
AJAX get isteği
Şimdi örneğimizi geliştirelim.
Aşağıdaki örnekte URL'ye (https://api.coddykit.com/api/coddy-test) bir AJAX isteği gönderilmiştir.
Bir HTTP yöntemi tanımlanmazsa varsayılan olarak GET isteği gönderilir.
const https = require('https');
function ajax(url) {
const callbacks = { success: [], fail: [], always: [] };
const req = https.get(url, (res) => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => {
callbacks.success.forEach(cb => cb(data));
callbacks.always.forEach(cb => cb());
});
});
req.on('error', (err) => {
callbacks.fail.forEach(cb => cb(err));
callbacks.always.forEach(cb => cb());
});
return {
done: function(cb) { callbacks.success.push(cb); return this; },
fail: function(cb) { callbacks.fail.push(cb); return this; },
always: function(cb) { callbacks.always.push(cb); return this; }
};
}
var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
.done(function() {
//success callback
/*
If our get request is sent to
the server with success (HTTP 2xx),
this function is called.
*/
})
.fail(function() {
/* This function works
if the AJAX request fails.
*/
})
.always(function() {
/*
This function works in all cases when
the AJAX request is
successful or unsuccessful.
*/
});get methodu
$.get() Methodu ve Get İsteği
Sunucularımıza HTTP get isteği göndermek için $.get() methodunu kullanabiliriz.
Bu method jQuery tarafından sağlanır ve VanillaJS yerine daha kısa ve kolay kod yazarak GET isteği göndermemize olanak tanır.
Bir örnek yapalım ve kodun ne kadar kısaldığına dikkat edelim.
<div id="result"></div>
<script>
$.get("https://api.coddykit.com/api/coddy-test",
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>post yöntemi
$.post() yöntemi ve post isteği
Sunucularımıza HTTP Post isteği göndermek için $.post() yöntemini kullanabiliriz.
Bir örnek oluşturalım ve kodun ne kadar kısaldığına dikkat edelim.
Özellikle web formlarını sunucuya gönderirken post isteklerini sıkça kullanacağız.
<div id="result"></div>
<script>
$.post("https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Put Methodu
Put İsteği
Sunucularımıza HTTP Put isteği göndermek için $.put() methodunu kullanabiliriz.
Bir örnek yapalım.
<div id="result"></div>
<script>
$.ajax({
method:'PUT',
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Delete Methodu
Delete İsteği
Sunucularımıza HTTP Delete isteği göndermek için $.delete() methodunu kullanabiliriz.
Bir örnek yapalım
<div id="result"></div>
<script>
$.ajax({
method:'DELETE',
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Bağlantı
Örnekleri ve AJAX yöntemleri hakkında ayrıntılı bilgileri aşağıdaki bağlantıda bulabilirsiniz.
Tebrikler
Tebrikler 🎉
Bu bölümde jQuery ile AJAX'ı öğrendik.
jQuery Yeni Başlayanlar Kursu'nda bize katıldığınız için teşekkür ederiz 🎉🎉🎉
Artık sınava girebilir ve Yeni Başlayanlar İçin jQuery Eğitimi kursu sertifikasını alabilirsiniz 🚀🚀🚀
Sıkça Sorulan Sorular
“AJAX İşlemleri” dersi ücretsiz mi?
Evet — “AJAX İşlemleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 1 dersten oluşur.
“AJAX İşlemleri” dersinde ne öğreneceğim?
AJAX İşlemleri jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 1 dersinin 1. dersidir.
“AJAX İşlemleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.