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
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.