La gloriosa puerta que lleva el rótulo dorado de AJAX

11 de marzo de 2017 AJAX javascript

Cuando se habla de lenguajes de programación nos adentramos en un terreno escabroso en el que cada quién defiende ferozmente a su campeón, sin embargo, uno de los lenguajes de programación que es adoptado por la mayoría de los programadores que utilizan lenguajes del lado del servidor es Javascript.

Pero ¿por que Javascript ha sido tan popular?, básicamente por que optimiza la velocidad de carga de las páginas utilizando los recursos del cliente, además del montón herramientas como jquery o AngularJS que te permiten parecer un atutentico mago de la informática con un par de lineas de codigo copiado y pegado directamente de internet.

Implementar AJAX es obligado cuando se trata de optimizar la velocidad de tu sitio web o aplicación, dejando una mejor experiencia para el usuario.

Explicando un poco más a detalle qué es AJAX El significado de AJAX es el acrónimo de Asíncrono, Javascript y XML y se refiere a comunicaciones asíncronas con el servidor (José López Quijado, Qué es ajax, Dómine JavaScript 3ra edición, 2011) Cuando hablamos de comunicación asíncrona queremos decir en palabras comunes que no es necesario recargar la página para solicitar y mostrar información. Tal como utilzar un iframe de html pero de forma interactiva y mucho más sofisticada.

Implementación de AJAX
Para utlizar AJAX no es necesario ninguna herramienta, todo lo que necesitamos programar del lado del cliente ya forma parte del motor de javascript, sin embargo es mucho más práctico si utilizamos jquery, dejando de lado programación que prepare nuestra página para poder entrar de lleno a solicitar datos mediante AJAX

Incluimos la librería de jquery

<script src="//code.jquery.com/jquery-latest.js"></script>

Indicamos en la función los datos que se van a enviar, la ubicación del script en este caso en php y el metodo mediante el cual se pasará la solicitud al servidor, existen varias respuestas que se pueden recibir, en este caso solo se toman las opciones antes de enviar y resultado exitoso, estos datos se sustituyen en este caso en el id con el nombre "resultado".

function realizaSolicitud(dato1, dato2){

        var parametros = {

                "dato1" : dato1,

                "dato2" : dato2

        };

        $.ajax({

                data:  parametros,

                url:   'ejemplo_ajax.php',

                type:  'post',

                beforeSend: function () {

                        $("#resultado").html("Procesando, espere por favor...");

                },

                success:  function (response) {

                        $("#resultado").html(response);

                }

        });

}

El script del lado del servidor recupera los parametros con el metodo $_POST, estos datos pueden ser enviados y recibidos igualmente por el metodo $_GET sin problemas.

El resultado que obtendrá será lo que se imprima mediante echo o print, puede ser html listo para mostrarse en una sección de la página o bien xml, json o una matriz que se tomen los datos para mostrarse en diferentes partes de la página.

Para verlo explicado a detalle recomiendo seguir leyendo en <a href="https://www.w3schools.com/js/js_ajax_intro.asp" target:"_blank">w3schools → AJAX