Uno de los mayores retos a los que se enfrenta un programador es cuando comienza a tocar Ajax.

Esta tecnología, no obstante, puede ser una de las mejores aliadas del programador a la hora de resolver problemas y aunque hoy en día hay opciones para obtener resultados similares como Angular, nunca está de mal conocerla y obtener resultados en un desarrollo de tan solo unos minutos.

Por ese motivo hoy os traigo un código pensado para adaptarse a cualquier situación que se necesite para su uso siguiendo unos pasos muy simples.

I Instalación de JQuery

Con el fin de simplificar aun más el uso de Ajax en nuestra aplicación vamos a utilizar JQuery, el cual se puede instalar de diferentes formas pero yo prefiero utilizar un CDN ya que es mucho más rápido para su carga.

Para ello ponemos la siguiente línea dentro del head de nuestro proyecto:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

II Creación del lugar donde tendrán lugar los cambios

En segundo lugar creamos un div con una id que sea descriptiva, por ejemplo, resultado, en nuestro código. Este será el sitio que atacaremos desde Ajax y donde se verán reflejados nuestros cambios.

<div id="resultado"></div>

III Llamada a la función que ejecuta Ajax

El siguiente componente de nuestro Ajax sería introducir un elemento donde cuando ocurra un evento, como pasar el ratón por encima, hacer click… haga que se ejecute nuestro script.

Por ejemplo usaremos un párrafo:

<p onclick="modificar()">Modificar</p>

IV  El Script Javascript

Llegamos donde está la magia de Ajax, el script que va a hacer que todo funcione, y es el siguiente:

function modificar(){
var url = "cambiar.php";//dirección url del archivo que ejecuta datos
    $.ajax({
        data: parametros,
        url: url,
        type: 'post',
        beforeSend: function () {//elemento que queramos poner mientras ajax carga
            $("#resultado").html("Procesando, espere por favor...");
        },
        success: function (response) {//resultado de la función
            $("#resultado").html(response);
        }
    });
}

Naturalmente lo mejor es que este script se encuentre en otro archivo .js de ese modo podemos tener acceso desde otros archivos de la aplicación.

El código es autoexplicativo pero más abajo vamos a explicar como tomar los parámetros y como trabajar con ellos.

V Introducir el contenido en la web

Ajax ya ha hecho su trabajo ahora le toca a PHP hacer su trabajo, aquí es donde aparecerían las consultas a las base de datos, la apertura de componentes… por lo que se abre todo un mundo de posibilidades.

Lo bueno de esto es que como el contenido se carga en el div marcado comienza a formar parte de la web, por lo que hereda las reglas css, javascript…

Apéndice: Pasando parámetros

Para pasar parámetros es tan sencillo como recibirlos en la función, como ya sabemos hacer:

function nombre($valor1, $valor2)

Pero el enviarlos puede ser más complejo ya que puede depender de valores dinámicos y no estáticos o incluso que tome valores cambiantes del DOM…

Para ello debemos de usar los selectores de JQuery, por ejemplo:

• $(‘#ciudad’).text()
• $(«input:text»).val(«Miguel López»);

De este modo la llamada a la función sería:

Modificar

Ahora bien para pasar los parámetros al archivo php donde aparece la lógica de negocio debemos de pasarlos dentro de la función de javascript, quedando de la siguiente forma siguiendo con este ejemplo:

function modificar(nombre, ciudad){
    var url = "cambiar.php";//dirección url del archivo que ejecuta datos
    var parametros = { //cada parámetro se pasa con un nombre en un array asociativo
        "nombre": nombre,
        "ciudad": ciudad
    };
    $.ajax({
        data: parametros,//los parametros se pasan poresta variable
        url: url,
        type: 'post',
        beforeSend: function () {//elemento que queramos poner mientras ajax carga
            $("#resultado").html("Procesando, espere por favor...");
        },
        success: function (response) {//resultado de la función
            $("#resultado").html(response);
        }
   });
}

Finalmente los parámetros se pueden recoger normalmente por POST en el archivo PHP y de ese modo tratarlos.

Uniendo todas las piezas

Vamos a unir toda las piezas para ver como queda todo:

Archivo html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>
	<p id="ciudad" value="">Córdoba</p>
	<p onclick="modificar('Miguel', $('#ciudad').text())">Modificar<p>
	<div id="resultado"></div>
<script>

</script>
	<script type="text/javascript" src="js.js"></script>
</body>
</html>

Archivo js:

function modificar(nombre, ciudad){
    var url = "cambiar.php";
    var parametros ={
            "nombre" : nombre,
            "ciudad" : ciudad
    };
	$.ajax({
        data:  parametros,
        url:   url,
        type:  'post',
        beforeSend: function () {
                $("#resultado").html("Procesando, espere por favor...");
        },
        success:  function (response) {
                $("#resultado").html(response);
        }
    });
}

Archivo php

<?php
$nombre = $_POST['nombre'];
$ciudad = $_POST['ciudad'];
echo $nombre . " " . $ciudad;
?>