Base de données AJAX
AJAX peut être utilisé pour communiquer dynamiquement avec la base de données.
Exemple de base de données AJAX
L'exemple suivant montrera comment une page Web lit les informations de la base de données via AJAX : Veuillez sélectionner un client dans la liste déroulante ci-dessous :
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>Exécuter l'instance»
Cliquez sur "Exécuter l'instance" " bouton pour afficher les instances en ligne
Explication de l'instance - fonction showCustomer()
Lorsque l'utilisateur sélectionne un client dans la liste déroulante ci-dessus, le nom sera être exécuté est la fonction de "showCustomer()". Cette fonction est déclenchée par l'événement "onchange" :
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code pour IE7+, Firefox, Chrome, Opera , Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code pour IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML =xmlhttp .responseText;
}
}
xmlhttp.open("GET","getcustomer.html?q="+str,true);
xmlhttp.send();
>
showCustomer() effectue les tâches suivantes :
Vérifie si un client a été sélectionné
Crée un objet XMLHttpRequest
Exécuter la fonction créée lorsque la réponse du serveur est prête
Envoyer la requête au fichier sur le serveur
-
Veuillez noter que nous avons ajouté un paramètre q à l'URL (avec le contenu du champ de saisie)
Page du serveur AJAX
La page du serveur appelé par le JavaScript ci-dessus. C'est un fichier PHP nommé "getcustomer.php".
Il est également facile d'écrire des fichiers serveur en PHP ou dans d'autres langages serveur. Voir l'exemple correspondant écrit en PHP.
Le code source dans "getcustomer.php" est chargé d'interroger la base de données puis de renvoyer les résultats à l'aide d'un tableau HTML :
réponse .expires= -1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn =Serveur.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs =Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
faire jusqu'à ce que rs.EOF
pour chaque x dans rs.Fields
réponse.write("<tr><td><b>" & x.name & "</b></td>")
réponse.write("<td>" & x.value & "</td></tr>")
suivant
rs.MoveNext
loop
response.write("</table>")
%>
