Hacer Pregunta

Conecta

2votos

Cargar un div externo con AJAX (sin jQuery)

preguntó
Web
5832 Vistas
1 Respuestas
abierta

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!

por AdrianCrew (140 puntos) en Web

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.

por carlossevi (63.580 puntos)

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 Leonardo-Tadei (227.320 puntos)
Cargar paginas en un div pasando la URL como parámetro
preguntado por saramaran (160 puntos) Abr 4, 2017 en Web
reetiquetada por Abr 5, 2017

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

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

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

Etiquetas

Categorías

Conecta