Buscar Más buscado

Tutorial de AJAX (Asynchronous JavaScript + XML) - Ejemplos (2)

13 - Ejemplos (2)

[editar]
Tutorial creado por Mononeurona. Extraido de: http://www.mononeurona.org/index.php?idp=547
27 de Octubre de 2005
< anterior | 1 ... 11 12 13 14 15 | siguiente >
Ejemplo 5
cliente


PHP [inicio]

  1. <script language="javascript"  type="text/javascript">
  2. /*
  3. * Funciones ejemplo-5 AJAX - BEGIN
  4. */
  5. function objetus() {
  6. try {
  7. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  8. } catch (e) {
  10. try {
  11. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  12. } catch (E) {
  13. xmlhttp = false;
  14. }
  15. }
  16. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  17. xmlhttp = new XMLHttpRequest();
  18. }
  19. return xmlhttp
  20. }
  21. /*
  22. * ejemplo 5 BEGIN
  23. */
  24. function ejemplo5_start()
  25. {
  26. ej5_P();
  27. return
  28. }
  29. function ej5_P()
  30. {
  31. _objetus=objetus()
  32. _target=document.getElementById('ej5_td_P')
  33. document.getElementById('ej5_mensajes').innerHTML = "";
  34. _target.style.display=
  35. _values_send="funcion=ejemplo5&opcion=padre"
  36. _URL_="procesador.php?"
  37. _objetus.open("GET",_URL_+"&"+_values_send,true);
  38. _objetus.onreadystatechange=function() {
  39. if (_objetus.readyState
    1)
  40. {
  41. (_target.innerHTML )?(_target.innerHTML="Cargando Ciudades"):null;
  42. }
  43. else if(_objetus.readyState
    4)
  44. {
  45. if(_objetus.status 200)
  46. {
  47. _target.innerHTML = _objetus.responseText;
  48. document.getElementById('ej5_td_H').style.display=
  49. ej5_H(document.getElementById('ej5_P').value);
  50. document.getElementById('ej5_td_submit').style.display=
  51. document.getElementById('ej5_add_P').style.display=
  52. document.getElementById('ej5_add_H').style.display=
  53. }
  54. }
  56. }
  57. _objetus.send(null);
  58. }
  59. function ej5_H(idena)
  60. {
  61. _objetus=objetus()
  62. _target=document.getElementById('ej5_td_H')
  63. _loader=document.getElementById('ej5_loader')
  64. _values_send="funcion=ejemplo5&opcion=hijo&id="+idena
  65. _URL_="procesador.php?"
  66. _loader.style.display=
  67. _objetus.open("GET",_URL_+"&"+_values_send,true);
  68. _objetus.onreadystatechange=function() {
  69. if(_objetus.readyState
    4)
  70. {
  71. if(_objetus.status 200)
  72. {
  73. _target.innerHTML = _objetus.responseText;
  74. _loader.style.display='none'
  75. }
  76. }
  78. }
  79. _objetus.send(null);
  80. }
  81. function ej5_procesar()
  82. {
  83. if(document.getElementById('ej5_P').value
    )        {
  84. window.alert('No se a seleccionado una ciudad')
  85. return
  86. }
  87. _objetus=objetus()
  88. _padre=document.getElementById('ej5_P').value
  89. _hijo=document.getElementById('ej5_H').value
  90. _loader=document.getElementById('ej5_loader')
  91. _values_send="funcion=ejemplo5&opcion=procesar&id="+_padre+","+_hijo
  92. _URL_="procesador.php?"
  93. _loader.style.display=
  94. _objetus.open("GET",_URL_+"&"+_values_send,true);
  95. _objetus.onreadystatechange=function() {
  96. if(_objetus.readyState 4)
  97. {
  98. if(_objetus.status
    200)
  99. {
  100. document.getElementById('ej5_mensajes').innerHTML = _objetus.responseText;
  101. _loader.style.display='none'
  102. }
  103. }
  105. }
  106. _objetus.send(null);
  107. }
  108. function ej5_add_P()
  109. {
  110. _objetus=objetus()
  111. _loader=document.getElementById('ej5_loader')
  112. _name_P=document.getElementById('ej5_add_P_nombre')
  113. _add_P_submit=document.getElementById('ej5_add_P_submit')
  114. _add_P_submit.disabled=true
  115. _values_send="funcion=ejemplo5&opcion=add_P&nombre="+encodeURIComponent(_name_P.value)
  116. _URL_="procesador.php?"
  117. _loader.style.display=
  118. _objetus.open("GET",_URL_+"&"+_values_send,true);
  119. _objetus.onreadystatechange=function() {
  120. if(_objetus.readyState 4)
  121. {
  122. if(_objetus.status
    200)
  123. {
  124. resp_mensaje=_objetus.responseText;
  125. ej5_P();
  126. document.getElementById('ej5_mensajes').innerHTML = resp_mensaje
  127. _loader.style.display='none'
  128. _name_P.value=
  129. _add_P_submit.disabled=false
  130. }
  131. }
  133. }
  134. _objetus.send(null);
  135. }
  136. function ej5_del_P()
  137. {
  138. if(document.getElementById('ej5_P').value )        {
  139. window.alert('No se a seleccionado una ciudad')
  140. return
  141. }
  142. _objetus=objetus()
  143. _loader=document.getElementById('ej5_loader')
  144. _del_P_submit=document.getElementById('ej5_del_P_submit')
  145. _del_P_submit.disabled=true
  146. _values_send="funcion=ejemplo5&opcion=del_P&id="+document.getElementById('ej5_P').value
  147. _URL_="procesador.php?"
  148. _loader.style.display=
  149. _objetus.open("GET",_URL_+"&"+_values_send,true);
  150. _objetus.onreadystatechange=function() {
  151. if(_objetus.readyState
    4)
  152. {
  153. if(_objetus.status 200)
  154. {
  155. resp_mensaje=_objetus.responseText;
  156. ej5_P();
  157. document.getElementById('ej5_mensajes').innerHTML = resp_mensaje
  158. _loader.style.display='none'
  159. _del_P_submit.disabled=false
  160. }
  161. }
  163. }
  164. _objetus.send(null);
  165. }
  166. function ej5_add_H()
  167. {
  168. if(document.getElementById('ej5_P').value
    )        {
  169. window.alert('No se a seleccionado una ciudad')
  170. return
  171. }
  172. _objetus=objetus()
  173. _name_H=document.getElementById('ej5_add_H_nombre')
  174. _loader=document.getElementById('ej5_loader')
  175. _add_H_submit=document.getElementById('ej5_add_H_submit')
  176. _add_H_submit.disabled=true
  177. _values_send="funcion=ejemplo5&opcion=add_H&id="+document.getElementById('ej5_P').value+"&nombre="+encodeURIComponent(_name_H.value)
  178. _URL_="procesador.php?"
  179. _loader.style.display=
  180. _objetus.open("GET",_URL_+"&"+_values_send,true);
  181. _objetus.onreadystatechange=function() {
  182. if(_objetus.readyState 4)
  183. {
  184. if(_objetus.status
    200)
  185. {
  186. resp_mensaje=_objetus.responseText;
  187. ej5_H(document.getElementById('ej5_P').value);
  188. document.getElementById('ej5_mensajes').innerHTML = resp_mensaje
  189. _loader.style.display='none'
  190. _name_H.value=
  191. _add_H_submit.disabled=false
  192. }
  193. }
  195. }
  196. _objetus.send(null);
  197. }
  198. function ej5_del_H()
  199. {
  200. if(document.getElementById('ej5_H').value )        {
  201. window.alert('No se a seleccionado una zona')
  202. return
  203. }
  204. _objetus=objetus()
  205. _loader=document.getElementById('ej5_loader')
  206. _del_H_submit=document.getElementById('ej5_del_H_submit')
  207. _del_H_submit.disabled=true
  208. _values_send="funcion=ejemplo5&opcion=del_H&id="+document.getElementById('ej5_P').value+","+document.getElementById('ej5_H').value
  209. _URL_="procesador.php?"
  210. _loader.style.display=
  211. _objetus.open("GET",_URL_+"&"+_values_send,true);
  212. _objetus.onreadystatechange=function() {
  213. if(_objetus.readyState
    4)
  214. {
  215. if(_objetus.status 200)
  216. {
  217. resp_mensaje=_objetus.responseText;
  218. ej5_H(document.getElementById('ej5_P').value);
  219. document.getElementById('ej5_mensajes').innerHTML = resp_mensaje
  220. _loader.style.display='none'
  221. _del_H_submit.disabled=false
  222. }
  223. }
  225. }
  226. _objetus.send(null);
  227. }
  228. /*
  229. * ejemplo 5 END
  230. */
  231. /*
  232. * Funciones ejemplo1 AJAX - END
  233. */
  234. </script>
  235. <input type="button" value="Ejecutar ejemplo-5" class="boton" onclick="ej5_P();">
  236. <br>
  237. <br>
  238. <div id='ej5_mensajes'></div>
  239. <br>
  240. <table id=tabla-clase-A cellpadding="5">
  241. <tr>
  242. <td class="articulo_body" id="ej5_td_P" style='display:none;'></td>
  243. <td class="articulo_body" id="ej5_td_H" style='display:none;'></td>
  244. <td class="articulo_body" id="ej5_td_submit" style='display:none;'>
  245. <input type="button" class="boton" value="Procesar" onclick='ej5_procesar();'>
  246. </td>
  247. </tr>
  248. <tr><td id='ej5_loader' class='articulo' colspan=3 style='display:none;text-align:center;'>
  249. Procesando.........
  250. </td></tr>
  251. <tr><td id='ej5_add_P' class='articulo' style='display:none;text-align:center;'>
  252. <input type="text" class="text" id="ej5_add_P_nombre">
  253. <br><br>
  254. <input type="button" class="boton" id="ej5_add_P_submit" value="add" onclick="ej5_add_P();">
  256. <input type="button" class="boton" id="ej5_del_P_submit" value="del" onclick="ej5_del_P();">
  257. </td>
  258. <td id='ej5_add_H' class='articulo' style='display:none;text-align:center;'>
  259. <input type="text" class="text" id="ej5_add_H_nombre">
  260. <br><br>
  261. <input type="button" class="boton" id="ej5_add_H_submit" value="add" onclick="ej5_add_H();">
  263. <input type="button" class="boton" id="ej5_del_H_submit" value="del" onclick="ej5_del_H();">
  264. </td>
  265. <td style='display:none;'></td>
  266. </tr>
  267. </table>

PHP [fin]
[editar]
< anterior | 1 ... 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.