AJAX Exemple de base de données


AJAX peut être utilisé pour communiquer dynamiquement avec une base de données.


Exemple de base de données AJAX

L'exemple ci-dessous montrera comment une page web peut lire des informations à partir d'une base de données en utilisant AJAX : Veuillez sélectionner un client dans la liste déroulante ci-dessous :

Exemple


Les informations client seront listées ici...

Essayez-le vous-même »


Exemple expliqué - La fonction showCustomer()

Lorsqu'un utilisateur sélectionne un client dans la liste déroulante ci-dessus, la fonction nommée "showCustomer()" est exécutée. Cette fonction est déclenchée par l'événement "onchange" :

function showCustomer(str) { var xmlhttp; if (str == "") { document.getElementById("txtHint").innerHTML = ""; return } if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest() } else { 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() }

La fonction showCustomer() effectue les tâches suivantes :

  • Vérifier si un client a été sélectionné
  • Créer un objet XMLHttpRequest
  • Exécutez la fonction créée lorsque la réponse du serveur est prête
  • Envoyer la requête à un fichier sur le serveur
  • Notez que nous avons ajouté un paramètre q (avec le contenu du champ de saisie) à l'URL

La page serveur AJAX

La page serveur appelée par le JavaScript ci-dessus est un fichier PHP nommé "getcustomer.php".

Il est également facile d'écrire le fichier serveur en PHP, ou dans d'autres langages serveur. VoirL'exemple correspondant écrit en PHP。

Le code source dans "getcustomer.php" est chargé d'interroger la base de données, puis renvoie les résultats dans un tableau HTML :

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.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>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>
Autres extensions