AJAX se puede utilizar para la comunicación interactiva con una base de datos.
AJAX Base de Datos de Ejemplo
El siguiente ejemplo demostrará cómo una página web puede recuperar información de una base de datos con AJAX:
Ejemplo Explicación - La página HTML
Cuando un usuario selecciona un cliente en la lista desplegable anteriormente, una función llamada " showCustomer() " se ejecuta. La función se activa por el "onchange" evento:
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
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","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>El código fuente explicación:
Si no se selecciona un cliente (str.length==0) , la función borra el contenido del marcador de posición txtHint y sale de la función.
Si se selecciona un cliente, el showCustomer() la función ejecuta la siguiente:
- Crear un objeto XMLHttpRequest
- 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 archivo ASP
La página en el servidor llamado por el código JavaScript anterior es un archivo ASP llamada "getcustomer.asp" .
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>")
%>