Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » JavaScript » Código de JavaScript - Metodo Ajax - Sin Librerias

Código de JavaScript - Metodo Ajax - Sin Librerias

Volver
Agregar Código Fuente
<<>>
Imágen de perfil

Metodo Ajax - Sin Libreriasgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 5 de Enero del 2015 por Neder Alfonso
3.088 visualizaciones desde el 5 de Enero del 2015
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
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 12 de Enero del 2015 (Publicado el 5 de Enero del 2015)gráfica de visualizaciones de la versión: 1.0
3.089 visualizaciones desde el 5 de Enero del 2015
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 (1)

Imágen de perfil
ScriptShow
26 de Agosto del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: 1.0

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad
Acepto las políticas de privacidad

http://lwp-l.com/s2989