JavaScript ile Ajax Nedir ve Nasıl Kullanılır?

Adı : JavaScript ile Ajax Nedir ve Nasıl Kullanılır?

Ajax (Asynchronous JavaScript and XML), web sayfaları ile sunucu arasında veri alışverişi yapmamıza olanak sağlayan bir teknolojidir. Bu teknoloji sayesinde, sayfa yenilemeden arka planda işlemler yapabiliriz. Bu sayede sayfamızın performansı artar ve daha iyi bir kullanıcı deneyimi sunarız.
Ajax’ın kullanımının artmasıyla birlikte, web uygulamalarının yapısı da değişmeye başladı. Önceden, web sayfaları sunucu tarafında tamamen oluşturulur ve geliştirilirdi. Ancak Ajax ile birlikte, sayfa yüklenirken sadece temel yapı blokları olan HTML, CSS ve JavaScript yüklenir. Daha sonra, kullanıcının yaptığı isteklere ve veri alışverişine göre, sayfa arka planda dinamik olarak güncellenir.
Ajax’ın kullanımı oldukça basittir. Birçok JavaScript kütüphanesi (jQuery, React, Angular vb.) Ajax işlemlerini kolaylaştırmak için kullanılabilir. Ancak, bu yazıda, temel JavaScript kullanarak Ajax'ı anlatacağız.
## Ajax ile Veri Alma
Örnek bir Ajax isteği göndermeden önce, sunucudan veri alma işlemini göstermek için bir örnek yapalım. Aşağıdaki kod, bir veritabanından örnek verileri JSON formatında alır ve ekrana yazdırır.
```javascript
const xhr = new XMLHttpRequest();
const method = \"GET\";
const url = \"http://example.com/veriler.json\";
xhr.open(method, url, true);
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
console.log(response);
}
}
xhr.send();
```
Bu kod parçasında önce XMLHttpRequest objesi oluşturuldu. Bu obje, sunucu ile iletişim sağlamak için kullanılır. Daha sonra GET işlemi için URL ve method belirlendi ve açıldı. `readyState` özelliği, veriler ile ilgili durum bilgisi sağlar. `onreadystatechange` fonksiyonu ise, herhangi bir değişiklik olduğunda tetiklenir ve belirtilen koşullar sağlandığında JSON verileri alınarak konsol çıktısı üretir.
## Ajax ile Veri Gönderme
Ajax kullanarak sunucuya veri gönderebiliriz. Bunun için kullanıcı tarafından form doldurulması gereken bir HTML sayfasını ele alalım. Formun içindeki verileri aldıktan sonra, bu veriler POST isteği ile sunucuya gönderilebilir.
```html

Ad



Soyad



Gönder

```
JavaScript kodunda, formun gönderilmesi dinlenir. Eğer form gönderildiyse, veriler POST isteği ile sunucuya gönderilir.
```javascript
const form = document.querySelector('#form');
form.addEventListener('submit', function (event) {
event.preventDefault();
const xhr = new XMLHttpRequest();
const method = \"POST\";
const url = \"http://example.com/gonder\";
const ad = document.querySelector('#ad').value;
const soyad = document.querySelector('#soyad').value;
const data = JSON.stringify({ ad: ad, soyad: soyad });
xhr.open(method, url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
}
xhr.send(data);
});
```
Bu kod parçasında, önce form elementi alındı ve submit işlemi dinlendi. Veriler form elementlerinden alındıktan sonra JSON formatında stringify edilir ve XMLHttpRequest objesine eklenir. Daha sonra sunucu adresi belirtilerek request açılır ve gönderilir. `setRequestHeader` fonksiyonu, JSON verilerin yöntem olarak POST seçili olduğunda gönderildiğini belirtir. İşlem tamamlandığında, sunucudan gelen cevap konsola yazdırılır.
## Sık Sorulan Sorular
### Ajax’ın avantajları nelerdir?
Ajax, sunucuya veri gönderirken sayfanın yenilenmemesini sağlar. Bu sayede daha hızlı ve güçlü bir kullanıcı deneyimi sunar. Ayrıca, sayfanın yüklenmesi daha az tüketim gerektirdiğinden daha hızlı açılır.
### Ajax ile hangi veri tipleri gönderilebilir?
Ajax ile JSON, XML, HTML veya metin gibi herhangi bir veri türü gönderilebilir.
### Ajax ile hangi işlemler yapılabilir?
Ajax ile sunucu ile herhangi bir veri alışverişi yapılabilir. Örneğin, bir öğrencinin notlarını getirirken kullanıcı bir ara ekrandan geçmeksizin notları tabloda görebilir.
### jQuery Ajax ile temel JavaScript Ajax arasındaki farklar nelerdir?
jQuery Ajax, daha kısa kodlar ve daha iyi bir fonksiyonellik sağlar. Ancak, temel JavaScript Ajax, daha düşük boyutlu ve daha hızlı bir işlem yapar. Ayrıca, jQuery'i kullanmak için harici bir kütüphane yüklemek gerekirken temel JavaScript Ajax doğrudan çıplak html içinde kullanılabilir.
### Ajax istekleri varsayılan olarak asenkron mudur?
Evet, Ajax istekleri varsayılan olarak asenkron şekilde işler. Bu, kullanıcı verileri sunucuya gönderirken arka planda diğer işlemleri devam ettirebileceğimiz anlamına gelir. Ancak, senkron istekler de mümkündür. Bunlar, özellikle dosya yükleme işlemlerinde kullanılır.