Ajax Nedir?

Ajax Nedir? : Ajax, jQuery yazılımının sadece bir fonksiyodur. Bu fonksiyonun kullanımı dinamik form gönderme işlemlerinde & sayfa yenilemeden veri gönderme işlemlerinde kullanılmaktadır. Sayfa yenileme yapmadan butona tıkladığınız anda belirlenmiş bir  dinamik bir sayfaya POST veya GET şekilde gönderimi yapılıp cevabı HTML sayfasında göstermektedir.

Ajax fonksiyonu çıkış nedenlerinden birisi de sayfanın her hangi bir yere gidip yenilenmesi engellenmesidir. Bu tarz dinamik veri gönderme işlemlerinde kullanılmaktadır.

Ajax Nasıl Çalışır?

Ajax’ın nasıl çalıştığı hakkında detaylı bir şekilde bilgi vermek istiyorum çünkü herkes bu konu hakkında bir şeyler biliyor ama tam net ne işe yaradığını ve nasıl çalıştığını çoğu kişi bilmiyor.

Ajax jQuery fonksiyonudur ve .js dosyası içinde yazılır. Çağrıldığı sayfa için çalışmaktadır. Dilerseniz .js dosyası içine yerleştirmeden sayfa içinde <script> etiketi içinde de yazabilirsiniz.

Bir formumuzun olduğunu düşünelim;

  • Form üzerinden gönder butonuna basılır.
  • Gönder butonu jQuery içindeki Ajax‘ı tetikler.
  • Ajax belirlenen dinamik sayfadan gönderilen parametrelerle yapılan işlemleri alır.
  • Bulunduğu sayfanın her hangi bir elementinin içine dinamik sayfada gerçekleşen olayları basar.

Ajax’ın çalışma mantığı böyledir kısaca belirtecek olursam html sayfadan dinamik sayfa gönderilen verileri html sayfa içinde yazdırma.

AJAX Html Form
AJAX Html Form

 

Ajax Örneği

HTML bir iletişim formumuz olsun ve dinamik olarak sayfa yenilenmeden içindeki verileri gonder.php dosyasına gönderim ve bu gonder.php dosyasında verileri işleyip ve mail olarak gönderip form’un gönderilip gönderilmediğini ekrana yazalım. Yapılacak işlemleri aşağıda maddeler halinde belirtiyorum.

NOT: Verilerin işleneceği dinamik sayfa kimse tarafından bilinmez kullanıcı tarafına sunulmaz sadece dinamik işlemleri gerçekleştirmek için kullanılır.

  • HTML Form Oluşturma
  • HTML Sayfa İçinde Ajax Kodu Yazma
  • PHP Dinamik Sayfanın oluşturulması

HTML Form Oluşturma

İçinde Ad Soyad, Telefon, Konu ve Mesaj bulunan bir form oluşturalım. Aşağıda HTML kodlarını sizinle paylaşıyorum.

HTML Sayfa İçinde Ajax Kodu Yazma

Html sayfa içinde Ajax kodu yazarak form verilerini dinamik sayfa içine gönderme işlemi yapıyoruz. Bu işlem bize sayfa yenileme işlemi yapmadan form gönderimi imkanı vermektedir.

Kod (index.html):

<html>
<head>
    <meta charset="utf-8">
</head>
<style>
td{padding:5px 10px;}
</style>
<body>
	<form method="post" action="" enctype="multipart/form-data">
		<table border="0">
			<tr>
				<td><label for="">Ad Soyad</label></td>
				<td><input type="text" value="" name="adsoyad" id="adsoyad" /></td>
			</tr>
			<tr>
				<td><label for="telefon">Telefon</label></td>
				<td><input type="text" value="" name="telefon" id="telefon" /></td>
			</tr>
			<tr>
				<td><label for="konu">Konu</label></td>
				<td><input type="text" value="" name="konu" id="konu" /></td>
			</tr>
			<tr>
				<td><label for="mesaj">Mesaj</label></td>
				<td><textarea name="mesaj" id="mesaj"></textarea></td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="Gönder" name="gonder" id="gonder" />
					<input type="hidden" value="1" name="gizli" />
				</td>
			</tr>
			<tr>
				<div id="cikti"></div>
			</tr>
		</table>
	</form>
	
	<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script>
		$( document ).ready(function() {
			$( "#gonder" ).on( "click", function() {
				$.ajax({
					type: 'POST',
					url: 'gonder.php',
					data: $('#iletisim-formu').serialize(),
					success: function(ajaxCevap) {
						$('#cikti').html(ajaxCevap);
					}
				});
			});
		});
	</script>
</body>
</html>

 

PHP Dinamik Sayfanın Oluşturulması

Bu PHP sayfası web sitesinin içinde hiç bir kullanıcıya gösterilmeyecektir. gonder.php dosyasının asıl amacı ajax üzerinden gelen verileri işlemek ve mail gönderimi yapmak için kullanılacaktır.

Kod (gonder.php):

<?php
$to = "gonderilecek-mail@gmail.com";
$subject = $_POST["konu"];

$message = '
	<html>
	<head>
	<title>Gönderilen Mail</title>
	</head>
	<body>
	<p>Web Sitesinden bir mesaj var!</p>
	<table>
		<tr>
			<td>Ad Soyad</td>
			<td>'.$_POST["adsoyad"].'</td>
		</tr>
		<tr>
			<td>Telefon</td>
			<td>'.$_POST["telefon"].'</td>
		</tr>
		<tr>
			<td>Konu</td>
			<td>'.$_POST["konu"].'</td>
		</tr>
		<tr>
			<td>Mesaj</td>
			<td>'.$_POST["mesaj"].'</td>
		</tr>
	</table>
	</body>
	</html>
';

// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// More headers
$headers .= 'From: <gonderilecek-mail@gmail.com>' . "\r\n";
$headers .= 'Cc: ccmail@gmail.com' . "\r\n";

if(mail($to,$subject,$message,$headers)){
	echo "Mesajınız başarıyla gönderilmiştir.";
}
else{
	echo "Mesajınız gönderilemedir.";
}
?>
Ajax Nedir?
Etiketlendi: