ASP clasico y Ajax pasando datos con JSON

Código ASP clásico

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