AJAX tecnica de carga de paginas WEB

Obviamente AJAX no es una novedad, pero ha ganado muchos adeptos con el tiempo y es a dóa de hoy casi un estandar a la hora de hacer los diseños de páginas Web, de la mano de JQuery, nos hemos ido dando cuenta de que JavaScript no era tan malo como lo pintabamos.

AJAX, carga parcial de páginas Web. Cuando ahorrarse un submit, hace que quede más bonito.

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.

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