AJAX nedir ve nasıl çalışır?

giriiş

AJAX, şu ifadenin kısaltmasıdır: Eşzamansız JavaScript ve XML Dinamik ve etkileşimli web uygulamaları oluşturmak için kullanılan bir tekniktir. Bu teknoloji, geliştiricilerin bir web sayfasının farklı bölümlerini, tüm sayfayı yeniden yüklemeden güncellemelerine olanak tanır. AJAX, daha iyi bir kullanıcı deneyimi sağlamak için uyum içinde çalışan çeşitli web teknolojilerinin birleşimidir.

AJAX nasıl çalışır?

AJAX basit bir fikirle çalışır: Sunucuyla asenkron iletişim. Bu, tarayıcının tüm sayfayı yeniden yüklemeye gerek kalmadan sunucuya istek gönderebileceği ve yanıt alabileceği anlamına gelir.

AJAX'ın ana bileşenleri

• HTML ve CSS: Bir web sayfasının yapısını ve tasarımını görüntülemek.
• JavaScript: Kullanıcı etkileşimlerini yönetmek ve istek göndermek.
• XMLHttpRequest veya Fetch API'si: Sunucuya veri göndermek ve sunucudan veri almak.
• JSON veya XML verileri: Sunucunun tarayıcıya gönderdiği veri biçimi.
• Sunucu ve veritabanı: Verilerin işlendiği ve cevapların hazırlandığı yer.

AJAX işleminin adımları

1. Kullanıcı etkileşimi: Kullanıcının bir düğmeye tıklaması veya bir seçeneği seçmesi gibi bir eylem gerçekleştirmesi.
2. Bir istek oluşturun: JavaScript, isteği göndermek için bir XMLHttpRequest nesnesi oluşturur veya Fetch API'sini kullanır.
3. İstek gönder: İstek sunucuya asenkron olarak gönderilir.
4. Sunucuda işleme: Sunucu isteği alır, işler ve uygun yanıtı (JSON veya HTML biçimindeki veriler gibi) hazırlar.
5. Yanıtı al: Tarayıcı sunucunun yanıtını alır ve JavaScript'e iletir.
6. Sayfa yenileme: JavaScript alınan verileri işler ve sayfanın bir kısmını yeniden yüklemeden günceller.

Basit AJAX kod örneği

// ایجاد شیء XMLHttpRequest
let xhr = new XMLHttpRequest();
// باز کردن درخواست
xhr.open("GET", "data.json", true);
// تنظیم پاسخ
xhr.onload = function() {
if (xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
console.log(data); // نمایش داده در کنسول
}
};
// ارسال درخواست
xhr.send();

AJAX'taki veri biçimleri

JSON

JSON, AJAX'ta kullanılan en yaygın veri biçimidir. Hafiftir, okunabilirdir ve kolayca bir JavaScript nesnesine dönüştürülebilir.

{
"name": "Ali",
"age": 25,
"city": "Tehran"
}

XML

Geçmişte XML, AJAX'ın ana formatlarından biriydi ancak günümüzde karmaşıklığı ve ağır yükü nedeniyle kullanımı azaldı.

<name>Ali</name>
<age>25</age>
<city>Tehran</city>

HTML

Bazen veriler sunucudan HTML biçiminde, örneğin bir tablonun veya formun bir parçası olarak gönderilir.

Talep gönderme yöntemleri

ELDE ETMEK

xhr.open("GET", "data.json", true);
xhr.send();

POSTALAMAK

xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=Ali&age=25");

Fetch API'yi kullanma

fetch('data.json')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});

Sonuç

AJAX, geliştiricilerin daha hızlı, daha akıcı ve daha etkileşimli uygulamalar oluşturmasına olanak tanıyan, web geliştirmede önemli bir teknolojidir. AJAX'ın birçok avantajına rağmen, zorluklarının ve kullanım en iyi uygulamalarının farkında olmak, geliştiricilerin daha verimli uygulamalar tasarlamalarına yardımcı olabilir. Sonuç olarak AJAX, daha iyi bir kullanıcı deneyimi sunarak ve sunucu yükünü azaltarak modern web geliştirmenin temel bir bileşeni haline gelmiştir.