[Aporte] Ajax - Sin Librerias

NeaFan · #1 (**permalink**) 05/01/2015, 21:01

Este liviano documento, te permitirá enviar peticiones al servidor y operar con la respuesta ya sea aplicando un innerHTML en algún elemento del DOM, o simplemente guardar el resultado en una variable.

La sintaxis es bastante flexible:

Código Javascript:

Ver originalajax(url) /////////////////////////////////////// Retorna la pagina definida | «Dato requerido»
ajax(url,dato) ////////////////////////////////// Puede o no enviar datos a la pagina | null predeterminado
ajax(url,dato,metodo) /////////////////////////// Puede definir el método "POST" o "GET" | "POST" predeterminado
ajax(url,dato,metodo,async) ///////////////////// Puede definir si la consulta es asincrónica | false predeterminado
 
ajax(idcontenedor,url) ////////////////////////// Escribe el resultado en el elemento
ajax(idelemento,url,dato)
ajax(idelemento,url,dato,metodo)
ajax(idelemento,url,dato,metodo,async)
ajax(idelemento,url,dato,metodo,async)

De este modo si deseas trabajar en Javascript con el resultado obtenido usaras algo así:

Código Javascript:

Ver originalvar dato = "id="+id;
var mivariable = ajax("mipagina.php",dato);
alert(mivariable);

si deseas modificar un elemento del DOM podrías usar algo así:

Código Javascript:

Ver originalvar dato = "id="+id;
ajax("#mielemento","mipagina.php",dato);

Note la aclaración #... El signo numeral indica que es un identificador de un elemento de la pagina por tanto es necesario que tenga en cuenta la sintaxis. Con la anterior fracción de código Javascript podría usted escribir el resultado obtenido en cualquier elemnto que soporte innerHTML, por ejemplo:

Código HTML:

Ver original<body id="mielemento">
...
</body>

fichero: ajax.js

Código Javascript:

Ver original/*Funcion que permite Obtener un objeto XMLHttpRequest 
 /*para manejar la conexion(AJAX) desde JavaScript hacia el Servidor */
function ObjetoXMLHttpRequest() {
    var conexionxmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        // esto en caso de que el navegador lo soporte
        conexionxmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        conexionxmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return conexionxmlhttp;
}
 
function metodo_ajax(contenedor, url, dato, metodo, asincronico) {
    //Se crea el objeto para manejar la conexion AJAX
    var xmlhttp = ObjetoXMLHttpRequest();
    //Funcion que va a procesar la peticion al servidor en caso de que se espere respuesta
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var respuesta = new String();
            respuesta = xmlhttp.responseText;
            contenedor.innerHTML = respuesta;
            document.body.appendChild(contenedor);
        }
    };
    //Apertura para el envio de la peticion
    xmlhttp.open(metodo, url, asincronico);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(dato);
};
 
function ajax(contenedor, url, dato, metodo, asincronico) {
    var respuesta = null;
    var eliminar = false;
    var acceso = null;
    if (typeof contenedor === "undefined") {
        alert("Error de sintaxis: No ha dispuesto ningun parametro");
    } else {
//Preparamos las variable a utilizar
        asincronico = asincronico || false;
        if (contenedor[0] === "#") {
            contenedor = contenedor.replace("#", "");
            dato = dato || null;
            metodo = metodo || "POST";
            acceso = "id";
        } else {
            metodo = dato || "POST";
            dato = url || null;
            url = contenedor;
            contenedor = "nk-contenedor-oculto-ajax";
            eliminar = true;
        }
//Controlar el contenido de las variables
        if (metodo !== "POST" && metodo !== "GET") {
            alert("Error de sintaxis: El metodo " + metodo + " no existe");
        } else {
            //En caso de no existir un contenedor creamos uno temporal, «Escogi un textarea por sus propiedad de usar tanto innerHTML como value
            if (contenedor === "nk-contenedor-oculto-ajax") {
                midiv = document.createElement('textarea');
                midiv.id = contenedor;
                midiv.setAttribute("hidden", "hidden");
            } else {
                midiv = document.getElementById(contenedor);
            }
            if (midiv) {
                metodo_ajax(midiv, url, dato, metodo, asincronico);
            } else {
                alert("Error de sintaxis: El objeto " + contenedor + " no existe")
            }
        }
        var midiv = document.getElementById(contenedor);
        respuesta = midiv.value;
        if (eliminar) {
            midiv.parentNode.removeChild(midiv);
        }
        midiv = null;
        return respuesta;
    }
};

