Ajax

AJAX
Marcos de trabajo
Elkin Omar Jimenez Garcia

[Dirección de correo electrónico]
Definición de AJAX
AJAX es el acrónimo de Asynchronous JavaScript and XML, es decir: JavaScript y

XML Asíncrono. si bien los componentes en que se basan y los recursos técnicos del
que hace uso ya existían desde muchos años antes.
Normalmente, AJAX se define como una técnica para el desarrollo de páginas

(sitios) web que implementan aplicaciones interactivas. No obstante, analicemos
un poco cada una de las palabras que la forman:
 JavaScript es un lenguaje de programación conocido por ser interpretado

por los navegadores de páginas web.
 XML es un lenguaje de descripción de datos pensado fundamentalmente
para el intercambio de datos entre aplicaciones, más que entre personas.
 Asíncrono: en el contexto de las comunicaciones (y la visualización de una
página web no deja de ser un acto de comunicación entre un servidor y un
cliente) significa que el emisor emite un mensaje y continúa son su trabajo,
dado que no sabe (ni necesita saberlo) cuándo le llegará el mensaje al
receptor.
¿Para qué sirve AJAX?
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.
¿Cuál es la diferencia cuando usamos AJAX?
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
1. Crear entorno en servidor PHP
Crear una carpeta dentro del servidor de PHP elegido.
2. Crear código HTML y JavaScript
<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">

<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>
id="txtApellido"/>
<label for="txtTelefono">Telefono:</label>
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>
3. Crear código PHP y luego ejecutar la aplicación.
<?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

Ajax

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Ajax

Încărcat de

Drepturi de autor:

Formate disponibile

AJAX

Elkin Omar Jimenez Garcia

AJAX es el acrónimo de Asynchronous JavaScript and XML, es decir: JavaScript y

Normalmente, AJAX se define como una técnica para el desarrollo de páginas

 JavaScript es un lenguaje de programación conocido por ser interpretado

¿Para qué sirve AJAX?

¿Cuál es la diferencia cuando usamos AJAX?

1. Crear entorno en servidor PHP

Crear una carpeta dentro del servidor de PHP elegido.

2. Crear código HTML y JavaScript

3. Crear código PHP y luego ejecutar la aplicación.

S-ar putea să vă placă și