Marcos de trabajo
En esencia, AJAX permite que una página web que ya ha sido cargada solicite
nueva información al servidor. Dicho así, no supondría en realidad ningún invento
novedoso. Una página web que contiene un enlace permite que se solicite al
servidor nueva información cada vez que se pincha dicho enlace. Una página web
que contiene un formulario envía información al servidor y recibe de él nueva
información, normalmente la respuesta ante los datos que se han enviado. En
ambos casos hay una conexión entre el cliente y el servidor.
La diferencia es que con AJAX no es necesario recargar toda la página web, como
ocurre cuando pinchamos en un enlace o cuando pulsamos el botón submit de un
formulario. Con AJAX es posible realizar una conexión a un servidor desde dentro
de una página web usando un programa Javascript. Dicho servidor enviará una
respuesta; esta respuesta se almacenará en una variable del programa Javascript
y, una vez almacenada en la variable, podremos hacer con ella lo que deseemos.
Uso de Ajax en tres simples pasos
<html>
<head>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap/mdb.min.css"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>Ejemplo Ajax</h2>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p id="lblDatos">......</p>
<button id="btnModal" class="btn btn-primary">Abrir
modal</button>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal contenido-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Digite sus datos</h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body">
<label for="txtNombre">Nombre: </label>
<input type="text" class="form-control"
id="txtNombre"/>
<label for="txtApellido">Apellido:</label>
<input type="text" class="form-control"
id="txtApellido"/>
<label for="txtTelefono">Telefono:</label>
<input type="text" class="form-control"
id="txtTelefono"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-success"
id="btnGuardar">Guardar</button>
<img src="bootstrap/load.gif" class="img-
rounded" height="30px" width="30px" id="imgLoad" style="display:none">
</div>
</div>
</div>
</div>
</div>
<script src="bootstrap/jquery-3.4.0.min.js"
type="text/javascript"></script>
<script src="bootstrap/bootstrap.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnModal').click(function (event) {
clearModal();
$('#myModal').modal('show');
});
$('#btnGuardar').click(function (event) {
var n = $('#txtNombre').val();
var a = $('#txtApellido').val();
var t = $('#txtTelefono').val();
$.ajax({
type: "POST",
data: {"nombre": n, "apellido": a, "telefono": t},
url: "ajaxSleep.php",
beforeSend: function () {
$('#imgLoad').show();
},
success: function (response) {
$('#lblDatos').text(response);
},
error: function (jqXHR, textStatus, errorThrown)
{
//if(textStatus === 'timeout'){alert('Failed
from timeout');}
if (jqXHR.status === 0) {
alert('Not connect: Verify Network: ' +
textStatus);
} else if (jqXHR.status == 404) {
alert('Requested page not found [404]');
} else if (jqXHR.status == 500) {
alert('Internal Server Error [500].');
} else if (textStatus === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (textStatus === 'timeout') {
alert('Time out error.');
} else if (textStatus === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error: ' +
jqXHR.responseText);
}
},
timeout: 5000
//timeout: 1000//para probar timeout
}).always(function () {
$('#imgLoad').hide();
$('#myModal').modal('toggle');//Verificar uso
clearModal();
});
event.preventDefault();
});
function clearModal() {
//Limpio las cajas de texto del modal
$('.modal-body input').val('');
}
});
</script>
</body>
</html>
<?php
$nombre = $_POST["nombre"];
$apellido = $_POST["apellido"];
$telefono = $_POST["telefono"];
sleep(4);//simulamos tiempo de espera de algunos segundos
echo ("Tus datos: Nombre:" . $nombre . " - Apellido: " .
$apellido . " - Teléfono: " . $telefono);
?>
RESULTADOS