Finalmente les dejo una implementación CopyPaste:

fichero: respuesta.php

Código PHP:

  <?php 
    echo "imagina que hiciste algo con ese " .  $_POST['id']; 
?>

fichero: principal.html

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML Principal</title>
        <script type="text/javascript" src="ajax.js"></script>
        <script type="text/javascript">
            function Enviame_al_Div(id) {
                dato = "id=" + id;
                ajax("#miDiv","resultado.php", dato);
            }
        </script>
    </head>
    <body>
        <select id="miopcion" onclick="Enviame_al_Div(this.value)">
            <option value="id-1">id-1</option>
            <option value="id-2">id-2</option>
            <option value="id-3">id-3</option>
        </select>
        <div id="miDiv"></div>
    </body>
</html>

Aun debo perfeccionar algunas cosas, pero esta bastante completo para mi.

caricatos · #2 (**permalink**) 06/01/2015, 00:48

Hola:

No sé la intención de complicarnos las cosas a los que no usamos librerías, y por lo tanto conocemos el funcionamiento del objeto XMLHttpRequest (Ajax), si tan solo hay que crear el objeto (lo más complicado sería discriminar navegadores), asignar las variables y si es necesario retocar cabeceras (por ejemplo para usar el método post). Luego hacer la petición y esperar la respuesta (no debes olvidarte de "XML").

Saludos

NeaFan · #3 (**permalink**) 06/01/2015, 10:35

Cita:

Iniciado por caricatos

No sé la intención de complicarnos las cosas a los que no usamos librerías

En particular, yo hasta hace poco usaba jQuery solo para implementar ajax, estuve buscando bastante información de como hacer algo como:

Código Javascript:

Ver originalreturn xmlhttp.responseText;

No tuve mucho éxito, es mas creo haber leído que estaba fuera del contexto, así que lo único que se me ocurrió con mi poca experiencia en Javascript fue crear una serie de sucesos «artilugios» para conseguir mi cometido.

Es solo un pequeño aporte de 80 lineas comentado, para aquellos que apenas están comenzando como yo, mientras aprenden y luego prescindan de usarla.

caricatos · #4 (**permalink**) 06/01/2015, 12:55

Hola:

Cita:

Iniciado por NeaFan

En particular, yo hasta hace poco usaba jQuery solo para implementar ajax...

Es curioso que muchos que se dedican a hacer páginas web, han usado librerías sin saber usar javascript nativo, y ahora tienen que arreglar tantas cosas por los vicios que se adquieren por esa guisa (como usar enlaces sin enlazar, por ejemplo), y ajax sin librerías no es más que unas 10 líneas en los casos más sencillos... y hay mucha información en la web, aunque parece que se entra más fácilmente a las páginas que usan esas librerías (como la historía de Jesucristo y Barrabás)...

Cita:

Iniciado por NeaFan

... creo haber leído que estaba fuera del contexto

¡Je, pues esa línea es la que implementa toda librería...

Cita:

Iniciado por NeaFan

...
Es solo un pequeño aporte de 80 lineas comentado, para aquellos que apenas están comenzando como yo, mientras aprenden y luego prescindan de usarla.

Pues aunque la idea no la censuro, como te he comentado, veo tu aporte mucho más complejo de lo necesario...

Como nota adicional, te recomiendo que también busques el manejo XML, yo lo usao también para leer feeds, imágenes SVg, sitemaps, etc.

Saludos