PHP AJAX

PHP ve AJAX ile sunucu iletişimi

Aşağıdaki örnek, kullanıcı seçim kutusunda bir değişiklik yaptığında, bir web sayfasının sunucu ile haberleşmesini göstermektedir.

Aşağıdaki dosya bir web tarayıcısında ilk açıldığında, bir etiket (Adı:), isimlerin seçilebileceği bir seçim kutusu ve içinde lname id değerine sahip bir paragraf elemanı (Soyadı:) gösterilir.

Kullanıcı seçim kutusundan bir isim seçtiğinde, işlemler aşağıdaki sıra ile gerçekleşir:

İlk olarak, showLastName() isimli Javascript fonksiyonu, seçim kutusunun seçili olan değeri str isimli parametre olarak geçirilerek, çalıştırılır.
Fonksiyona geçirilen değer boş bir karakter dizisi ise, lname id değerine sahip html elemanına boş bir karakter dizisi atanır ve fonksiyondan çıkılır.
İşlem normal bir şekilde devam ederse, bir XMLHttpRequest nesnesi oluşturulur.
Sunucunun döndüreceği değer hazır olduğunda çalıştırılacak fonksiyon oluşturulur.
İstek, name isimli bir parametreye str değerini geçirerek, sunucudaki index.php PHP dosyasına gönderilir.
Bu örnekte PHP ve AJAX işlemlerinin her ikisi için index.php dosyası kullanılmaktadır. İstenirse, AJAX işlemleri için farklı bir dosya kullanılabilir.
İsteği alan index.php dosyası, name isimli bir parametre tanımlanıp tanımlanmadığını kontrol eder.
Parametre tanımlandığı için, $names adlı dizi içinde bu parametre değeri anahtar olarak varsa, bu anahtara karşılık gelen değeri yoksa, "Bulunamadı" ifadesini ekrana yazar.
Böylece, sunucu tarafında işlem tamamlanmış olur ve elde edilen değer geri döndürülür.
showLastName() fonksiyonu içinde oluşturulan ve sunucunun bir sonuç döndürmesini bekleyen fonksiyon devreye girer ve gönderilen değeri lname id değerine sahip html elemanına atar.
```
document.getElementById("lname").innerHTML = xmlhttp.responseText;
```

Seçim kutusundan "Nedim" ismini seçtiğimizde tarayıcı ekran görüntüsü aşağıdaki şekilde olacaktır:

index.php


<html>
<head>
<script>
function showLastName(str) {
  if(str.length==0) {
     document.getElementById("lname").innerHTML = "";
     return;
  } 
  else {
     var xmlhttp = new XMLHttpRequest();
     
	 xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState==4 && xmlhttp.status==200) {
           document.getElementById("lname").innerHTML = xmlhttp.responseText;
        }
     };
    
	 xmlhttp.open("GET", "index.php?name=" + str, true);
     xmlhttp.send();
  }
}
</script>

</head>
<body>

<?php 
  if(isset($_GET['name'])) {
	 $param = $_GET['name'];
	 $names = [ "Ahmet" => "Sakin", "İbrahim" => "Şen", "Leyla" => "Özer", "Mecnun" => "Uzak", "Nedim" => "Tezel" ];
	 echo array_key_exists($param, $names) ? $names[$param] : 'Bulunamadı';
  }   
  else {
?>

  <label for="fname">Adı:</label>
  <select id="fname" name="fname" onchange="showLastName(this.value)">
     <option value=""></option>
	 <option value="Ahmet">Ahmet</option>
	 <option value="İbrahim">İbrahim</option>
	 <option value="Leyla">Leyla</option>
	 <option value="Mecnun">Mecnun</option>
	 <option value="Nedim">Nedim</option>
  </select>  
	
  <p><span style="font-weight:bold;">Soyadı:</span> <span id="lname"></span></p>

<?php } ?>

</body>
</html>