Αίτημα με AJAX και PHP

Αίτημα AJAX

Σε αυτό το παράδειγμα AJAX, θα δείξουμε πώς η ιστοσελίδα επικοινωνεί με τον διακομιστή web όταν ο χρήστης εισάγει δεδομένα στο web φόρμα.

Γράψτε το όνομα στο παρακάτω πλαίσιο κειμένου:

Συμβουλές:

Αυτό το παράδειγμα περιλαμβάνει τρεις σελίδες:

  • Απλή φόρμα HTML
  • Συνοδευτικό JavaScript
  • Σελίδα PHP

Φόρμα HTML

Αυτό είναι ένα HTML φόρμα. Περιέχει έναν απλό HTML φόρμα και σύνδεση στο JavaScript:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Όνομα:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Συμβουλές: <span id="txtHint"></span></p>
</body>
</html>

Παράδειγμα περιήγησης - Φόρμα HTML

Ως είδατε, η ανώτερη σελίδα HTML περιέχει έναν απλό φόρμα HTML με ένα πεδίο εισαγωγής με το όνομα "txt1".

Η λειτουργία της φόρμας είναι η εξής:

  1. Όταν ο χρήστης πατηθεί και αφήσει πλήκτρο στο πεδίο εισαγωγής, εκκινείται ένα συμβάν
  2. Όταν εκκινείται το συμβάν, εκτελείται η συνάρτηση με το όνομα showHint()
  3. Περιβάλλον φόρμας υπάρχει ένα <span> με το όνομα "txtHint" που χρησιμοποιείται ως εναλλακτικό στοιχείο δεδομένων που επιστρέφει η συνάρτηση showHint().

JavaScript

JavaScript κώδικας αποθηκεύεται στο αρχείο "clienthint.js", το οποίο συνδέεται με το HTML έγγραφο:

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Ο περιηγητής δεν υποστηρίζει αιτήματα HTTP")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
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("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Παράδειγμα εξήγησης:

Συνάρτηση showHint()

Κάθε φορά που εισάγεται ένας χαρακτήρας στο πεδίο εισαγωγής, η συνάρτηση θα εκτελείται μια φορά.

Αν το κουτί κειμένου έχει περιεχόμενο (str.length > 0), η συνάρτηση θα εκτελείται ως εξής:

  1. Ορισμός της URL που θα αποσταλεί στον διακομιστή (όνομα αρχείου)
  2. Προσθήκη των παραμέτρων του πεδίου εισαγωγής (q) στην URL
  3. Προσθήκη μιας τυχαίας αριθμητικής τιμής για να αποφευχθεί η χρήση αρχείων cache από τον διακομιστή
  4. Κλήση της συνάρτησης GetXmlHttpObject για τη δημιουργία του αντικειμένου XMLHTTP και ενημέρωση του αντικειμένου για την εκτέλεση της συνάρτησης stateChanged όταν εκτυπώνεται το γεγονός
  5. Άνοιγμα του XMLHTTP αντικειμένου με τη δομημένη URL
  6. Αποστολή HTTP αιτήματος στον διακομιστή

Αν το πεδίο εισαγωγής είναι κενό, η συνάρτηση απλώς θα καθαρίσει το περιεχόμενο του κενό μαρκέρ txtHint.

Συνάρτηση stateChanged()

Καθώς το status του αντικειμένου XMLHTTP αλλάζει, εκτελείται αυτή η συνάρτηση.

Όταν ο��态 γίνει 4 (ή "complete"), συμπληρώστε τον κενό μαρκέρ txtHint με το κείμενο της απάντησης.

Συνάρτηση GetXmlHttpObject()

Η εφαρμογή AJAX μπορεί να εκτελεστεί μόνο σε πλήρως υποστηριζόμενους περιηγητές XML.

Ο κώδικας καλεί τη συνάρτηση GetXmlHttpObject().

Η λειτουργία αυτής της συνάρτησης είναι να λύσει το πρόβλημα της δημιουργίας διαφορετικών αντικειμένων XMLHTTP για διαφορετικούς περιηγητές.

Αυτό έχει ήδη εξηγήσει στο προηγούμενο κεφάλαιο.

Σελίδα PHP

Η σελίδα του διακομιστή που καλείται από το JavaScript κώδικα είναι μια απλή σελίδα διακομιστή με το όνομα "gethint.php".

"gethint.php" η κώδικας θα ελέγξει τη σειρά των ονομάτων και θα επιστρέψει τα ονόματα στον πελάτη:

<?php
// συμπληρώστε τη σειρά με ονόματα
$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";
//επιλέξτε τον παράμετρο q από τη διεύθυνση URL
$q=$_GET["q"];
//ζητήστε όλες τις υποδείξεις από τη σειρά αν η μήκος του q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}
//Ρυθμίστε την έξοδο σε "no suggestion" αν δεν βρεθεί κανένα�ντ
//ή στις σωστές τιμές
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//Εκτυπώστε την απάντηση
echo $response;
?>

Αν υπάρχει κείμενο που αποσταλεί από το JavaScript (strlen($q) > 0), τότε:

  1. Βρείτε ονόματα που ταιριάζουν με τα χαρακτήρες που έχουν αποσταλεί από το JavaScript
  2. Αν βρεθούν πολλαπλά ονόματα, περιλαμβάνετε όλα τα ονόματα στη συμβολοσειρά της απάντησης
  3. Αν δεν βρεθεί σύμφωνο όνομα, ρυθμίστε την απάντηση σε "no suggestion"
  4. Αν βρεθεί ένα ή περισσότερα ονόματα, ρυθμίστε την απάντηση σε αυτά τα ονόματα
  5. Αποστολή της απάντησης στο "txtHint" κενό