Latest web development tutorials

Base de datos AJAX

AJAX se puede utilizar para la comunicación interactiva con la base de datos.


instancia de base de AJAX

Los siguientes ejemplos demostrarán cómo una página web a través de AJAX leer la información de la base de datos:

Ejemplos


Customer info will be listed here...


Ejemplos explican - página HTML

Cuando un usuario en la lista desplegable de arriba, seleccione un cliente, ejecutado llamado "showCustomer) (" función. Esta función por el evento "onchange" se dispara:

<!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>

Fuente explicó:

Si no selecciona un cliente (str.length == 0), entonces la función borrará txtHint marcador de posición, y luego salir de la función.

Si ha seleccionado un cliente, a continuación, la función showCustomer () realiza los siguientes pasos:

  • Crear objeto XMLHttpRequest
  • Crear función cuando el servidor está listo para llevar a cabo la respuesta
  • Archivo en el servidor para enviar solicitudes
  • Por favor note que se añade al final del parámetro de URL (q) (contiene el contenido de la lista desplegable)

archivo ASP

Los servidores anteriores a través de JavaScript que llaman esta página se llama "archivos ASP getcustomer.asp".

"Getcustomer.asp" código fuente se ejecuta una consulta en la base 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("/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>")
%>