1. ¿Qué es Ajax?
  2. Montando poco a poco una petición Ajax
  3. Prevenir el comportamiento de un link
  4. Prevenir el comportamiento de un link
  5. Ejecutar con onmouseover
  6. Mostrar un previo
  7. Enviar petición al servidor
  8. Carga combo dinámicamente
  9. Paginar
  10. Autocompletar texto
  11. JSON

Ajax

La característica fundamental de AJAX es permitir actualizar parte de una página con información que se encuentra en el servidor sin tener que refrescar completamente la página.

Un objeto XMLHttpRequest es una instancia de una API que nos permite la transferencia asíncrona de datos desde el cliente al servidor.

Ventajas

Desventajas

Montando poco a poco una petición Ajax

En los ejercicios siguientes...

enviarDatos será la función javascript que envíe la información al servidor utilizando ajax, mientras que procesarRespuesta será la función javascript que procese la respuesta del servidor.

Carga dinámica de contenido (no funciona en IE)

	
/*Las páginas cargadas con ajax no pueden indexarse y no les podemos pasar parametros*/
var xhr;
function enviarDatos(url){
	xhr = creaObjetoXMLHttpRequest();
	/*onreadystatechange es una propiedad del objeto xhr que almacena el nombre de la 
	funcion que se ejecutara cuando, tras haber llamado al metodo send, el objeto XMLHttpRequest cambie de estado*/
	xhr.onreadystatechange = procesarRespuesta;
	//open inicializa una petición HTTP.
	xhr.open('GET', url);
	xhr.send(null); 
}	
function creaObjetoXMLHttpRequest(){
	xhr = new XMLHttpRequest();
	return xhr;
}
function procesarRespuesta(){
	/*responseText Almacena el string devuelto por el servidor tras haber hecho una petición*/
	document.getElementById("capaContenedora").innerHTML = xhr.responseText;
}
</script>
<div id="menu">
	<a href="javascript:enviarDatos('contenido1.html');">Carga primera pagina</a>
	<a href="javascript:enviarDatos('contenido2.html');">Carga segunda pagina</a>
</div>
<div id="capaContenedora"> 
</div>
	

Es posible ver la petición que estamos enviando abriendo la consola del navegador (ctrl + shift + j para firefox y chrome).

Ver ejemplo

Ejercicio

Dado que el objeto XMLHttpRequest depende del navegador que estemos usando, modificar la función creaObjetoXMLHttpRequest del ejercicio anterior para que devuelva un objeto XMLHttpRequest u otro en función del navegador.


function creaObjetoXMLHttpRequest(){
	var xhr;
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	}else if(window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){}
	}else{
		alert("No ha sido posible crear una instancia de XMLHttpRequest");
	}
	return xhr;
}
Ver ejercicio

Ejercicio - añadir la comprobación de si el objeto HttpRequest esta o no preparado

readyState nos devuelve el estado del objeto XMLHttpRequest, pudiendo ser:

Análogamente status nos devuelve el estado del objeto XMLHttpRequest como un número:

function procesarRespuesta(){
	var capaContenedora = document.getElementById("capaContenedora");
	if (xhr.readyState == 4){
		if (xhr.status == 200) {
			capaContenedora.innerHTML = xhr.responseText;
		}
	}
	else{
		capaContenedora.innerHTML = "Loading";
	}
}
Ver ejercicio
function iniciarAjax(){
	enlace1 = document.getElementById("enlace1");
	enlace2 = document.getElementById("enlace2");
	addEvent(enlace1,'click',cargarURL,false);
	addEvent(enlace2,'click',cargarURL,false);
}
function addEvent(elemento,eventName,funcion,captura){
	if(elemento.attachEvent){
		elemento.attachEvent('on'+eventName,funcion);
		return true;
	}else  if(elemento.addEventListener){
		elemento.addEventListener(eventName,funcion,captura);
      return true;
	}else return false;
}
function cargarURL(evt){
	if (evt) {
		evt.preventDefault();
		var url = evt.target;
		enviarDatos(url); 
	}else{
		window.event.returnValue=false;
		var url = evt.srcElement;
		enviarDatos(url);     
	}
}

Me creo mi propio evento, que llamará a una función Ajax que lo primero que hará será eliminar el comportamiento por defecto.

Ver ejercicio

Ejercicio - ejecutar con onmouseover

window.onload = iniciarAjax;
function iniciarAjax(){
	document.getElementById("enlace1").onmouseover = enviarDatos;
	document.getElementById("enlace2").onmouseover = enviarDatos;
}

