Buscar Más buscado

Tutorial de AJAX (Asynchronous JavaScript + XML) - Re-renderizando elementos

11 - Re-renderizando elementos

[editar]
Tutorial creado por Mononeurona. Extraido de: http://www.mononeurona.org/index.php?idp=547
27 de Octubre de 2005
< anterior | 1 ... 9 10 11 12 13 14 15 | siguiente >
Hasta ahora hemos manejado los datos que nos llegaban del procesador viendolos con un alert (window.alert(respuesta)) pues bien ahora vamos a "embeder" los resultados en nuestras páginas, tenemos 2 maneras de llamar al elemento donde se pondrá el nuevo contenido:


  • document.getElementById("elementID") : Llamaremos al elemento por el ID
    <div id="nombreid" ></div>
    Entonces vamos a cambiar nuestro window.alert(respuesta) por document.getElementById(target) creando un nuevo objeto de texto e insertandolo en el documento, quedandonos:
    target="nombreid";
    document.getElementById(target).appendchild =document.createTextNode( _objetus.responseText);
  • document.getElementsByTagName("tagName") : Llamaremos al elemento por su tag name
    <div name="nombreelem" ></div>
    No tengo una idea clara a como llamar por su tag name, porfavor pido la ayuda de alguien que sepa esto
Bien, cuando usas document.getElementsByTagName("TagName"), recuperas un array con todos los elementos que hay en tu pagina de ese tipo de tag, por ejemplo si usas el tag "DIV" recuperaras todos los divs de la pagina, entonces como debes saber sobre que div quieres mostrar lo recuperado desde el servidor pondrias:
var arrayElements = document.getElementsByTagName("DIV");
arrayElements[posX].appendChild = document.createTextNode( _objetus.responseText);
Cuidado: si incorporamos nuevos elementos de tipo Div dentro de la estructura de la pagina, el array de elementos cambiara, y puede que nuestro indice "posX" ya no sea el correcto.


Ejemplo 2
Solo cambiará nuestro cliente.


  1. PHP [inicio]
  2. <script language="javascript" type="text/javascript">
  3. funcion encarga de crear el objeto
  4. function objetus() {
  5. try {
  6. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  7. } catch (e) {
  8. try {
  9. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  10. } catch (E) {
  11. xmlhttp = false;
  12. }
  13. }
  14. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  15. xmlhttp = new XMLHttpRequest();
  16. }
  17. return xmlhttp
  18. }
  20. function primer_tope()
  21. {
  22. _objetus=monitor_get_xmlhttp()
  23. _values_send="funcion=pt"
  24. _URL_="ajax_tut.php?"
  25. _objetus.open("GET",_URL_+"&"+_values_send,true);
  26. _objetus.onreadystatechange=function() {
  27. if (_objetus.readyState
    4)
  28. {
  29. if(_objetus.status 200)
  30. {
  31. target="nuestrodiv_id"
  32. document.getElementById(target).innerHTML=_objetus.responseText;
  33. }
  34. }
  35. }
  36. _objetus.send(null);
  37. return
  38. }
  39. </script>
  40. <input type="button" name="visual" value="Pedir" onclick="primer_tope();">
  41. <!-- aqui se carga el resultado -->
  42. <div id="nuestrodiv_id"></div>

  1. PHP [fin]
  2. Bueno eso fué nuestro tope básico con AJAX.
[editar]
< anterior | 1 ... 9 10 11 12 13 14 15 | siguiente >

Opinar
54 opiniones

Tutorial de AJAX

5-5
fdmfbd

hushdg
voy a probarlo

nose pq nadie opina
er

er
asdfas

sdfg
1 2 3 4 5 6 7 ... 11 | siguiente >

Tutoriales relacionados con 'Tutorial de AJAX (Asynchronous JavaScript + XML)'

Tutorial de AJAX (Asynchronous JavaScript + XML)
Entiendase que AJAX no se refiere a usar el objeto XMLHttpRequest de manera indispensable porque... Más »

Anuncios Google

Autor y licencia de 'Tutorial de AJAX (Asynchronous JavaScript + XML)'


Tutorial de Mononeurona. Extraido de: http://www.mononeurona.org/index.php?idp=547 CopyLeft
Este trabajo está licenciado bajo la Creative Commons License. 1999-2005 © :: MonoNeurona.org ::
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.