PHP ve AJAX Oy Verme

AJAX Oy

Bu AJAX örneğinde, web sayfasının yeniden yüklenmeden sonuçları nasıl elde edeceğimizi göstereceğiz.

Şimdiye kadar PHP ve AJAX'ı seviyor musunuz?

Evet:
Hayır:

Bu örnekte dört element bulunmaktadır:

  • HTML formu
  • JavaScript
  • PHP sayfası
  • Sonuçları saklayan metin dosyası

HTML formu

Bu HTML sayfasıdır. Bunu içermektedir: basit bir HTML formu ve JavaScript dosyasına bağlantı:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Şimdiye kadar PHP ve AJAX'ı beğeniyor musunuz?</h2>
<form>
Evet: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
Hayır: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

Örnek Açıklama - HTML Formu

Olduğu gibi, yukarıdaki HTML sayfası, iki seçenekli <div> elementi içeren basit bir HTML formu içerir.

Form böyle çalışır:

  • Kullanıcı "evet" veya "hayır" seçtiğinde bir olay tetiklenir
  • Olay tetiklendiğinde, getVote() fonksiyonu çalıştırılır
  • Bu formun etrafında "poll" adlı <div> bulunmaktadır. getVote() fonksiyonundan veri döndüğünde, dönen veri bu formun yerini alır.

Metin dosyası

Anket programından gelen veriler, metin dosyası (poll_result.txt) içinde saklanır.

Buna benzer bir şekilde:

0||0

İlk rakam "Evet" oyu için, ikinci rakam "Hayır" oyu için gösterilir.

Açıklama:Sadece web sunucunuzun bu metin dosyasını düzenlemesine izin verin. Diğer kişilerin erişim izni vermez, sadece web sunucusu (PHP) için.

JavaScript

JavaScript kodları "poll.js" dosyasında saklanır ve HTML belgesiyle bağlantılıdır:

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Tarayıcı HTTP İsteklerini desteklemiyor")
 return
 } 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged()} 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 
function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}

Örnek Açıklama:

stateChanged() ve GetXmlHttpObject fonksiyonları ile PHP ve AJAX İstekleri Bu bölümdeki örnekler aynıdır.

getVote() fonksiyonu

Kullanıcı HTML formunda "evet" veya "hayır" seçtiğinde bu fonksiyon çalışır.

  1. Sunucuya gönderilecek url'yi (dosya adı) tanımlayın
  2. url'ye parametre ekleyin (vote), parametrede girdi alanının içeriği bulunur
  3. Rastgele bir sayı ekleyerek sunucunun dosya önbelleğini kullanmasını önleyin
  4. GetXmlHttpObject fonksiyonunu çağırarak XMLHTTP nesnesi oluşturun ve nesneye bir değişiklik olduğunda stateChanged fonksiyonunu çalıştırmasını söyleyin
  5. Verilen url ile XMLHTTP nesnesi aç
  6. Sunucuya HTTP istemi gönder

PHP sayfası

JavaScript kodu tarafından çağrılan sunucu sayfası, "poll_vote.php" adlı basit bir PHP dosyasıdır.

<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
 {
 $yes = $yes + 1;
 }
if ($vote == 1)
 {
 $no = $no + 1;
 }
//votes txt file to insert
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" 
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

Örnek Açıklama:

Seçilen değer JavaScript'ten gelir ve ardından şu olur:

  1. "poll_result.txt" dosyasının içeriğini alın
  2. Dosya içeriğini değişkene yerleştirin ve seçilen değişkende 1 artırın
  3. Sonuçları "poll_result.txt" dosyasına yazın
  4. Görsel oylama sonuçlarını çıkarın