PHP AJAX KULLANIMI (Asynchronous Javascript And Xml)

Tarhi : 13-02-2020 01:09:36 | Yazar : ÇAĞLAR BOSTANCI

Ajax php ve birçok sunucu dilinde kullanılmaktadır. Tercih edilmesinin sebebi ise sayfa tekrar yüklenmeden
post get işlemleri yaparak ilgili php dosyası çalıştırılıyor ve sonuc ilgili alana basılıyor. Ajax kullanımı
javascript ilede olmaktadır. Biz şuan Jquery ile yapacağı. Tabi jquery de javascriptin bir kütüphanesidir.
Ajax kullanırken yapmanız gereken en önemli şeylerden biri bir post php oluşturun ve oraya gönderin. Post.php
sayfasında dışarıdan gelen saldırılara karşı önemlemlerinizi alın. Post edilmeden önce form açıldığında
bir tane key oluşturup session’a koyun ajaxda da bu session ve güvenlik key doğrulaması yapın. Ben burada
biraz baside indirgedim. Öğrendikten sonra sizlerde durmayıp geliştireceksinizdir.

Metodlar

$.ajax	Bir takım ajax parametrelerini belirlememizi sağlar.
$.ajaxSetup()	Sayfa içerisinde tekrar eden ajax parametrelerini bir çatı altında toplar.
.serialize()	Form elementindeki nesneleri seri halde elde etmemizi sağlar.
.serializeArray()	Form nesnelerinin bilgilerini bir dizi haline getirir.

$.Ajax Metotdu kullanımı

beforeSend	Talep gönderilmeden önce neler yapılacağı tanımlanır.
complete	Talebin işlenim sonucunun dönmesiyleneler yapılacağı tanımlanır.
contentType	Gönderilen bilginin içeriğini tipini bilirlenir. Hiç birşey yazılmaz ise varsayılan ‘application/x-www-form-urlencoded; charset=UTF-8’ dir;
converters	Gelen verinin türünü bir başka türe çevirmede kullanılır.
data	İşlem yapacak sayfaya gönderilen verileri barınıdırır.
dataType	Sunucundan dönecek olan veririnin tipini belirlememizi sağlar. (xml,html,json,script,text)
error(jqXHR,textStatus,errorThrown)	İstektek bulunulurken oluşacak hataları ve türlerini bilirler.
statusCode	İstek esnasında oluşabilecek http hatalarında nelere yapılacağını bilirler.
success	Yapılan ajax işleminin başarılı olup olmadığını kontrol etmemizi sağlar.
type	Gönderilen veri türünün tipini belirler. GET veya POST dur. Varsayılan get tir.
url	İstekte bulunulacak sayfayı belirlememizi sağlar.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
<form id="veriGonder" onSubmit="return false">
	<input type="text" name="adi" placeholder="Adınız">
    <input type="text" name="soyadi" placeholder="Soyadi">
    <button name="gonder" id="formVeri">VERİ GÖNDER</button>
</form>
<div id="veriSonucu"></div>

<button id="veriCek1" name="veriCek">VERİ ÇEK 1</button><br>
<button id="veriCek2" name="veriCek">GET İLE VERİ GÖNDER</button><br>
<button id="ajaxSetup" >AJAX SETUP</button><br>
<form onSubmit="return false" id="serial">
	<input type="text" name="kullaniciAdi" placeholder="Kullanıcı Adı">
    <input type="password" name="sifre" placeholder="Şifre">
    <input type="submit" name="gonder"  id="gonder" value="Giriş yap">
</form>
<script type="text/javascript">
$("#veriCek1").click(function(){
	$.ajax({
		url:'vericek1.php',
		success: function(sonuc){
			$("#veriSonucu").html(sonuc);
			}
		});
	});
	//*******************************************************/


