AJAX técnica de carga de páginas Web


AJAX, carga parcial de páginas Web.

AJAX no es un lenguaje de programación en si mismo, sino una serie de técnicas que agilizan la visualización de las paginas Web, es una gran idea, cuando tenemos paginas pesadas que necesitan actualizar datos, y si no queremos enviar las paginas completas para ser recargadas, podemos actualizar de la pagina solicitada solo los campos o datos necesarios, que van a modificarse, de esta manera podemos ahorrar muchos recursos a la hora de visualizar las paginas, los ejemplos que veremos a continuación son código JavaScript que puede utilizarse para realizar tareas de AJAX en paginas Web, notar que los ejemplos están basados en JSP con JavaScript, aunque podríamos extrapolar estas situaciones a paginas ASP o PHP, con diferentes lenguajes de programación de scripts.

AJAX

Aviso los ejemplos son muy básicos, se pueden hacer cosas mucho más potente que lo que se refleja aquí. Esto solo es una guía básica.

Cambios en un componente por ID

<!— REEMPLAZAR TEXTO –>

<script type=”text/javascript”>

function cambio() {

document.getElementById(‘nombre’).innerHTML = “Hola, mundo <b>AJAX</b>!”;

}

</script>

<p><a href=”javascript:cambio()”>Cambiar</a></p>

<div id=’nombre’>

Hola, Mundo!

</div>

<!– FIN REEMPLAZAR TEXTO –>

<!– TEXTO CON FICHERO –>

<script type=”text/javascript”>

var http = false;

if(navigator.appName == “Microsoft Internet Explorer”) {

http = new ActiveXObject(“Microsoft.XMLHTTP”);

} else {

http = new XMLHttpRequest();

}

http.open(“GET”, “test.txt”);

http.onreadystatechange=function() {

if(http.readyState == 4) {

alert(http.responseText);

}

}

http.send(null);

</script>

<!— FIN TEXTO CON FICHERO –>

<!— AMBOS –>

<script type=”text/javascript”>

var http = false;

if(navigator.appName == “Microsoft Internet Explorer”) {

http = new ActiveXObject(“Microsoft.XMLHTTP”);

} else {

http = new XMLHttpRequest();

}

function replace() {

http.open(“GET”, “test.txt”, true);

http.onreadystatechange=function() {

if(http.readyState == 4) {

document.getElementById(‘nombre’).innerHTML = http.responseText;

}

}

http.send(null);

}

</script>

<p><a href=”javascript:cambio()”>Cambiar</a></p>

<div id=”nombre”>

Hola, Mundo!

</div>

<!— FIN AMBOS –>

1 Comment

Comparte tu opinión

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s