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