$("#veriCek2").click(function(){
	$.ajax({
		type:"GET",
		url:"vericek2.php",
		data:{adi:"çağlar",soyadi:"Bostancı",gun:"2018-02-11"},
		success: function(sonuc){
			$("#veriSonucu").html(sonuc);
			}	
		
		});
	});
	/***************************************************************************/
$("#formVeri").click(function(){
	var veriler="kulName="+$('[name="adi"]').val()+"&kulSurName="+$('[name="soyadi"]').val();
	var ajax=$.ajax({
		type:"GET",
		url:"vericek3 .php",
		data:veriler,
		success: function(sonucMesaj){
			 $("#veriSonucu").html(sonucMesaj);
			}
		});//ajax bitti
		ajax.done(function(sonucMesaj){
			$("#veriSonucu").html(sonucMesaj);
			});
		ajax.fail(function(jqXHR,textStatus){
			$("#veriSonucu").html("Üzgünüm bir hata oluştu :"+textStatus);
			
			});
			/*
			bir diğer kullanımı
			$.ajax({
		type:"GET",
		url:"vericek3 .php",
		data:veriler,
		success: function(sonucMesaj){
			 $("#veriSonucu").html(sonucMesaj);
			}
		}).done(function(sonucMesaj){
			$("#veriSonucu").html(sonucMesaj);
			}).fail(function(jqXHR,textStatus){
			$("#veriSonucu").html("Üzgünüm bir hata oluştu :"+textStatus);
			
			});
			
			
			
			
			
			*/
	});
	/*****************************$.ajaxSetup Kullanımı**************************/
	$("#ajaxSetup").click(function(){
		
		//BİRDEN ÇOK AJAX İŞLEMİNDE TEKRAR EDEN BİLGİLERİ BİR ÇATI ALTINDA TOPLAR
		$.ajaxSetup({
			url:"vericek4.php",
			type:"GET"
			});
			$.ajax({
				data:{adi:"çağlar",soyadi:"Bostancı",gun:"2018-02-11"},
				success: function(sonuc1){
					$("#veriSonucu").html(sonuc1);
					}
				});	
			$.ajax({
				data:{dogum:"1988",dogumyeri:"Kırşehir",yas:"32"},
				success: function(sonuc2){
					$("#veriSonucu").append(sonuc2);
					}
				});	
				
				
			
		});
		/****************form serialize kullanımı**********************/
		
	$("#gonder").click(function(){
	$.ajax({
		type:"POST",
		url:"vericek5.php",
		data:$("#serial").serialize(),
		dataType:"html",
		beforeSend: function(){// istek işlemi gerçekleşmeden önce
			$("#gonder").attr("disabled",true);
			$("#veriSonucu").html("<img src='caglarbostanci-com-tr-sayfa-yukleniyor.gif'>")
			},
		success: function(sonuc){
			$("#veriSonucu").html(sonuc);
			},
		complete: function(){//istem gerçekleştikten sonra yapılması gerekenler.
			$("#gonder").attr("disabled",false);
			},
		statusCode:{
			//html hatalarında yapılacakları belirlememizi sağlar.
			400:function(){
				$("#veriSonucu").html("İstek hatalı");
				},
			401:function(){
				$("#veriSonucu").html("İstek için kimlik doğrulaması gerekiyor.");
				},
			404:function(){
				$("#veriSonucu").html("Buralar çok ıssız.");
				}
			
			},
			error: function(jqXHR,textStatus){
				$("#veriSonucu").html(textStatus);
				}
		
		});
	});
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<button name="gonder" id="formVeri">VERİ GÖNDER</button>

</form>

<button id="veriCek2" name="veriCek">GET İLE VERİ GÖNDER</button><br>

<button id="ajaxSetup" >AJAX SETUP</button><br>

</form>

