ASP clasico y Ajax pasando datos con JSON
Código ASP clásico
- Por Programador ASP clásico /
- 16/11/2012 @ 12:35:26 /
- 1008 visitas
Una página desarrollada en ASP (Active Server Pasges) clásico puede aprovechar la librería jQuery. A continuación se muestra como implementar un servicio JSON y posteriormente consumirlo desde una página de ASP clásico.
El servicio JSON lo implementaremos en el archivo productos.asp:
<%
Dim categoryId, Rs, count
Response.Expires = -1
If Not UserLogged() or Request("categoryId")="" Then
Response.End
End If
categoryId = Cint(Request("categoryId"))
OpenDatabase()
Set Rs = GetProductsByCategoryRecordset(categoryId)
Response.ContentType = "application/json"
Response.Write "{"
Response.Write " ""datos"": ["
count = 0
While Not Rs.Eof
Dim id, name, desc
id = Rs("id")
name = Rs("name")
desc = Rs("desc")
count = count + 1
If count > 1 Then
Response.Write ", "
End If
Response.Write "{ "
Response.Write " ""productId"": " & id & ", "
Response.Write " ""productName"": """ & name & """, "
Response.Write " ""productDesc"": """ & desc & """"
Response.Write "}"
Rs.MoveNext
Wend
Response.Write " ]"
Response.Write "}"
Rs.Close
CloseDatabase()
%>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
A continuación, el formulario que muestra un combo con categorías de productos, cuyo cambio provocará la llamada al servidor, y reserva el bloque <div> llamado result para mostrar el resultado:
<select id="categories" onchange="reloadProducts()">
<option value="1">Electrodomésticos</option>
<option value="2">Informática</option>
<option value="3">Cocina</option>
...
</select>
<div id="result"> </div>
El código de la función reloadProducts() es el mostrado a continuación. Utiliza el método getJSON() de jQuery para realizar la llamada Ajax, suministrándole como parámetro la categoría seleccionada en el desplegable en forma de objeto anónimo.
<script type="text/javascript">
function reloadProducts() {
$.getJSON(
"JsonObtenerProductos.asp", // URL del servicio
{ categoryId: $("#categories").val() }, // Parámetros
function(data) { // Función callback
var elem = $("#result");elem.empty(); // Limpiamos el contenedor
var s = "<ul>";
$.each(data.datos, function(i, item) {
s += "<li>" + item.productName + "</li>";
});
s += "</ul>";
elem.html(s); // Insertamos la lista en el contenedor
});
}
</script>
De esta forma tenemos un sistema de carga asíncrona de elementos utilizando ASP y jQuery.
tags: asp clasico, ajax json, ajax json javascript, ajax json response, ajax json data, ajax json example, asp ajax json, classic asp ajax json