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
44 opiniones

ggg

ggggggg
ui

F
Sólo funcionaba la primera vez.

Este ejemplo sólo me funcionaba la primera vez que lo usaba, luego la consola de errores de javascript devolvía el error: "objetus is not a function". Para arreglarlo era necesario declarar en la función objetus la variable objetus como nula en primera línea de la misma. Var objetus = false;

pd: gracias, muy bueno el curso.
Refrescar con ajax.

Hola que tal como le harias si tienes que refrescar una pagina automáticamente con ajax. Gracias.
Recomendaciones.

Que tal, he visto que algunas personas tienen algunas dudas que son muy comunes. Primero me gustaria decir que el hecho de comenzar a aprender a utilizar ajax haciendolo todo tu mismo (la creacion del objeto xmlhttprequest, la recepcion de los valores, los codigos de error y estatus, etc. ) es muy bueno ya que cuando te encuentras problemas esto te puede ayudar a solucionarlos. Ahora bien con el tiempo se puede comenzar a utilizar algunas utilerias que te ayudan a desligarte de lo comentado anteriormente y enfocarte a tu propio codigo, estas utilerias (entre muchas otras) son prototype, jquery, script. Acul. Us, etc

finalmente lecomento a aquellas personas que desean algo mas grafico, pueden recurrir a jmaki, el cual es un plug in para netbeans el cual encapsula las funcionalidades de las utilerias antes mencionadas pero en un entorno mas grafico.
1 2 3 4 5 6 7 ... 9 | 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.