$("#veriCek1").click(function(){

$.ajax({

url:'vericek1.php',

success: function(sonuc){

$("#veriSonucu").html(sonuc);

}

});

//*******************************************************/

$("#veriCek2").click(function(){

$.ajax({

type:"GET",

url:"vericek2.php",

data:{adi:"çağlar",soyadi:"Bostancı",gun:"2018-02-11"},

success: function(sonuc){

$("#veriSonucu").html(sonuc);

}

});

/***************************************************************************/

$("#formVeri").click(function(){

var veriler="kulName="+$('[name="adi"]').val()+"&kulSurName="+$('[name="soyadi"]').val();

var ajax=$.ajax({

type:"GET",

url:"vericek3 .php",

data:veriler,

success: function(sonucMesaj){

$("#veriSonucu").html(sonucMesaj);

}

});//ajax bitti

ajax.done(function(sonucMesaj){

$("#veriSonucu").html(sonucMesaj);

});

ajax.fail(function(jqXHR,textStatus){

$("#veriSonucu").html("Üzgünüm bir hata oluştu :"+textStatus);

});

bir diğer kullanımı

$.ajax({

type:"GET",

url:"vericek3 .php",

data:veriler,

success: function(sonucMesaj){

$("#veriSonucu").html(sonucMesaj);

}

}).done(function(sonucMesaj){

$("#veriSonucu").html(sonucMesaj);

}).fail(function(jqXHR,textStatus){

$("#veriSonucu").html("Üzgünüm bir hata oluştu :"+textStatus);

});

/*****************************$.ajaxSetup Kullanımı**************************/

$("#ajaxSetup").click(function(){

//BİRDEN ÇOK AJAX İŞLEMİNDE TEKRAR EDEN BİLGİLERİ BİR ÇATI ALTINDA TOPLAR

$.ajaxSetup({

url:"vericek4.php",

type:"GET"

});

$.ajax({

data:{adi:"çağlar",soyadi:"Bostancı",gun:"2018-02-11"},

success: function(sonuc1){

$("#veriSonucu").html(sonuc1);

}

});

$.ajax({

data:{dogum:"1988",dogumyeri:"Kırşehir",yas:"32"},

success: function(sonuc2){

$("#veriSonucu").append(sonuc2);

}

});

/****************form serialize kullanımı**********************/

$("#gonder").click(function(){

$.ajax({

type:"POST",

url:"vericek5.php",

data:$("#serial").serialize(),

dataType:"html",

beforeSend: function(){// istek işlemi gerçekleşmeden önce

$("#gonder").attr("disabled",true);

$("#veriSonucu").html("<img src='caglarbostanci-com-tr-sayfa-yukleniyor.gif'>")

success: function(sonuc){

$("#veriSonucu").html(sonuc);

complete: function(){//istem gerçekleştikten sonra yapılması gerekenler.

$("#gonder").attr("disabled",false);

statusCode:{

//html hatalarında yapılacakları belirlememizi sağlar.

400:function(){

$("#veriSonucu").html("İstek hatalı");

401:function(){

$("#veriSonucu").html("İstek için kimlik doğrulaması gerekiyor.");

404:function(){

$("#veriSonucu").html("Buralar çok ıssız.");

}

error: function(jqXHR,textStatus){

$("#veriSonucu").html(textStatus);

}

});

</script>

</body>

</html>

vericek1.php

<?php 
echo "İlk ajax işlemi başarıyla tamamlandı.";
?>

<?php

echo "İlk ajax işlemi başarıyla tamamlandı.";

vericek2.php

<?php 
print_r($_GET);
?>

<?php

print_r($_GET);

vericek3.php

<?php 
print_r($_GET);
?>

<?php

print_r($_GET);

vericek4.php

<?php 
print_r($_GET);
?>

<?php

print_r($_GET);

vericek5.php

<?php 
sleep(1);
print_r($_POST);

?>

<?php

sleep(1);

print_r($_POST);

İlgili

JQUERY

PHP AJAX KULLANIMI (Asynchronous Javascript And Xml)

Hemen Başla

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

PHP AJAX KULLANIMI (Asynchronous Javascript And Xml)