Ajax_Primer Ejemplo_paso a paso
Anuncio
AJAX
Primer Ejercicio - paso a paso
Vamos a empezar con una serie de tutoriales sobre AJAX con ejemplos prácticos, menos este que es el
típico “Hola Mundo”. Antes de nada es necesario que conozcáis algo sobre AJAX y nada mejor que la
lista que os pasamos hace tiempo: Recursos AJAX para principiantes.
Siempre que se empieza con alguna clase de tutorial se pone el ejemplo de “Hola Mundo”, y nosotros no
vamos a ser menos.
Lo
primero
que
hay
que
hacer
es
ser
capaces
de
usar
un
método
para
obtener
el
objeto XMLHttpRequest, supongo que hay varias formas de hacerlo, pero la que más me gusta es la
siguiente:
function ajaxobj() {
try {
_ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
_ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
_ajaxobj = false;
}
}
if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {
_ajaxobj = new XMLHttpRequest();
}
return _ajaxobj;
}
Debido a que aún no se trata de un estándar, aunque esperamos que sea dentro de poco, según sea el
navegador que se usa, se obtiene el objeto de distintas maneras. Primero se intenta obtener mediante la
creación de un objeto ActiveX, que es la forma que se usa para Internet Explorer, hasta dentro de poco
porqueIE7 lo va a traer de forma nativa. La siguiente manera es instanciándolo directamente, que se usa
en otros navegadores como Firefox.
Ya sabemos cómo obtener el objeto XMLHttpRequest, ahora nos falta llamar al script php usando este
objeto. En nuestro caso será pulsando un botón, realizará una llamada al script y devolverá el resultado.
<input type="button" onclick="holaMundo()" value="Hola mundo" />
La llamada al script se realizará mediante la siguiente función:
SENA – ADSI
Instructor: Ing. Espec. Javier V.
Página 1
function holaMundo () {
// Instanciamos el objecto XMLHttpRequest
ajax = ajaxobj();
// Abrimos la conexión al script
ajax.open("GET", "holamundo.php", true);
// Indicamos que función vigila el cambio de estado
ajax.onreadystatechange=function() {
if (ajax.readyState == 4) {
// Mostramos resultado
alert(ajax.responseText);
}
}
// Enviamos algo para que funcione el proceso
ajax.send(null);
}
1.
Lo primero que tenemos es la instancia del objeto XMLHttpRequest,
2.
una vez obtenida, abrimos la conexión a la URL (en este caso con holamundo.php)
mediante el método GET (siendo posibles también los métodos POST, HEAD o DELETE) e
indicando que se trata de una conexión asíncrona.
3.
Cuando ya hemos abierto la conexión decimos qué función se va a encargar de tratar el
cambio de estado de la conexión, en este caso se trata de una función anónima que
mostrará respuesta en modo texto cuando el estado indique se ha completado la carga
(readyState == 4).
4.
Y terminamos enviando algo (en este caso null) al servidor, porque aunque en este caso
5.
funcionalmente no sería necesario, si no se envía nada, no funciona el proceso.
6.
Ya solo nos falta el script PHP, que es un simple texto, con una fecha, para ver como se
modifica en cada llamada.
<?php
echo "Hola, son las ".date("H:i:s");
?>
SENA – ADSI
Instructor: Ing. Espec. Javier V.
Página 2
Ejemplo 2_AJAX
<html>
<head>
<title>Ejemplo1</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function pedirDatos(fuenteDatos, divID){
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", fuenteDatos);
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
SENA – ADSI
Instructor: Ing. Espec. Javier V.
Página 3
<body>
<H1>Mostrando datos con AJAX</H1>
<form>
<input type = "button" value = "Mostrar mensaje" onclick =
"pedirDatos('datos.txt','targetDiv')">
</form>
<div id="targetDiv" style="background-color:#99FF66;">
<p>Aqu&iacute; aparecer&aacute; texto</p>
</div>
</body>
</html>
A continuación escribiremos en un archivo de texto la siguiente línea:
Datos.txt
Este texto apareció usando AJAX y sin un refresh a la pagina.
Explicación.
1. En primer lugar creamos el objeto XMLHttpRequestObject para la petición
de datos. Este objeto será creado dependiendo del navegador web, la primera
parte del if es para la mayoría de navegadores y la parte del if else es para
Internet Explorer.
2. Luego está la creación de una función pedirDatos que tiene como
parámetros fuenteDatos y divID. Está función, como su mismo nombre lo
indica, será la encargada de hacer una petición de datos, a través del
parámetro fuenteDatos al servidor. Y el resultado de la petición será
mostrada en la variable divID , la cual es una capa de estilos que se
mostrará en el html.
Como se aprecia la mayor parte del código interesante se centra en el javascript.
Así que empezaremos el tutorial con un rápido repaso de este lenguaje. Hasta el
próximo artículo.
Nota: El archivo datos.txt va en la directorio donde va ejemplo1.html.
SENA – ADSI
Instructor: Ing. Espec. Javier V.
Página 4
