1. Carga de contenido con Ajax
  2. Enviar una petición con parámetros al servidor
  3. Mostrar un previo
  4. Enviar array unidimensional
  5. Una combo se carga en función de otra
  6. Paginar
  7. Enviar un array bidimensional utilizando JSON
  8. Ejercicio - Hospital
  9. Petición crossdomain
  10. Cambiar la url del navegador

Carga de contenido con Ajax

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>

<p><a id="enlace1" href="contenido1.html">Texto primero</a></p>
<p><a id="enlace2" href="contenido2.html">Texto segundo</a></p>
<div id="detalles">Seleccione su signo.</div>

funciones.js
$(document).ready(function(){
	$("a").click(presionEnlace);
});
function presionEnlace(){
	var pagina=$(this).attr("href");
	$("#detalles").load(pagina); 
	return false;
}
load

Carga de contenido con icono loading

index.html<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>

<p><a id="enlace1" href="contenido1.html">Texto primero</a></p>
<p><a id="enlace2" href="contenido2.html">Texto segundo</a></p>
<div id="detalles">Seleccione su signo.</div>

funciones.js
$(document).ready(function(){
	$("a").click(presionEnlace);
});
  
function presionEnlace(){
	var pagina=$(this).attr("href");
	$("#detalles").ajaxStart(inicioEnvio);   //Podremos evitar que se vuelva a lanzar inicioEnvio con cada petición AJAX usando $(“detalles”).unbind("ajaxStart");
	$("#detalles").load(pagina); 
	return false;	// devolviendo false prevenimos  el comportamiento por defecto del enlace
}

function inicioEnvio(){
	$("#detalles").html('<img src="cargando.gif">');
}

Iconos de precarga: http://loading.io/

icono de carga

Enviar una petición con parámetros al servidor

index.html
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>

Ingrese nro:<input type="text" id="nro" name="nro" size="10"><br>
<input id="enviar" type="button" value="Calcular el cuadrado">
<div id="resultado">Resultado.</div>
funciones.js
$(document).ready(function(){
	$("enviar").click(presionSubmit);
});
function presionSubmit(){
	var v=$("nro").val();
	//$.get([nombre de la página],[parámetros a enviarse por el método get],[función que recibirá la respuesta del servidor])
	$.get("pagina1.php", {numero:v}, llegadaDatos);
 	//La petición de la línea anterior equivale a: 
	$.ajax({type: "GET", url:"alCuadrado.action",data:{ numero: v}, success:llegadaDatos});
	return false;
}
function llegadaDatos(datos){
	$("#resultado").html(datos);
}
pagina1.php
<?php
	$cuadrado=$_REQUEST['numero']*$_REQUEST['numero'];
	echo $cuadrado;
?>

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

get

Ver lo que está pasando

Cuando hacemos una petición AJAX muchas veces no sabemos lo que está pasando porque no nos salen los mensajes de error en la pantalla. Para salvar este problema podemos:

Mostrar un previo I

<a class="enlace" href="consulta.php?pag=1">Contenido 1</a>
<a class="enlace" href="consulta.php?pag=2">Contenido 2</a>
…
function enviarDatos(){
	var url = $(this).attr("href");
	$.get(url, procesarRespuesta);
}

Mostrar un previo II

Al hacer mouse out, la capa debe desaparecer.

ajax con mouse out

Mostrar previo III

Mostrar el previo en una capa flotante.

ajax maquetando

Mostrar previo IV

El previo se muestra en la posición del ratón.

