Live Search AJAX με PHP
- Προηγούμενη σελίδα AJAX responseXML
- Επόμενη σελίδα AJAX RSS Reader
AJAX μπορεί να παρέχει στους χρήστες μια πιο φιλική και υψηλότερη αλληλεπίδραση εμπειρία αναζήτησης.
AJAX Live Search
Σε αυτό το παράδειγμα AJAX, θα δείξουμε μια αναζήτηση σε πραγματικό χρόνο.
Η αναζήτηση σε πραγματικό χρόνο έχει πολλά πλεονεκτήματα σε σύγκριση με την αναζήτηση που χρησιμοποιείται συχνά:
- Τα αποτελέσματα εμφανίζονται καθώς πληκτρολογείτε τα δεδομένα
- Τα αποτελέσματα φιλτράρονται καθώς συνεχίζετε να πληκτρολογείτε τα δεδομένα
- Αν τα αποτελέσματα είναι πολύ λίγα, μπορείτε να αφαιρέσετε χαρακτήρες για να��ήσετε μια ευρύτερη γκάμα
Αναζητήστε σελίδες στο CodeW3C.com στο παρακάτω κουτί κειμένου
Αυτό το παράδειγμα περιλαμβάνει τέσσερα στοιχεία:
- Απλή φόρμα HTML
- Το JavaScript
- Σελίδα PHP
- Έγγραφο XML
Σε αυτό το παράδειγμα, τα αποτελέσματα βρίσκονται σε ένα αρχείο XML (links.xml) για να γίνει η αναζήτηση. Για να κάνουμε τον παράδειγμα μας μικρό και απλό, παρέχουμε μόνο 8 αποτελέσματα.
Φόρμα HTML
Αυτό είναι η σελίδα HTML. Περιέχει μια απλή φόρμα HTML, τα CSS στυλ για αυτή τη φόρμα, και το σύνδεσμο προς το JavaScript:
<html>
<head>
<script src="livesearch.js"></script>
<style type="text/css">
#livesearch
{
margin:0px;
width:194px;
}
#txt1
{
margin:0px;
}
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
Παράδειγμα περιήγησης - Φόρμα HTML
Επιπλέον, όπως βλέπετε, η σελίδα HTML περιέχει μια απλή φόρμα HTML, η οποία περιέχει ένα κουτί κειμένου με το όνομα "txt1".
Αυτό είναι πώς λειτουργεί η φόρμα:
- Αναζητείται συμβάν όταν ο χρήστης πατά και αφήνει το πλήκτρο στο κουτί κειμένου
- Εκτελείται η συνάρτηση showResult() όταν εκτυπώνεται το συμβάν
- Ακολουθεί η φόρμα, υπάρχει ένα στοιχείο <div> με το όνομα "livesearch" που χρησιμοποιείται ως δοκιμαστικό σημείο για τα δεδομένα που επιστρέφει η funciton showResult()
Το JavaScript
Το JavaScript κώδικας αποθηκεύεται σε ένα αρχείο "livesearch.js" που συνδέεται με το HTML έγγραφο:
var xmlHttp
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").
innerHTML="";
document.getElementById("livesearch").
style.border="0px";
επιστρέφει
}
xmlHttp=GetXmlHttpObject()
αν (xmlHttp==null)
{
alert ("Ο περιηγητής δεν υποστηρίζει αιτήματα HTTP")
επιστρέφει
}
var url="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
συνάρτηση stateChanged()
{
αν (xmlHttp.readyState==4 ή xmlHttp.readyState=="complete")
{
document.getElementById("livesearch").
innerHTML=xmlHttp.responseText;
document.getElementById("livesearch").
style.border="1px solid #A5ACB2";
}
}
συνάρτηση 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");
}
}
επιστρέφει xmlHttp;
}
Παράδειγμα εξήγησης:
GetXmlHttpObject με Αίτημα AJAX με PHP με τον ίδιο παράδειγμα
Συνάρτηση showResult()
Η συνάρτηση εκτελείται κάθε φορά που εισάγεται ένας χαρακτήρας στο κουτί κειμένου
Αν δεν υπάρχει εισαγωγή στο πεδίο κειμένου (str.length == 0), η συνάρτηση ορίζει το πεδίο επιστροφής ως κενό και διαγράφει οποιαδήποτε περίβληση γύρω από αυτό
Ωστόσο, αν υπάρχει εισαγωγή στο πεδίο κειμένου, η συνάρτηση εκτελεί:
- Ορισμός του url που θα στείλει στον διακομιστή (όνομα αρχείου)
- Προσθήκη του παραμέτρου (q) που περιέχει το περιεχόμενο του πεδίου εισαγωγής στο url
- Προσθήκη τυχαίου αριθμού για να αποφευχθεί η χρήση αρχείων προσωρινής αποθήκευσης από τον διακομιστή
- Κλήση της συνάρτησης GetXmlHttpObject για τη δημιουργία του αντικειμένου XMLHTTP και ενημέρωση της συνάρτησης stateChanged όταν εκτυπώνεται μια αλλαγή
- Χρήση της δοθείσας url για να ανοίξει το αντικείμενο XMLHTTP
- Αποστολή HTTP αιτήματος στον διακομιστή
Συνάρτηση stateChanged()
Η συνάρτηση stateChanged() εκτελείται κάθε φορά που αλλάζει οzustάντα του XMLHTTP αντικειμένου.
Όταν η κατάσταση γίνει 4 (ή "complete") χρησιμοποιείται το κείμενο της απάντησης για να γεμίσει το txtHint placeholder και να οριστεί περιθώριο γύρω από το πεδίο επιστροφής.
Σελίδα PHP
Ο διακομιστής σελίδα που καλείται από το JavaScript κώδικα είναι το αρχείο PHP με το όνομα "livesearch.php".
"livesearch.php" κώδικες ελέγχουν το XML αρχείο "links.xml". Το αρχείο αυτό περιέχει τίτλους και URL από ορισμένες σελίδες στο codew3c.com.
Αυτά τα κώδικες θα αναζητήσουν τίτλους που ταιριάζουν στη φράση αναζήτησης στο αρχείο XML και θα επιστρέψουν αποτελέσματα ως HTML:
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1)
{
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
//Ορίστε την έξοδο ως "no suggestion" αν δεν βρεθεί καμία υποδείξη
//ή στους σωστούς τιμές
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//Εκτυπώστε την απάντηση
echo $response;
?>
Παράδειγμα εξήγησης:
Αν αποσταλεί οποιοσδήποτε κείμενο από το JavaScript (strlen($q) > 0), συμβαίνει:
- Ο PHP δημιουργεί ένα αντικείμενο XML DOM για το αρχείο "links.xml"
- Προσπαθεί να διαβαστεί ολόκληρος ο στοιχείο "title" (nodetypes = 1), για να βρεθεί η συμφωνία με τα δεδομένα που αποστέλλονται από το JavaScript
- Βρίσκεται η σύνδεση που περιέχει το σωστό title και ορίζεται ως μεταβλητή "$response". Αν βρεθεί περισσότερες από μια συμφωνίες, όλες οι συμφωνίες προστίθενται στη μεταβλητή
- Αν δεν βρεθεί συμφωνία, η μεταβλητή $response ορίζεται ως "no suggestion"
- $result είναι η έξοδος που στέλνεται στον "livesearch" placeholder
- Προηγούμενη σελίδα AJAX responseXML
- Επόμενη σελίδα AJAX RSS Reader