function enviarDatos(evt){
	url = cargarURL(evt);
	xhr = creaObjetoXMLHttpRequest();
…

function cargarURL(evt){
	if (evt) {
		var url = evt.target;
	}
	else {
		evt = window.event;
		var url = evt.srcElement;
	}
	return url;
}
Ver ejercicio

Ejercicio – Mostrar un previo

function iniciarAjax(){
	document.getElementById("enlace1").onmouseover = enviarDatos;
	document.getElementById("enlace2").onmouseover = enviarDatos;
	document.getElementById("enlace1").onmouseout = ocultarCapaContenedora;
	document.getElementById("enlace2").onmouseout = ocultarCapaContenedora;
}

function procesarEventos(){
	var capaContenedora = document.getElementById("capaContenedora");
	if (xhr.readyState == 4){
		if (xhr.status == 200) {
			capaContenedora.innerHTML = xhr.responseText;
		}
	}
	else{
		capaContenedora.innerHTML = "Loading";
	}
	capaContenedora.style.visibility = "visible";
}
Ver ejercicio

Ejercicio – colocar el previo dónde indique el ratón

function enviarDatos(evt){
	xhr = creaObjetoXMLHttpRequest();
	url = cargarURL(evt);
	xPos = evt.clientX;
	yPos = evt.clientY;

…

capaContenedora.style.top = parseInt(yPos)+2 + "px";
capaContenedora.style.left = parseInt(xPos)+2 + "px";
Ver ejercicio

Ejercicio – Enviar información usando AJAX al servidor. Lo haremos a través de un formulario e imprimiremos la respuesta. Pasar los datos por GET.

xhr.open("GET", 'pagina1.php?nombre='+nombre+'&apellidos='+apellidos, true);

Nota: usando xhr.responseText puedo en un alert o en las trazas de la consola, podré ver lo que está ocurriendo en el servidor.

Ver ejercicios

Ejercicio - Cargar combo dinámicamente

Cuando la combo cambié llamaremos a la función enviarDatos que mediante el método enviarDatos hará una petición un php que devolverá los valores para la opción seleccionada.

<?php
	$opcionSeleccionada = $_GET['opcionSeleccionada'];
	switch($opcionSeleccionada){
		case 1:
			echo "<option>Baloncesto<option>";
			echo "<option>Futbol<option>";
			echo "<option>Tenis<option>";
		break;
		case 2:
			echo "<option>Comedia</option>";
			echo "<option>Drama</option>";
			echo "<option>Ciencia Ficción</option>";
		break;
		case 3:	
			echo "<option>Parchís<option>";
			echo "<option>Dominó</option>";	
			echo "<option>Ajedrez</option>";
		break;
	}
?>
Ver ejercicio

Paginar - I

Al llegar a la página se llama la función javascript enviarDatos(url) que lanza una petición AJAX al servidor que devolverá los cinco primeros registros de la base de datos.

Ver ejemplo

Paginar - II

Además de los registros de la página, debemos imprimir los enlaces de paginación.

echo "<div id='enlacesPaginacion'>";
for($i=0, $j=1; $i<$numRegistros-1; $i+=$incrementoDePaginacion,$j++){
	$registroAlQueVoy = $i;	
	echo '<a href=”pagina1.php?&registroAlQueVoy={$registroAlQueVoy}”>Tabla{$j}</a>\n";
}
echo “</div>”;
Ver ejemplo

Paginar - III

Al pulsar sobre cualquiera de los enlaces, haré una petición AJAX llamando al método function enviarDatos(url) que me devolverá los cinco registros que hay a partir de la variable “registroAlQueVoy” enviada.

document.getElementById("capaContenedora").innerHTML = xhr.responseText;
var arrayDeEnlaces=document.getElementById("enlacesPaginacion").getElementsByTagName("a");
for(var i=0; i<arrayDeEnlaces.length; i++){
	if(arrayDeEnlaces[i]!=null)addEvent(arrayDeEnlaces[i],'click', presionEnlace, false);
}
Ver ejemplo

Autocompletar texto

<input type="text" id="palabra" autocomplete="off" onkeyup="enviarDatos()">

El código php:
$palabra = $_GET['palabra'];
$palabras=array('alma', 'algo', 'amo', 'aro', 'animo', 'árbol', 'abrir');
if(strlen($palabra)>0){
	for($i=0; $i<count($palabras);$i++){
//Si la palabra escrita es igual a alguna fracción inicial de igual longitud de cualquiera de las palabras del array, imprime las palabra del array
		if($palabra==substr($palabras[$i], 0, strlen($palabra))){
			echo $palabras[$i]."<br/>";
		}
	}
}
Ver ejemplo

JSON

Es el acrónimo de JavaScript Object Notation. Es un formato más liviano que el XML para el envío y recepción de datos.

Si la estructura de los datos a enviar es muy compleja puede ser mejor enviarlos en XML.

Ejercicio

Tras pulsar el botón de envío, en función de la opción seleccionada (1, 2, o 3) Mostraré los jugadores correspondientes al equipo seleccionado.

Formato JSON en que se enviarán los datos desde el servidor:

{
	"nombre":"Ana",
	"apellido":"Maldonado",
	"direccion":"Lima 245"
}

En Struts2, tendremos que evitar la conversión de caracteres. Para ello usaremos los siguientes atributos al recuperar la información:

<s:property escapeXml="false" escape="false" escapeJavaScript="false" escapeHtml="false" value="jugadorSerializado"/></p>

Procesamiento de la información a la vuelta:

var datos = JSON.parse(xhr.responseText);
document.getElementById("nombre").innerHTML = datos.apellidos;

Nota: para que JSON.parse funcione en IE, habrá que importar la librería JSON2:
https://github.com/douglascrockford/JSON-js/

Ver ejemplo
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?