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.
[caption id="attachment_391" align="aligncenter" width="300" caption="AJAX"]
[/caption]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 -->
Related Articles
- Ajax (slideshare.net)
- Simple Javascript to write to mysql (mclear.co.uk)
- Practical Functional JavaScript (osteele.com)
