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