JavaScript Kullanarak Ajax İşlemleri Nasıl Yapılır?

Adı : JavaScript Kullanarak Ajax İşlemleri Nasıl Yapılır?

JavaScript, web sitelerindeki dinamik ve verimli işlevlerin oluşturulmasına yardımcı olan en popüler programlama dillerinden biridir. Ajax (Asynchronous JavaScript and XML), web sayfalarında dinamik içerikler oluşturmak ve sunmak için kullanılan bir tekniktir. Bu teknik sayesinde web sayfalarındaki içerikler hızlı bir şekilde güncellenebilir ve kullanıcılara daha iyi bir deneyim sunulabilir. Bu yazıda, JavaScript kullanarak Ajax işlemleri nasıl yapılır konusuna daha detaylı bir şekilde bakacağız.
Ajax'ın Temelleri
Ajax, web sayfalarındaki içeriği hızlı bir şekilde güncelleyebilen teknolojilerden biridir. Bu teknik, web sayfası yeniden yüklenmeden sunucu tarafından sağlanan verilerin alınması ve kullanılması için kullanılır. Bu sayede, kullanıcılara daha hızlı ve daha verimli bir kullanıcı deneyimi sunulur.
Ajax işlemleri, JavaScript ile yapılabildiği gibi, jQuery, AngularJS, React gibi framework'ler ile de kolaylıkla gerçekleştirilebilir. Ancak bu yazımızda, örnekler üzerinden JavaScript kullanarak Ajax işlemlerinin nasıl yapılabileceğini detaylı bir şekilde inceleyeceğiz.
Ajax Kullanarak Basit Bir Veritabanı Listeleme İşlemi
Öncelikle, basit bir örnek üzerinden Ajax işlemlerinin nasıl yapılabileceğini inceleyelim. Bu örnekte, basit bir veritabanından verileri listelemek için Ajax kullanacağız.
Adımlar:
1. İlk olarak, HTML sayfamıza ul etiketi yardımıyla boş bir liste oluşturuyoruz.
```html

```
2. Daha sonra JavaScript kodunu yazıyoruz. Bu kod bloğu sayesinde, veritabanından verileri alacağız ve HTML sayfamızdaki listeye ekleyeceğiz.
```javascript
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
var liste = document.getElementById(liste);
for (var i = 0; i < data.length; i++) {
var li = document.createElement(li);
var text = document.createTextNode(data[i].ad + + data[i].soyad);
li.appendChild(text);
liste.appendChild(li);
}
}
};
xhr.open(GET, veriler.php, true);
xhr.send();
```
3. Yalnızca JavaScript kodunu yazmak yeterli değildir. Veritabanından verileri alacağımız bir veriler.php dosyası oluşturmamız gerekir. Bu dosyanın içeriği şu şekilde olabilir:
```php
$conn = mysqli_connect(localhost, , , );
if (!$conn) {
die(Connection failed: . mysqli_connect_error());
}
$sql = SELECT * FROM kullanicilar;
$result = mysqli_query($conn, $sql);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
echo json_encode($data);
mysqli_close($conn);
?>
```
Bu örnekte, veritabanındaki kullanicilar tablosundaki verileri alıyor ve JSON formatında döndürüyoruz.
Ajax Kullanarak Bir Formun Gönderilmesi Ve Sonucunun Alınması
Diğer bir örnek olarak bir form gönderimi ve sonucunun alınması işlemini ele alalım. Bu örnek için de bir HTML sayfası, JavaScript kod bloğu ve bir PHP dosyası oluşturacağız.
Adımlar:
1. İlk olarak HTML sayfamıza bir form ekleyelim.
```html

Ad:



Soyad:



Gönder

```
2. JavaScript kod bloğunu yazalım. Bu kod bloğu, formun sunucuya gönderilmesi ve sonucunun alınması işlemlerini gerçekleştirecektir.
```javascript
var form = document.getElementById(myForm);
var submitBtn = document.getElementById(submitBtn);
submitBtn.addEventListener('click', function(event) {
event.preventDefault();
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(Sonuç: + this.responseText);
}
}
xhr.open(POST, form.php, true);
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
xhr.send(name= + form.elements['name'].value + &surname= + form.elements['surname'].value);
});
```
3. Son olarak, formun sunucuya gönderilmesi ve sonucunun alınması için bir form.php dosyası oluşturunuz.
```php
$name = $_POST['name'];
$surname = $_POST['surname'];
echo Hoş geldin, . $name . . $surname . !;
?>
```
Bu örnekte, JavaScript kod bloğunun içinde formu ele alarak, sunucuya verileri göndermek için XMLHttpRequest kullanılır. FormData nesnesinde saklanan veriler, sunucu tarafında bir PHP dosyası ile işlenir. Sonuçlar, alert fonksiyonuyla kullanıcıya verilir.
Sonuç
JavaScript kullanarak Ajax işlemleri yapmak oldukça kolaydır ve genellikle web sayfaları için önemli bir gerekliliktir. Yukarıda bahsedilen örnekler, JavaScript kullanarak Ajax işlemleri yapmanın temel adımlarını gösterir. Ancak farklı web geliştirme araçları, framework'ler ve programlama dilleri ile de Ajax işlemleri gerçekleştirilebilir. Bu nedenle, bu konuda farklı örnekler üreterek uygulamaya dönüşmüş halleri gözlemlemek oldukça önemlidir.