Ejemplo de base de datos AJAX

AJAX se puede usar para comunicarse con una base de datos.

Ejemplo de base de datos AJAX

El siguiente ejemplo muestra cómo una página web puede leer información de una base de datos utilizando AJAX:

La información del cliente se listará aquí.

Pruebe el código fuente

Ejemplo práctico - Página HTML

Cuando el usuario selecciona un cliente en la lista desplegable superior, se ejecuta la función llamada "mostrarCliente()" que se dispara por el evento "onchange":

<!DOCTYPE html>
<html>
<head>
<script>
function mostrarCliente(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// Código para IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// Código para 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="clientes" onchange="mostrarCliente(this.value)">
<option value="">Seleccione un cliente:</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">La información del cliente se listará aquí...</div>
</body>
</html>

Explicación del código fuente:

Si no se ha seleccionado ningún cliente (str.length es igual a 0), la función borrará el marcador de posición txtHint y luego saldrá de la función.

Si se ha seleccionado un cliente, la función showCustomer() ejecutará los siguientes pasos:

  • Crear un objeto XMLHttpRequest
  • Crear una función que se ejecutará cuando el servidor esté listo para responder
  • Enviar una solicitud al archivo en el servidor
  • Tenga en cuenta que los parámetros adicionados al final de la URL (q) (que contienen el contenido de la lista desplegable)

Archivo ASP

La página web del servidor llamada "getcustomer.asp" que se llama en este fragmento de JavaScript es un archivo ASP.

El código fuente en "getcustomer.asp" realiza una consulta a la base de datos una vez y luego devuelve los resultados 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("/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>")
%>