Entendemos AJAX como una tecnica o tecnología ejecutable en el lado del cliente, válida para múltiples plataformas y que combina varios lenguajes de programación especificos. Nos permite entre otras cosas realizar acciones en una web que necesite alguna respuesta del servidor sin necesidad de tener que recargarla. Podemos llamar a un archivo PHP para mostrar simplemente su contenido, invocar a una función externa que nos genere o nos devuelva algún valor o crear de forma mas eficiente funciones dinamicas para servicios como inicios de sesión y actualización de perfiles de usuario. Conseguimos de esta forma hacer que una página web pese menos, se recargue menos y sea mas dinámica.
Para entender mejor el uso de esta tecnica vamos a crear un archivo HTML en el que llamaremos mediante un enlace a un archivo PHP para mostrar su contenido.
El index.html contendrá un enlace con un identificador y un <div> sin contenido con un identificador, en la cabecera incluimos la libreria de jQuery y una función que se encargará de traer el contenido del archivo PHP a la página sin movernos de ella.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$("#llamar_AJAX").on("click", function(e){
e.preventDefault();
$("#contenido_php").load("contenido_php.php");
});
});
</script>
</head>
<body>
<a href="#" id="llamar_AJAX">Llamar al contenido PHP</a>
<div id="contenido_php"></div>
</body>
</html>A continuacion creamos el archivo contenido_php.php, en el que podemos incluir cualquier contenido
<?php
echo '<h2>AJAX</h2>';
echo '<p>Este es el contenido que ha sido llamado por AJAX</p>';
?>Al pulsar el enlace el <div> contenido_php se mostrará con el contenido del archivo al que hemos llamado.
Ahora que ya hemos entendido esta función simple, podemos crear mediante esta tecnica funciones mas complejas, por ejemplo, podemos crear un sistema que nos devuelva un valor en función de los datos introducidos en un formulario.Ejemplo:
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="formulario" id="form_id" action="devuelve.php">
Introduce tu edad: <input type="number" name="valor" value=" ">
<input type="submit" value="Enviar">
</form>
<br>
<div id="contenido"></div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$("#form_id").on("submit", function(e){
e.preventDefault();
$.post("devuelve.php", $("#form_id").serialize(), function(respuesta){
$("#contenido").html(respuesta);
});
});
</script>
</body>
</html>devuelve.php
<?php
if ($_POST["valor"]>17) {
echo "<p>"."Eres mayor de edad"."</p>";
}
else {
echo "<p>"."No eres mayor de edad"."</p>";
}
?>El código de este articulo con todos los ejemplos, está disponible en mi cuenta de Github.
anonimus 30 enero, 2020
muy bueno .
Dowar 24 febrero, 2019
Fantástico me sirvió mucho