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ı;
Normal çalışma ile ajax kullanımı arasında farklar;
Ajax nasıl kullanılır?
2 adet sayfamız olsun. İlk sayfa kodları altta olduğu gibi.
Ajax ile işlem yaptıracağımız sayfa ise aşağıda olduğu gibi.
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ı;
Yardımcı olduysam ne mutlu bana. İyi çalışmalar.
Kaynaklar;
Ö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.
- 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.
Normal çalışma ile ajax kullanımı arasında farklar;
Normal çalışma | AJAX ç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.
Yardımcı olduysam ne mutlu bana. İyi çalışmalar.
Kaynaklar;
AJAX Nedir ve Nasıl Çalışır?
AJAX'ı tanımlamak biraz uzun sürebilir. Bu makalemizi okuyarak AJAX nedir öğrenin ve örneklerle nasıl çalıştığını görün.
www.hostinger.web.tr
PHP - AJAX and PHP
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
How ajax works - javatpoint
how ajax works or flow of ajax working with examples on java, .net and php, using xml and json, asynchronous request handling, ajax example with database and a lot of ajax topics.
www.javatpoint.com
jQuery.ajax() | jQuery API Documentation
api.jquery.com
Son düzenleme: