Loading...

ASP clásico 3.0 y AJAX (Javascript)

Ez.Biz Cloudware
Blog de ASP Clásico

ASP clásico 3.0 y AJAX (Javascript)

Código ASP clásico

Por ASP clásico / 06/08/2012 @ 15:05:52 / 1421 visitas

AJAX permite cargar partes de codigo sin tener que recargar (reload) la página completa y las demoras y molestias que esto genera.

Para implementar AJAX en la aplicación ASP se necesita:

  1. El archivo .JS de Javascript que llama a AJAX
  2. Un boton, enlace o formulario que permita llamar una funcion Javascript
  3. Un DIV donde se desplegara el resultado

Primero necesitamos el archivo .JS llamado ajax_loader.js

  function GetXmlHttpObject(handler)
{
   var objXMLHttp=null
   if (window.XMLHttpRequest)
   {
       objXMLHttp=new XMLHttpRequest()
   }
   else if (window.ActiveXObject)
   {
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
   }
   return objXMLHttp
}

function stateChanged(proceso, caja)
{
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
//    document.getElementById(caja).innerHTML= xmlHttp.responseText;
document.getElementById(caja).innerHTML=proceso
   }
   else {
     //alert(xmlHttp.status);
   }
}


// Will populate data based on input
function htmlData(url, caja, qStr)
{
   if (url.length==0)
   {
       document.getElementById(caja).innerHTML="";
       return;
   }
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
       alert ("Su navegador no soporta este tipo de procedimiento, por favor actualice el mismo.");
       return;
   }
  
   url=url+"?"+qStr;
   url=url+"&sid="+Math.random();
//   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.onreadystatechange=function() { stateChanged( xmlHttp.responseText, caja); }  
  
   xmlHttp.open("GET",url,true) ;
   xmlHttp.send(null);
}

que llamaremos en nuestra pagina dentro de las etiquetas <head></head> de la siguiente forma:

<script src="ajax_loader.js" type="text/javascript"></script>  

Despues necesitaremos el metodo que llame a la funcion que realizara la carga, por ejemplo un SELECT:

<select name="prueba" onchange="htmlData('ajax.asp', 'resultado', 'envia='+this.value)">
<option value="1">OPCION 1</option>
<option value="2">OPCION 2</option>
<option value="3">OPCION 3</option>
</select>
  
  <div id="resultado"></div>

Donde lo que esta en negritas es lo que hay que cambiar segun sea el caso:
ajax.asp: es el archivo que procesara la informacion a publicar
resultado: es el nombre del DIV donde se mostrara el resultado
envia='+this.value: es donde podremos poner informacion que se enviara mediante el metodo GET como el que se usa en los formularios, podria ser diferente, hay que contemplar que es la informacion que recibira el archivo y que se usara para la informacion que se procese, otro ejemplo podria ser algo asi a=1&b=2&c=3, en el ejemplo de arriba se toma el valor del SELECT usando algo de JAVASCRIPT.

Resumiendo:
- Hay que generar e incrustar el archivo .JS ajax_loader.js
- Agregar el codigo que llame a la funcion htmlData() dentro de algun sistema que lo permita
- Generar el archivo ASP que procesara la informacion que se envie en la funcion anterior, en el ejemplo es ajax.asp.

Este es un ejemplo aplicado:

    <form action="javascript:void%200">
    <select name="prueba" onchange="htmlData('ajax.asp', 'resultado', 'muestra=HOLA&prueba='+this.value)">
    <option value="">SELECCIONA UNA OPCION</option>
    <option value="1">OPCION 1</option>
    <option value="2">OPCION 2</option>
    <option value="3">OPCION 3</option>
    </select>
    </form>
    
    <div id="resultado">TEXTO ORIGINAL</div>
    <br /><br />
    <%=now()%>

Este es el código en ASP clásico de ajax.asp, el script que procesa la información a publicar:

<%
Response.CharSet = "ISO-8859-1"
Response.addHeader "pragma", "no-cache"
Response.CacheControl = "Private"
Response.Expires = 0

muestra=request.QueryString("muestra")
prueba=request.QueryString("prueba")

if prueba="" then
response.write "NO HAS SELECCIONADO NADA"
else
    response.write "MUESTRA:" & muestra & "<br>"
    response.write "OPCION SELECCIONADA:" & prueba & "<br><br>"
    response.write now()
end if
%>

Descubre más sobre cómo simplificar y optimizar tu trabajo empresarial en el Blog de CoreASP.

asp, ajax toolkit, ajax tool kit, ajax y asp, asp y ajax, ajax en asp, ajax control, jquery y asp, ajax framework, asp ajax extensions, ajax software, asp, asp clasico

Descargo de Responsabilidad:

El contenido y los recursos que ofrecemos en CoreASP están destinados únicamente a proporcionar herramientas y ejemplos prácticos para el desarrollo en ASP Clásico. Esta información es de carácter general y no debe considerarse asesoramiento profesional o técnico específico para tu proyecto. Aunque hacemos todo lo posible por asegurar la calidad y precisión de los recursos compartidos, no garantizamos que sean completamente libres de errores o que se ajusten perfectamente a todas las situaciones. CoreASP no se responsabiliza por cualquier pérdida, daño o inconveniente derivado del uso directo o indirecto de los recursos o información proporcionada. Además, CoreASP no respalda ni asume responsabilidad por enlaces o contenido de terceros que puedan estar referenciados en nuestra plataforma. Todos los derechos de propiedad intelectual sobre el contenido y recursos publicados en CoreASP pertenecen a CoreASP o a sus respectivos propietarios, y su uso está sujeto a las condiciones de la licencia especificada para cada recurso. Nos reservamos el derecho de modificar este descargo de responsabilidad en cualquier momento sin previo aviso. Para más detalles, consulta el documento completo de términos y condiciones.