Σε προηγούμενο ποστ είχα δείξει έναν τρόπο για αναζήτηση-κατά-την-πληκτρολόγηση.
Ο τρόπος εκείνος φόρτωνε εξ' αρχής όλα τα αποτελέσματα και μετά η αναζήτηση γινόταν τοπικά.
Αυτή τη φορά θα δείξω πώς γίνεται να παίρνουμε εκείνη την ώρα τα αποτελέσματα από τον server, κάνοντας ερωτήματα σε μια βάση δεδομένων.
Ιδού λοιπόν το αρχείο html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//to myAjax einai global metabliti k tha xrisimopoieitai ap' oles tis synartiseis
var myAjax;
function createAjax()
{
//to XMLHttpRequest douleuei gia olous tous browsers ektos apo IE6 kai katw
myAjax = new XMLHttpRequest();
//an den exei dimiourgithei
if(!myAjax)
{
//dimiourgoume ena ActiveXObject gia IE6, IE5.5 klp
myAjax = new ActiveXObject("Microsoft.XMLHTTP");
if(!myAjax)
{
//an kai pali den exei dimiourgithei
//tote o xristis pithanotata einai kollimenos stin proistoria
document.getElementById("results").innerHTML = "Get a new browser.";
myAjax = null;
}
}
}
function showResults(query)
{
//elegxoume an exei dimiourgithei to antikeimeno
//gia na mi to ksanadimiourgoume kathe fora
if(!myAjax)
{
createAjax();
}
//an exei dimiourgithei kai den einai null
if(myAjax)
{
//kathe fora pou allazei to readystate tou leme
//na xrisimopoiisei tin parakatw sunartisi
//to ti ginetai stin parakatw synartisi tha to eksigisw parakatw
myAjax.onreadystatechange = function()
{
if(myAjax.readyState == 4 && myAjax.status == 200)
{
if(myAjax.responseText)
{
document.getElementById("results").innerHTML = myAjax.responseText;
}
else
{
document.getElementById("results").innerHTML = "No results, try again.";
}
}
}
if(query != "")
{
//edw dilwnoume ti methodo tha xrisimopoiisoume (GET, POST)
//to onoma/path tou arxeiou ston server
//kai to an einai tha einai asygxroni H oxi i metadosi
myAjax.open("GET","ajax-search.php?q="+query, true);
//kai telos stelnoume to request
myAjax.send();
}
else
{
document.getElementById("results").innerHTML = "";
}
}
}
//auti i sunartisi apla einai eye-candy, den exei na kanei tpt me to ajax search
//mporeite na tin paraleipsete, apla variemai na ti svinw
function checkContent(myString)
{
if(myString == "Type here to search")
{
document.getElementById("searchBox").value = "";
}
else if(myString == "")
{
document.getElementById("searchBox").value = "Type here to search";
}
}
</script>
</head>
<body>
<div align="center">
<input type="text" id="searchBox" value="Type here to search" onfocus="checkContent(this.value)" onblur="checkContent(this.value)" onkeyup="showResults(this.value)" />
<br />
<div id="results">
</div>
</div>
</body>
</html>
Ας δούμε αναλυτικά τι γίνεται σε κάθε γραμμή της συνάρτησης που βάζουμε στο onreadystatechange():
if(myAjax.readyState == 4 && myAjax.status == 200)
Το αντικείμενό μας, έχει μερικές ιδιότητες, όπως status, readyState, responseText κλπ, τα οποία αποθηκεύουν διάφορα χρήσιμα πράγματα.
Πχ, το readyState αποθηκεύει την κατάσταση του αντικειμένου μας.
Παίρνει τιμές από 0 ως 4 οι οποίες σημαίνουν:
0: Δεν έχει ξεκινήσει/σταλεί κάποιο request στον σέρβερ.
1: Έχει γίνει η σύνδεση με τον σέρβερ
2: Έχει γίνει αποδεκτό το request από τον σέρβερ
3: Γίνεται επεξεργασία του request
4: Τελείωσε η επεργασία του request και είναι έτοιμη η απάντηση.
Το status αποθηκεύει την κατάσταση με κωδικούς HTTP.
Πχ το status 200 που ελέγχουμε εδώ, σημαίνει ότι όλα είναι ΟΚ.
Μπορούσαμε να έχουμε status 404 που σημαίνει ότι η σελίδα δεν βρέθηκε.
Οπότε με λίγα λόγια, εδώ ζητάμε να γίνουν οι παρακάτω ενέργειες, όταν το status είναι 200 και το readyState είναι 4.
if(myAjax.responseText)
{
document.getElementById("results").innerHTML = myAjax.responseText;
}
Όταν τελειώνει ο server με την επεξεργασία του request, στέλνει μια απάντηση. Την απάντηση μπορούμε είτε να την πάρουμε ως string με το responseText είτε ως XML με το responseXML.
Στην περίπτωση εδώ όπως θα δείτε και στο αρχείο php παρακάτω, η απάντηση του server είναι απλό hmtl οπότε χρησιμοποιούμε το responseText, το οποίο το βάζουμε στο div των αποτελεσμάτων.
Σε περίπτωση που ο server δεν στείλει κάποια απάντηση τότε εμφανίζουμε το μήνυμα σφάλματος:
else
{
document.getElementById("results").innerHTML = "No results, try again.";
}
Παρακάτω ακολουθεί το αρχείο php, το οποίο δεν κάνει τίποτα περισσότερο από το να συνδέεται στη βάση, να κάνει ένα ερώτημα σε έναν πίνακα και να εμφανίζει τα αποτελέσματα.
<?php
$con = mysql_connect("localhost", "root", "root");
if($con)
{
$db = mysql_select_db("test-ajax",$con);
if($db)
{
$q = $_GET["q"];
if(!empty($q))
{
$query = "SELECT * FROM users WHERE username LIKE '$q%' ";
$res = mysql_query($query);
if($res)
{
while ($row = mysql_fetch_object($res))
{
echo $row->username . "<br />";
}
}
}
else
{
echo "No results";
}
}
}
?>
Το παραπάνω έχει δοκιμαστεί και δουλεύει σε Safari, Chrome και Firefox.
Τα αρχεία μπορείτε να τα κατεβάσετε εδώ:
http://www.mediafire.com/file/uxu8o2477mgpcay/ajax-search.zip
Σχόλια και προτάσεις ευπρόσδεκτα.
No comments:
Post a Comment