Carga dinámica de datos mediante AJAX

Publicada por Ameva el 15 Abril, 2009 | 3 Comentarios »

Las aplicaciones 2.0 demandan cada vez mas una mayor interactividad con los usuarios, por lo que implementar AJAX en nuestros proyectos es de suma importancia, es por eso que decidí crear esta publicación.

Mediante AJAX se pueden realizar muchas cosas tales como, enviar datos mediante formularios (Prometo realizar una publicación respecto a esto), agregar efectos visuales, permitir al usuario modificar la interfase en la que interactúa, etc. Pero lo esencial parte de una sola base, la recepción de datos, ya se para cargar texto, imágenes videos, animaciones, variables, la carga de datos es importante, y para no generarles inconvenientes en sus proyectos decidí hacer los script en funciones para invocarlas cuando se las necesite.

Lo primero es crear las funciones en JavaScript las cuales nos servirán para realizar los procesos:

function getXMLHttpRequest(){
var Versiones = [ "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","Microsoft.XMLHttp"];
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
else if(window.ActiveXObject){
for(var i = 0; i < Versiones.length; i++){
try{
var oXmlHttp = new ActiveXObject(Versiones[i]);
return oXmlHttp;
}
catch(error){
}
}
}
}

Con esta función indicamos de que manera mediante que método y que datos se recibirán

function Ejecutar(Pagina, Elemento){
document.getElementById(Elemento).innerHTML = "<img src='http://www.bhavnasmehndi.com/images/loading.gif' alt='Cargando…' />";
var Pagina_Solicitada = getXMLHttpRequest();
Pagina_Solicitada.onreadystatechange = function (){
if (Pagina_Solicitada.readyState == 4 && (Pagina_Solicitada.status == 200 || window.location.href.indexOf ("http") == – 1))
document.getElementById(Elemento).innerHTML = Pagina_Solicitada.responseText;
}
Pagina_Solicitada.open ('GET', Pagina, true);
Pagina_Solicitada.send (null);
}

Mediante esta función lo primero que hacemos es mostrar una imagen de carga y luego cuando el contenido fue cargado lo remplazamos por el mismo.

<onClick="javascript:Ejecutar('Texto.html', 'Cuadro');>Cargar Texto</a>
<div id="Cuadro">
</div>

Solo resta agregar un vinculo y un cuadro al que le debemos asignar un valor de ID para luego especificarlo en dicho enlace para efectuar la carga y con eso podemos realizar una carga dinámica.

Se pude descargar los archivos del tutorial desde aquí.

Diseño Web a Medida

Sabemos que hoy en día estar en Internet es importante no solo para las empresas sino para diferentes profesionales, por lo que el compromiso con nuestros clientes es ofreces un servicio de desarrollo que se ajuste a sus necesidades.

Posicionamiento en Buscadores

Encontrarse entre los primeros resultados de búsquedas es uno de los factores mas importantes en la web de hoy en día, por esto mismo realizamos estrategias de posicionamiento para garantizarle su lugar en los buscadores.

Comunicación Estratégica

Logramos comunicar a diferentes personas un mensaje elaborado estratégicamente para ofrecer como resultado una fidelización pura en sus clientes y atraer a aquellos que antes no estaban comprometidos con usted.

Diseño Multimedia

Estamos acostumbrados a percibir mas las cosas si se nos la presentan de forma visual y grafica por lo que la animación y las presentaciones generan mayor impacto. Nuestro servicio de diseño multimedia pretende brindar esta solución.

Diseño Grafico y Publicitario

Si bien hoy en día las herramientas digitales tienden cada vez mas a separarnos de las formas tradicionales, no podemos dejar de lado, comunicación personal y tangible por eso ofrecemos elementos de diseño grafico y publicitario.

Carga dinámica de datos mediante AJAX

Comentarios

Publicar un Comentario

Artículos Relacionados

Subscríbase al boletín de noticias

Categorías

Explore Ameva, Web Site

Acerca de Ameva