ASP clasico y Ajax pasando datos con JSON

ASP clasico y Ajax pasando datos con JSON

Código ASP clásico

Por ASP clásico / 16/11/2012 @ 12:35:26 / 1460 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>

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

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