$(".enlace").mouseover(function(evt){
coordenadaX = evt.pageX;
coordenadaY = evt.pageY;
…
$("#capaContenedora").css("top",coordenadaY);
$("#capaContenedora").css("left", coordenadaX);
Ventana dónde indique el ratón

Ejercicio

Calcular el producto de tres números enviados por ajax al servidor. Dichos números serán recogidos de unos cuadros de texto.

Post con muchos datos

Enviar un array unidimensional al servidor
(para enviar un array multiple usaremos JSON)

index.html
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
<p><input type="button" id="boton" value="enviar"/>

funciones.js
$(document).ready(function(){
	$("boton").click(presionBoton);
});
function presionBoton(){
	var arrayMultiple = [[1,2],[3,4],[5,6]];	
	arrayMultiple = JSON.stringify(arrayMultiple);
	$.post("procesaArrayMultiple.php", {'arrayMultiple': arrayMultiple},respuesta);
}
function respuesta(datos){
	alert(datos);
}

procesaArray.php
<?php
	print_r($_REQUEST['nombre_array']);
?>
Enviar array

Una combo se carga en función de otra

index.html<script src="js/jquery.js"></script>
<script src="js/load_combo.js"></script>
<select id="combo1" name="combo1">
	<option value="0">Selecciona una opci&oacute;n</option>
	<option value="1">Opcion 1</option>
	<option value="2">Opcion 2</option>
	<option value="3">Opcion 3</option>
	<option value="4">Opcion 4</option>
</select>
<select id="combo2" name="combo2">
	<option value=""> -- Selecciona combo1 -- </option>
</select>
load_combo.js
$(document).ready(function(){
	$("#combo1").change(function(event){
		//almacenamos en id el value de la option seleccionada
		var id = $("#combo1").find(':selected').val();
		$("#combo2").load('ajax/load_combo2.php?id='+id);
	});
});
load_combo2.php
<?php
	echo '<option value="0">Has seleccionado la opci&oacute;n '.$_REQUEST['id'].' de la combo 1</option>';
	//Si quisiera acceder a la base de datos le podría pasar el $_REQUEST['id'] como parámetro q lq consulta
	$conexion = mysqli_connect(“localhost”, “root”, “”, “futbol”);
 	$opciones_respuesta="";
	$consulta = "SELECT * from tabla WHERE id_padre = ".$_REQUEST['id'];
	$result = mysqli_query($conexion, $consulta);
	while ($fila = mysqli_fetch_assoc($result)) {
	        $opciones_respuesta.= '<option value="'.$fila['id'].'">'.$fila['nombre'].'</option>';
	};
	echo $opciones_respuesta;
?>
Combos dependientes

Paginar - I

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

Paginar

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>”;
Paginar 2

Enviar un array bidimensional utilizando JSON

index.html<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
<p><input type="button" id="boton" value="enviar"/>
funciones.js
var arrayMultiple = [];
$(document).ready(function(){
	$("boton").click(presionBoton);
});
function presionBoton(){
	var arrayMultiple = [[1,2],[3,4],[5,6]];	
	arrayMultiple = JSON.stringify(arrayMultiple);
	$.post("procesaArrayMultiple.php", {'arrayMultiple': arrayMultiple},respuesta);
}
function respuesta(datos){
	alert(datos);
}
procesaArrayMultiple.php
<?php
	$arrayMultiple = json_decode($_REQUEST['arrayMultiple']);
	print_r($arrayMultiple);
?>
			
		

Nota:
Para serializar y deserializar usando Java, podemos usar esta librería.

Enviar array múltiple

Recuperar info en formato JSON

index.html
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/funciones.js"></script>
<p><input type="button" id="boton" value="enviar"/>
funciones.js
$(document).ready(function(){
	$("#boton").click(presionBoton);
});
function presionBoton(){
	$.post('ajax/recuperaJSON.php', showResult);
}
function showResult(res){
	var obj = JSON.parse(res);
	alert ("Mesaje Respuesta: " +obj[1].dato2);
}
recuperaJSON.php
<?php
	$array = array(array("dato1"=>"111", "dato2"=>"222"), array("dato1"=>"333", "dato2"=>"444"));
	echo json_encode($array);
?>
Enviar JSON post

Ejercicio - Hospital

La tabla de pacientestiene 4 campos: id(PRIMARY KEY, AUTOINCREMENT), nombre 
(VARCHAR), apellidos (VARCHAR), fecha_alta(DATE). Bucle for en javascript para recorrer arrays: for(i in array){ list += "
  • "+array[i].nombre+"
  • "; select += ''; }
    Hospital

    Petición crossdomain

    En PHP debemos añadir el siguiente código:
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");

    Cambiar la url del navegador

    De esta forma podremos distinguir entre diferentes peticiones de AJAX:

    location.hash = page;

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

    ¡Hola! ¿En qué puedo ayudarte?