Εμφάνιση δεδομένων απο αρχείο php

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

Παρακαλώ αρχίστε να πληκτρολογείτε στα λατινιά το όνομα της πόλης που θέλετε να ταξιδέψετε

Διαθέσιμοι προορισμοί:

Τα ονόματα των πόλεων είναι καταχωρημένα μέσα στον πίνακα $a[...] στο get_towns.php αρχείο, ενώ το ίδιο αρχείο εισάγει τους χαρακτήρες που πληκτρολογεί ο χρήστης στο παραπάνω πεδίο κειμένου και αφού αναζητήσει μέσα στον πίνακα $a[...] επιστρέφει (echo $response;) τα αντίστοιχα ονόματα πόλεων.

Όπως θα διαπιστώσετε στον κώδικα της σελίδας, το get_towns.php καλείτε κάθε φορά που ο χρήστης πληκτρολογεί έναν χαρακτήρα στο πεδίο κειμένου (onkeyup="showHint(this.value)") περνώντας σαν παράμετρο στο php αρχείο τους χαρακτήρες που έχει πληκτρολογήσει ο χρήστης μέχρι εκείνη την στιγμή.

Και για να αναφέρουμε πάλι το τρομερό και φοβερό πλεονέκτημα που προσφέρει η τεχνική AJAX, τονίζουμε ότι αν ο διαχειριστής της σελίδας προσθέσει το όνομα μιας νέας πόλης στον πίνακα $a[...], τότε αυτή η πόλη (αυτή η νέα καταχώρηση) την ίδια στιγμή γίνεται άμεσα διαθέσιμη στον επισκέπτη και θα την εμφανίσει στον browser του χωρίς να χρειαστεί να ανανεώσει την σελίδα!

Ο κώδικας της σελίδας

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253" />
<title>Untitled Document</title>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc) {
   if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera
      xmlhttp=new XMLHttpRequest();
   }
   else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=cfunc;
   xmlhttp.open("GET",url,true);
   xmlhttp.send();
}

function showHint(str) {
   loadXMLDoc("get_towns.php?q="+str,function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
         document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      }
   });
}
</script>
<head>

<body>
<h3>Παρακαλώ αρχίστε να πληκτρολογείτε στα λατινιά το όνομα της πόλης που θέλετε να ταξιδέψετε</h3>
<form action="">Πόλη:
<input id="txt1" onkeyup="showHint(this.value)" type="text" />
</form>
<p><strong>Διαθέσιμοι προορισμοί:</strong>
<span id="txtHint"> </span>
</p>
</body></html>

Δείτε τον κώδικα του get_towns.php

<?php
// Fill up array with names
$a[]="Athens";
$a[]="Thessaloniki";
$a[]="Piraeus";
...
$a[]="Hios";
$a[]="Volos";

//q parameter
$q=$_GET["q"];

if (strlen($q) > 0) {
   $hint=""
   for($i=0; $i
      if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) {
         if ($hint=="") {
            $hint=$a[$i];
         }
         else {
            $hint=$hint." , ".$a[$i];
         }
      }
   }
}

if ($hint == "") {
   $response="no results"
}
else {
   $response=$hint;
}

echo $response;
?>

Μαθήματα AJAX

Εμφάνιση δεδομένων απο αρχείο php

Παρακαλώ αρχίστε να πληκτρολογείτε στα λατινιά το όνομα της πόλης που θέλετε να ταξιδέψετε