Vamos a ver un ejemplo sencillo que consiste en cargar el contenido de un archivo de texto que se encuentra en el servidor y lo muestra en pantalla.
Lo primero que debemos hacer es crear un archivo html en el cual incluiremos el siguiente código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mi primer AJAX</title>
<script type="text/javascript">
var peticion;
// Función que carga el archivo
function loadText()
{
try
{
if (peticion.readyState == 4)
{
if (peticion.status == 200)
{
// Mostrar el contenido
document.getElementById('contenido').innerHTML = document.getElementById('contenido').innerHTML + '<br/>' + peticion.responseText;
}
}
}
catch (err)
{
alert(err);
}
}
function cargar()
{
try
{
// Obtener la instancia del objeto XMLHttpRequest
peticion = new XMLHttpRequest();
// Preparar la funcion de respuesta. Con indicamos que funcción ejecutar
// cuando el servidor retorne la respuesta
peticion.onreadystatechange = loadText;
// Preparar la petición
peticion.open('GET', 'http://localhost/ajax/ajax.txt', true);
// Enviar la petición al servidor
peticion.send(null);
}
catch (err)
{
alert(err);
}
}
</script>
</head>
<body>
<input type="button" value="Cargar Archivo" onclick="javascript:cargar();"/>
<div id="contenido" style="cursor:pointer" onclick=""></div>
</body>
</html>
Vamos a analizar un poco el código. En nuestra página web tendremos un botón y un contenedor div. Cuando se pulsa sobre el botón se ejecuta la función cargar y es en esta función donde vamos a usar AJAX.
Lo primero que se hace en la función cargar es obtener objeto que implementa la interfase XMLHttpRequest. XMLHttpRequest es una interfase utilizada para realizar peticiones HTTP y HTTPS a servidores Web.
peticion = new XMLHttpRequest();
Posteriormente enlazamos la asignamos la función loadText a la propiedad onreadystatechange. Esto hace que cada vez que el atributo readyState del objeto petición cambie. En la función loadText se verifica que el estado tenga el valor 4, en este momento el servidor a respondido y la respuesta está disponible. Por otro lado se verifica que la respuesta es correcta para esto se verifica el atributo status si el valor es 200 entonces la petición se ha devuelto correctamente.
peticion.onreadystatechange = loadText;
Finalmente se prepara la conexión y se envía la misma. Para preparar la conexión se usa la función open que tiene res parámetros:
- String que indica el tipo de petición. Esta puede tener los valores GET, POST o HEAD. En el caso del ejemplo la url donde he puesto el recurso es http://localhost:/ajax/ajax.txt.
- La url del recurso.
- Un tercer parámetro opcional que indica si la petición será síncrona o asíncrona. Sólo usaremos este parámetro con el valor a falso si no necesitamos esperar por la respuesta.
// Preparar la petición
peticion.open('GET', 'http://localhost:/ajax/ajax.txt', true);
// Enviar la petición al servidor
peticion.send(null);
Finalmente se añade al contenido al div
// Mostrar el contenido
document.getElementById('contenido').innerHTML = document.getElementById('contenido').innerHTML + '<br/>' +
peticion.responseText;
No hay comentarios:
Publicar un comentario