Explora cómo combinar AJAX, ASP.NET y SQL para crear aplicaciones web dinámicas que brinden una experiencia de usuario superior en la navegación. Con esta combinación, podrás mejorar la velocidad de carga de tus páginas y asegurarte de que tus usuarios obtengan la información que necesitan de manera rápida y segura. Descubre los beneficios de un enfoque centrado en el usuario y la flexibilidad que ofrecen estas tecnologías para mejorar tus aplicaciones web.
En este artículo, vamos a ver cómo implementar un Ajax solución que utiliza un ASP.NET página para extraer datos de una base de datos back-end. En este tutorial, tenemos una tabla almacenada en un mysql base de datos.
Puede reemplazar el código ASP.NET en esta página con cualquier otro lenguaje de secuencias de comandos del lado del servidor con el que esté familiarizado, como ÁSPID o PHP. Puede consultar los otros tutoriales de esta serie para obtener más ayuda con el uso de un lenguaje de secuencias de comandos del lado del servidor diferente.
Además, la fuente de datos de back-end no es tiene que ser MySQL. Puede modificar la conexión de la base de datos en el ejemplo para acceder a otras plataformas de bases de datos. El concepto sigue siendo el mismo.
Ejemplo HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showEmployee(str) {
if (str==""){
document.getElementById("div1").innerHTML="Select an Employee for more details!";
return;
}
var xhr = false;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// IE5/IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "/demo/ajax_dbquery.aspx?q="+str, true);
xhr.send(null);
}
}
</script>
</head>
<body>
<div>
<select name="employees" onchange="showEmployee(this.value)">
<option value="">Select an Employee:</option>
<option value="3">Frank Ford</option>
<option value="1">John Smith</option>
<option value="4">Lisa Stark</option>
<option value="2">Sally Smart</option>
</select>
<div id="div1">Select an Employee for more details!</div>
</div>
</body>
</html>Ejemplo de ASP.NET
Imports System.Data.Odbc
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Response.AppendHeader("Cache-Control", "no-cache")
Response.AppendHeader("Cache-Control", "no-store")
Response.AppendHeader("Cache-Control", "must-revalidate")
Response.AppendHeader("Pragma", "no-cache")
Response.AppendHeader("Expires", "Sat, 14 Jan 2012 01:00:00 GMT")
Dim db_svr As String = "dbserver.com"
Dim db_name As String = "databaseName"
Dim db_un As String = "dbUserName"
Dim db_upwd As String = "dbPassword"
Dim tablename As String = "employees"
Dim fieldname1 As String = "empName"
Dim fieldname2 As String = "empTitle"
Dim fieldname3 As String = "empOffice"
Dim q As String = Request.QueryString("q")
Dim dbQuery As String = "SELECT * FROM " & tablename & " WHERE empID = " & q
Dim connStr = "Driver={MySQL ODBC 3.51 Driver};SERVER=" & db_svr & ";DATABASE=" & db_name & ";UID=" & db_un & ";PWD=" & db_upwd
Dim dbconn As OdbcConnection = New OdbcConnection(connStr)
Dim dbCommand As New OdbcCommand
dbCommand.Connection = dbConn
Try
dbconn.Open()
dbCommand.CommandText = dbQuery
Dim reader = dbCommand.ExecuteReader()
Response.Write("<table class="tblClear">")
Do While reader.Read() = True
Response.Write("<tr><td style="width:100px;">Name:</td><td>" & reader(fieldname1) & "</td></tr>")
Response.Write("<tr><td style="width:100px;">Name:</td><td>" & reader(fieldname2) & "</td></tr>")
Response.Write("<tr><td style="width:100px;">Name:</td><td>" & reader(fieldname3) & "</td></tr>")
Loop
dbconn.Close()
Response.Write("</table>")
Catch ex As Exception
Response.Write("An error occured trying to access the database.")
End Try
End Sub