Código de JavaScript - Metodo Ajax - Sin Librerias

Imágen de perfil

Metodo Ajax - Sin Libreriasgráfica de visualizaciones


JavaScript

Publicado el 05 de Enero del 2015 por Neder Alfonso
1.668 visualizaciones desde el 05 de Enero del 2015. Una media de 21 por semana
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:
ajax(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í:

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

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

var 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:

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

1.0

Actualizado el 12 de Enero del 2015 (Creado el 05 de Enero del 2015)gráfica de visualizaciones de la versión: 1.0
1.669 visualizaciones desde el 05 de Enero del 2015. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Presenta inconvenientes en el envío GET y el retorno de la función cuando async = true.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/*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;
    }
};



Comentarios sobre la versión: 1.0 (0)


No hay comentarios
 

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2989