AJAX se puede utilizar para la comunicación interactiva con una base de datos.
AJAX bases de datos ejemplo
El siguiente ejemplo demostrará cómo una página web puede capturar información desde una base de datos con AJAX:
Ejemplo Explicación - El showCustomer() Función
Cuando un usuario selecciona un cliente en la lista desplegable de arriba, una función llamada "showCustomer()" se ejecuta. La función se activa por el "onchange" evento:
showCustomer
function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState
== 4 && xhttp.status == 200) {
document.getElementById("txtHint").innerHTML
= xhttp.responseText;
}
};
xhttp.open("GET",
"getcustomer.asp?q="+str, true);
xhttp.send();
}
El showCustomer() la función hace lo siguiente:
- Compruebe si se ha seleccionado un cliente
- Crear un XMLHttpRequest objeto
- Cree la función a ejecutar cuando la respuesta del servidor está listo
- Enviar la solicitud fuera a un archivo en el servidor
- Nótese que un parámetro (q) se añade a la URL (con el contenido de la lista desplegable)
El AJAX página de servidor
La página en el servidor llamado por el código JavaScript de arriba es un archivo ASP llamada "getcustomer.asp" .
El archivo de servidor podría ser fácilmente reescrito en PHP, o algunos otros lenguajes de servidor.
Mira un ejemplo correspondiente en PHP .
El código fuente en "getcustomer.asp" ejecuta una consulta a una base de datos, y devuelve el resultado en una tabla 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("/ datafolder /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>")
%>