AJAX Ejemplo de Database


AJAX se puede utilizar para la comunicación dinámica con bases de datos.


Ejemplo de base de datos AJAX

El siguiente ejemplo demostrará cómo una página web lee información de una base de datos mediante AJAX: Por favor, seleccione un cliente en la lista desplegable siguiente:

Ejemplo


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

Pruébalo »


Explicación del ejemplo - Función showCustomer()

Cuando el usuario selecciona un cliente en la lista desplegable anterior, se ejecuta la función llamada "showCustomer()". Esta función es activada por el evento "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 función showCustomer() realiza las siguientes tareas:

  • Comprueba si se ha seleccionado algún cliente
  • Crea un objeto XMLHttpRequest
  • Ejecuta la función creada cuando la respuesta del servidor esté lista
  • Envía la solicitud al archivo en el servidor
  • Tenga en cuenta que agregamos un parámetro q (con el contenido del campo de entrada) a la URL

Página del servidor AJAX

La página del servidor llamada por el JavaScript anterior es un archivo PHP llamado "getcustomer.php".

También es fácil escribir el archivo del servidor en PHP, o en otros lenguajes de servidor. Veael ejemplo correspondiente escrito en PHP。

El código fuente en "getcustomer.php" se encarga de consultar la base de datos y luego devolver 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>")
%>
Otras extensiones