Duda y recomendaciones

[Legoltaz]

Hola a tod@s.

Como ya dije en otro hilo de este subforo, estoy empezando a aprender un poco de AJAX, y me gustaría que me recomendarais algún tutorial y me resolvierais esta duda: ¿Cómo puedo, en AJAX, obtener información de una parte concreta de un archivo (por ejemplo, el contenido de un div determinado)?

[caricatos]

Hola:

Lo del aprendizaje... se puede resumir en el DOM para las cosas del navegador, el objeto XMLHttpRequest para las peticiones, y en el servidor (el lenguaje que dispongas) como generar salidas xml (mi preferida) o texto plano (la más usada)

Sobre obtener el contenido de un div... pues en principio, si es de la página origen, no hace falta Ajax, sino el mismo DOM (aunque me parece que eso lo saabes y no es esa la consulta)... para ficheros externos puede ser extraído con el lenguaje del servidor, creo que mejor leer el archvo como texto plano (por ejemplo, con php se podría usar file(), y con javascript consultando el objeto con responseXML si es un xml bien formado, o responseText... como texto igual sea mejor crear una expresión regular para obtenerlo (ya sea en el servidor como en el navegador)... pero ese tema no lo controlo muy bien...

Espero no haberte líado más.

Saludos

[Vhan]

para obtener info concreta, hay varias cosas...
para eso hay que aprender a usar los atributos "name" y "id" en los tags (tags como <div> <form> <iframe>... entre otros); asi mismo debes saber un poco como usar el submit en botones, links y por supuesto el uso de forms.

si usas id en los tags digamos... <div id='div1'>contenido</div>
puedes sacar su info y cambiarla con esto: document.getElementById('div1').innerHTML

si usas nombres, como
<form name='menu'.....>
</form>
puedes acceder a ellos con document.menu.(mas atributos que esten en el form)

por ejemplo:
<form name='menu'.....>
<input type="Checkbox" name='check'/>
</form>
para acceder a los valores o atributos del checkbox usarias algo como:
document.menu.check.(atributos del checkbox)

si quieres ir comprobandolo y haciendo pruebas( en tu html), usa la funcion "alert()"
por ejemplo:
alert(document.menu.check);
y.. si quieres saber que valores le puedes sacar a tus componentes (en este caso el Checkbox), puedes buscar en google para ver sus posibles atributos (ejemplo ".cheked") y asi sigues con tus pruebas:
alert(document.menu.check.cheked);

espero haya servido un poco ;), creo que hay mas formas de obtener info... como el uso del "this" o "form"... espero alguien pueda expandir la info...

[Legoltaz]

Iniciado por Vhan

para obtener info concreta, hay varias cosas...
para eso hay que aprender a usar los atributos "name" y "id" en los tags (tags como <div> <form> <iframe>... entre otros); asi mismo debes saber un poco como usar el submit en botones, links y por supuesto el uso de forms.

si usas id en los tags digamos... <div id='div1'>contenido</div>
puedes sacar su info y cambiarla con esto: document.getElementById('div1').innerHTML

si usas nombres, como
<form name='menu'.....>
</form>
puedes acceder a ellos con document.menu.(mas atributos que esten en el form)

por ejemplo:
<form name='menu'.....>
<input type="Checkbox" name='check'/>
</form>
para acceder a los valores o atributos del checkbox usarias algo como:
document.menu.check.(atributos del checkbox)

si quieres ir comprobandolo y haciendo pruebas( en tu html), usa la funcion "alert()"
por ejemplo:
alert(document.menu.check);
y.. si quieres saber que valores le puedes sacar a tus componentes (en este caso el Checkbox), puedes buscar en google para ver sus posibles atributos (ejemplo ".cheked") y asi sigues con tus pruebas:
alert(document.menu.check.cheked);

espero haya servido un poco ;), creo que hay mas formas de obtener info... como el uso del "this" o "form"... espero alguien pueda expandir la info...

Gracias, Vhan, pero esos temas los domino lo suficiente

Gracias también a caricatos


Por ejemplo, una duda que tengo y que antes quizá no explique correctamente: tengo un archivo a.html donde iría el script de JS, y quiero llamar con AJAX al archivo b.html, pero solo a un div en concreto (con una id determinada, o lo que sea). ¿Cómo puedo hacer eso? Porque con responseText me devuelve el texto de todo el documento.

¿Qué es lo que falla en este código?

a.html

Código JavaScript:

function f(url,capa,valores){
    var cont = document.getElementById(capa);
    var http = new XMLHttpRequest();
    http.open('GET',url,true);
    http.onreadystatechange = function(){
        if(http.readyState == 4) cont.innerHTML = http.responseText;
        else cont.innerHTML = "cargando...";
    }
    http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    http.send(valores);
}
<form name="frm" method="get" action="#" onSubmit="f('b.php?c1='+document.getElementById('campo1').value+'&c2='+document.getElementById('campo2').value,'c','')">
a = <input type="text" name="a" id="campo1" /><br />
b = <input type="text" name="b" id="campo2" /><br />
<input type="submit" value="Enviar" />
</form>
<br /><br />
<div id="c" style="border:2px dotted red;">Datos</div>
 

b.php

Código PHP:

<?php
$a = $_GET['c1'];
$b = $_GET['c2'];
?>
---> A = <?=$a?><br />
---> B = <?=$b?>