Ejemplo de AJAX con Base de Datos

AJAX se puede utilizar para comunicaciones interactivas con la base de datos.

Ejemplo de AJAX con Base de Datos

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

Ejemplo

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

Prueba aquí

Ejemplo explicativo - función showCustomer()

Al seleccionar un cliente en la lista desplegable superior, se ejecuta la función "showCustomer()". Esta función es llamada onchange Evento desencadenado:

showCustomer

function showCustomer(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.asp?q=" + str, true);
  xhttp.send();
}

La función showCustomer() realiza lo siguiente:

  • Revisar si se ha seleccionado un cliente
  • Crear un objeto XMLHttpRequest
  • Crear una función que se ejecute cuando el servidor esté listo para responder
  • Enviar una solicitud a un archivo en el servidor
  • Tenga en cuenta que el parámetro q se agrega a la URL (con contenido de lista desplegable)

Página de servidor AJAX

La página de servidor llamada "getcustomer.asp" es la que es llamada por el JavaScript anterior.

Es fácil reescribir este archivo de servidor en PHP u otro lenguaje de servidor.

Ver el ejemplo correspondiente en PHP。

El código fuente en "getcustomer.asp" realiza consultas basadas en bases de datos y 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("customers.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>")
%>