Rehber Ajax nedir ve nasıl kullanılır?

Merhababalar. Bugün sizlere Ajax'ın ne olduğunu ve nasıl kullanıldığını anlatmaya çalışacağım.

Öncelikle Ajax nedir?

Ajax
, Asynchronous JavaScript and XML, Türkçe olarak eşzamansız ve XML'in kısaltılmışıdır. Sunucuya gelen herhangi bir isteği arka planda işleyerek web uygulamalarının eşzamanlı olmadan çalışmasına olanak sağlayan bir takım web geliştirme tekniğidir.

Yani bir sayfayı yenilemeden o sayfa üzerinde değişiklik, dinamiklik katmamızı sağlar.

Ajax'ın kullanım alanları;
  • Beğenme, yorumlama, oylama sistemleri.
  • Canlı sobet sistemleri.
  • Otomatik güncellenen haber akışları.
  • Dinamik arama motoru ve önerileri.
  • Dosya yükleme ve yükleme hızını gösterme vb.
Ajax nasıl çalışır?
  • Ana dil için HTML/XHTML ve sunum için CSS.
  • Dinamik görüntü verisi ve etkileşimi için Document Object Model – Doküman Nesne Modeli (DOM).
  • Veri değişimi için XML ve manipülasyonu için ise xslt. Birçok geliştirici JSON kullanmaya başladı çünkü şeklen JavaScript'e daha yakın.
  • Eşzamansız iletişim için XMLHttpRequest objesi.
  • Son olarak, bütün bu teknolojileri bir araya getirmek için JavaScript.

howajaxworks.png


Normal çalışma ile ajax kullanımı arasında farklar;

Normal çalışmaAJAX çalışma modeli
1. Web tarayıcıdan sunucuya bir HTTP isteği yollanır.

2. Sunucu isteği alır ve sonradan veriye erişir.

3. Sunucu istenilen veriyi web tarayıcısına yollar.

4. Web tarayıcısı veriyi alır ve veriyi göstermek için sayfayı yeniler.

Bu süreçte, kullanıcıların tüm işlem bitene kadar beklemekten başka yapabilecekleri bir şey yoktur.

Sadece zaman tüketici değil, ayrıca sunucuya gereksiz bir yüke de neden olur.
1. Tarayıcı bir JavaScript çağrısı yaratır, bu çağrı da daha sonra XMLHttpRequest’i aktif eder.

2. Arkaplanda, web tarayıcısı sunucu için bir HTTP isteği yaratır.

3. Sunucu veriyi alır, erişir ve web tarayıcısına geri yollar.

4. Web tarayıcısı istenilen veriyi alır, veri ise sayfada direkt olarak gözükür. Sayfayı yenilemek gerekmez.

Ajax nasıl kullanılır?

2 adet sayfamız olsun. İlk sayfa kodları altta olduğu gibi.


HTML:
<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str) {
 if (str.length == 0) {
 document.getElementById("txtHint").innerHTML = "";
 return;
 } else {
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange = function() {
 if (this.readyState == 4 && this.status == 200) {
 document.getElementById("txtHint").innerHTML = this.responseText;
 }
 }
 xmlhttp.open("GET", "gethint.php?q="+str, true);
 xmlhttp.send();
 }
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form action="">
 <label for="fname">First name:</label>
 <input type="text" id="fname" name="fname" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>

Ajax ile işlem yaptıracağımız sayfa ise aşağıda olduğu gibi.

PHP:
<?php
// Array with names.
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

// get the q parameter from URL.
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
 $q = strtolower($q);
 $len=strlen($q);
 foreach($a as $name) {
 if (stristr($q, substr($name, 0, $len))) {
 if ($hint === "") {
 $hint = $name;
 } else {
 $hint .= ", $name";
 }
 }
 }
}

// Output "no suggestion" if no hint was found or output correct values.
echo $hint === "" ? "no suggestion" : $hint;
?>

Burada gördüğünüz üzere ilk sayfadan ikinci sayfaya arka planda bir sorgu gitmekte ve sayfayı yenilemeden ilk sayfa dinamik olarak güncellenmekte.

JQuery Ajax kullanımı;


JavaScript:
$.ajax({
 type: "POST",
 url: "mesaj_gonder.php",
 data: { mesaj: message_box },
 success: function(msg){
 alert(msg);
 }
});
  • Type: Veriyi gönderme tipi.
  • URL: Gönderilecek sayfa.
  • Data: Gönderilecek içerik / içerikler.
  • Success: Verinin işlenip geri gelmesi.
Umarım doğru bir şekilde anlatabilmişimdir.
Yardımcı olduysam ne mutlu bana. İyi çalışmalar.

Kaynaklar;
 
Son düzenleme:
Harika rehber elinize sağlık. Sonuç olarak Ajax harici fetch, xmlhttpreq, promise gibi şeyler gereksiz Ajax en basiti ve en moderni şuan.
 
Elinize sağlık hocam. Konu hortlanmış yeni fark ettim.

Harika rehber elinize sağlık. Sonuç olarak Ajax harici fetch, xmlhttpreq, promise gibi şeyler gereksiz Ajax en basiti ve en moderni şu an.

Jquery Ajax arka planda XMLHttpRequest ile istek atıyor. Ayrıca fetch API daha modern. Promise JavaScript'in olmazsa olmazı bir şey "gereksiz" denemez.
 
Son düzenleyen: Moderatör:

Geri
Yukarı