entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Cargar un div externo con AJAX (sin jQuery)

Hola, quiero lograr algo similar al .load() de jQuery: https://api.jquery.com/load/ pero sin jQuery.

$( "#result" ).load( "ajax/test.html #container" );

es decir, cargar un div externo con AJAX, solo ese div y nada más.

Navegando por internet me encontré éste código

function loadXMLDoc() {
var xmlhttp;

if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}

xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send(); }

el problema es que carga toda la página y lo que quiero lograr es que cargue solo un div en especial, ¿alguno quisiera ayudarme? ¡Gracias!

0voto

carlossevi comentado

¿Puedes añadir información sobre cómo llamas a la función? Si lo llamas desde un enlace hay que añadir un preventDefault() para evitar que el enlace tenga efecto si se ejecuta el JS.

1 Respuesta

2votos

Leonardo-Tadei Puntos227320

Hola Adrian,

este código ejemplifica lo que estás buscando:

Archivo ajax1.html:

<!DOCTYPE html>
<html>
<head>
    <title>Carga dinámica de DIV</title>

<script type="text/javascript">
// crea el ambiente JS para recibir la respuesta dinámica
function Conectar(){
    if (window.XMLHttpRequest){
        return new XMLHttpRequest()
    } else {
        var xmlHttp = false;
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
            try {
            return ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                xmlHttp = false;
            }
        } // try
    } // else
} // Conectar()

var xmlHttp = Conectar(); // crea el objeto XMLHttpRequest
var elDIV = ''; // valor del DIV a cargar

function cargarDIV(p){
    url = 'ajax1.txt'
    elDIV = p;
    xmlHttp.open("GET", url);
    xmlHttp.onreadystatechange = callServer;
    xmlHttp.send();
}

function callServer() {
    // Si termina la petición y responde Ok 
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            var res = xmlHttp.responseText;
            document.getElementById(elDIV).innerHTML = res;
    }
}

</script>
<body onload="javascript:cargarDIV('unDIV');">
<h1>Carga dinámica de DIV</h1>

<div id="unDIV">@</div>

</body>
</head>

Archivo ajax1.txt:

contenido emitido<br>
<b>recibido</b>

Esto se vuelve más interesante si en vez de llamar a un TXT llamás a un PHP que responda dinámicamente a las peticiones, pero su utilidad dependerá de lo que estés haciendo puntualmente.

Lo generalicé un poco para que el DIV que contendrá el contenido se indique vía un parámetro, así el código queda independiente del ID del DIV. Se podría generalizar más haciendo que el URL se pase como parámetro, así el mismo código sirve para cualquier DIV y cualquier URL llamado.

Saludos!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta