Foros del Web » Programando para Internet » Javascript »

crear una lista de codigos y ejecutar peticiones ajax una a una

 Estas en el tema de crear una lista de codigos y ejecutar peticiones ajax una a una en el foro de Javascript en Foros del Web. necesito construir un ajax que procese unas lista de peticiones a partir de un array de javascript o de unos datos obtenidos ejemplo tengo 5 ...
  #1 (permalink)  
Antiguo 09/09/2012, 21:54
 
Fecha de Ingreso: septiembre-2011
Ubicación: Bogota Colombia
Mensajes: 11
Antigüedad: 12 años, 6 meses
Puntos: 0
crear una lista de codigos y ejecutar peticiones ajax una a una
necesito construir un ajax que procese unas lista de peticiones a partir de un array de javascript o de unos datos obtenidos ejemplo tengo 5 codigos y estos codigos se deben pasar a un ajax que cuando la solicitud este completa llamara al siguiente codigo, puedo tener esos codigos en un array como dije antes y recorrerlos con un for o manejarlos de forma independiente.

el codigo que tengo es dos archivos ajax.js y tree.js

ajax.js
Código javascript: 
Ver original
  1. var Ajax = new Object();
  2. Ajax.showMessage=1;
  3. Ajax.Message='';
  4. Ajax.Request = function(url, callbackMethod)
  5. {
  6.     Page.getPageCenterX();
  7.     Ajax.request = Ajax.createRequestObject();
  8.     Ajax.request.onreadystatechange = callbackMethod;
  9.     Ajax.request.open("POST", url, true);
  10.     Ajax.request.send(url);
  11. }
  12. Ajax.setMessage = function (message)
  13. {
  14.     Ajax.Message=message;
  15. }
  16. Ajax.setShowMessage = function (m)
  17. {
  18.     Ajax.showMessage=m;
  19. }
  20. Ajax.createRequestObject = function()
  21. {
  22.     var obj;
  23.     if(window.XMLHttpRequest)
  24.     {
  25.         obj = new XMLHttpRequest();
  26.     }
  27.     else if(window.ActiveXObject)
  28.     {
  29.         obj = new ActiveXObject("MSXML2.XMLHTTP");
  30.     }
  31.     return obj;
  32. }
  33. Ajax.CheckReadyState = function(obj)
  34. {
  35.     if ( Ajax.showMessage == 0 )
  36.     {
  37.         document.getElementById('loadingbox').style.display = "none";
  38.     }
  39.     else
  40.     {
  41.         document.getElementById('loadingbox').style.display = "block";
  42.     }   
  43.     if(obj.readyState < 4) {
  44.         document.getElementById('loadingbox').style.top = (Page.top + Page.height/2)-100;
  45.         document.getElementById('loadingbox').style.left = Page.width/2-75;
  46.         document.getElementById('loadingbox').style.position = "absolute";
  47.         document.getElementById('loadingbox').innerHTML = '<table border=0 cellpadding=0 cellspacing=1 width=100 bgcolor="#000000"><tr><td align=center bgcolor="#ffffff" class=loading height="22px" style="font-family:verdana;font-size:10px">Loading..</td></tr></table>';
  48.     }
  49.     if( obj.readyState == 4 )
  50.     {
  51.         if(obj.status == 200)
  52.         {
  53.             document.getElementById('loadingbox').innerHTML = "<table border=0 cellpadding=0 cellspacing=1 width=100 bgcolor=#000000><tr><td align=center class=loading bgcolor=#ffffff height='22px' style='font-family:verdana;font-size:10px'>"+Ajax.Message+"</td></tr></table>";
  54.             setTimeout('Page.loadOut()',2200);
  55.             return true;
  56.         }
  57.         else
  58.         {
  59.             document.getElementById('loadingbox').innerHTML = "HTTP " + obj.status;
  60.         }
  61.     }
  62. }
tree.js
Código javascript: 
Ver original
  1. var K0=window,Q1=document;
  2. function collpase(id,O2)
  3. {
  4.  Q1.getElementById(id).style.display="none";
  5.  var str='symbol_'+id.replace(/_/g,'');
  6.  if (Q1.getElementById(str))
  7.  {
  8.   var mainid=id.replace(/_/g,'');
  9.   var symbolhref='<span id="symbol_'+mainid+'"><a href="javascript:expand(\''+id+'\','+O2+');" class="nodecls">'+UI.expand+'</a></span>';
  10.   Q1.getElementById(str).innerHTML=symbolhref;
  11.  }
  12. }
  13.  
  14. function expandSearch(id,O2)
  15. {
  16.   //loadChild(id,O2);
  17.  var strParam="services.php?method=getCat&id="+id+"&catid="+O2;
  18.  Ajax.Request(strParam,generateChildSearch);
  19.   Q1.getElementById(id).style.display="block";
  20.  var str='symbol_'+id.replace(/_/g,'');
  21.  if(Q1.getElementById(str))
  22.  {
  23.    var mainid=id.replace(/_/g,'');
  24.    var symbolhref='<span id="symbol_'+mainid+'"><a id="a_'+O2+'" href="javascript:collpase(\''+id+'\','+O2+');" class="nodecls">'+UI.collapse+'</a></span>';
  25.    Q1.getElementById(str).innerHTML=symbolhref;
  26.  }
  27. }
  28.  
  29.  
  30.  
  31.  
  32. function generateChildSearch()
  33. {
  34.  Ajax.setShowMessage(1);
  35.  Ajax.setMessage("Loaded..");
  36.  if(Ajax.CheckReadyState(Ajax.request))
  37.  { 
  38.  if(Ajax.request.readyState==4){
  39.  if(Ajax.request.status==200){
  40.   //alert(Ajax.request.responseText);
  41.   var   response=eval('('+Ajax.request.responseText+')');
  42.   var str='';
  43.   var i=0;
  44.   if(response.data.length==0)
  45.   {
  46.    Q1.getElementById(response.id).style.display="none";
  47.   }
  48.   var mainid=response.id.replace(/_/g,'');
  49.   for(i=0;i < response.data.length;i++)
  50.   {
  51.    str+='<div id="'+mainid+''+i+'" style="padding-left:10px;">';
  52.    str+='<span id="symbol_'+mainid+''+i+'"><a id="a_'+response.data[i].id+'" href="javascript:expand(\''+response.id+'_'+i+'\','+response.data[i].id+');" class="nodecls">'+UI.expand+'</a></span>';
  53.    str+='<a id="name_'+response.data[i].id+'" style="" href="javascript:getData('+response.data[i].id+');" class="nodecls">'+response.data[i].name+'</a></div>';
  54.    str+='<div id="'+response.id+'_'+i+'" style="padding-left:30px;display:none"></div>';
  55.   }
  56.   //alert(response.id);
  57.   //alert(str);
  58.   var datoMostrar = Q1.getElementById(response.id); 
  59.  // Q1.getElementById(mainid).innerHTML=str;
  60.   datoMostrar.innerHTML=str;}
  61.   }
  62.  }
  63. }

lo que quiero es que la funcion generateChildSearch() tome las variables que dije de los codigos para lanzar por ajax el envio de parametros lo he logrado el problema es que en esta funcion generateChildSearch() no puedo ejecutar esa lista de peticiones, verificar cuando el status de la peticion es 200 y asi enviar la proxima peticion les agradezco cualquier ayuda gracias.
Última edición por zerokilled; 09/09/2012 a las 22:06 Razón: aplicar bbcode al código
  #2 (permalink)  
Antiguo 09/09/2012, 22:42
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: crear una lista de codigos y ejecutar peticiones ajax una a una
buenas,
a ver si lo entiendo. ¿quieres realizar una serie de peticiones pero una a la vez? es decir, cuando se completa la petición, seguir con la próxima. en dicho caso, tienes que hacer una especie de bucle pero no con las sentencias habituales como for o while. básicamente consiste que en el evento, luego de determinar que la petición fue completada —readyState 4—, el evento debe iniciar nuevamente una petición ajax con el próximo elemento del array. por supuesto, esto es una explicación bien resumida pero hay otros detalles adicionales a tomar en cuenta.

Código: 
function ajaxEventHandler(){
  if(ajax.readyState == 4){
  ...
  if(array.length) makeAjaxRequest(array.unshift(), ...);
  }
}
asumiendo que:
  • ajaxEventHandler es el handler para onreadystatechange
  • ajax es la petición
  • makeAjaxRequest es una función que crea una nueva petición, y
  • array es la lista

nota: como podrás apreciar, he adaptado tu mensaje original para que el código pueda ser más comprehensible. por favor, al publicar código (especialmente si es largo) utilice la etiqueta bbcode más apropiada según sea el caso.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 10/09/2012, 18:12
 
Fecha de Ingreso: septiembre-2011
Ubicación: Bogota Colombia
Mensajes: 11
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: crear una lista de codigos y ejecutar peticiones ajax una a una
gracias por la informacion ajuste un poco el codigo de acuerdo a lo que me dices, lo modifique de esta manera

tree.js


Código Javascript: 
Ver original
  1. var K0=window,Q1=document;
  2. function collpase(id,O2)
  3. {
  4. *Q1.getElementById(id).style.display="none";
  5. *var str='symbol_'+id.replace(/_/g,'');
  6. *if (Q1.getElementById(str))
  7. *{
  8. * var mainid=id.replace(/_/g,'');
  9. * var symbolhref='<span id="symbol_'+mainid+'"><a href="javascript:expand(\''+id+'\','+O2+');" class="nodecls">'+UI.expand+'</a></span>';
  10. * Q1.getElementById(str).innerHTML=symbolhref;
  11. *}
  12. }
  13. *
  14. function expandSearch(id,O2,arr)
  15. {
  16. * //loadChild(id,O2);
  17. *var strParam="services.php?method=getCat&id="+id+"&catid="+O2;
  18. *Ajax.Request(strParam,generateChildSearch(arr));
  19. * Q1.getElementById(id).style.display="block";
  20. *var str='symbol_'+id.replace(/_/g,'');
  21. *if(Q1.getElementById(str))
  22. *{
  23. * *var mainid=id.replace(/_/g,'');
  24. * *var symbolhref='<span id="symbol_'+mainid+'"><a id="a_'+O2+'" href="javascript:collpase(\''+id+'\','+O2+');" class="nodecls">'+UI.collapse+'</a></span>';
  25. * *Q1.getElementById(str).innerHTML=symbolhref;
  26. *}
  27. }
  28. *
  29. *
  30. *
  31. *
  32. function generateChildSearch(arr)
  33. {
  34. *//el tamaño del array siempre es de 5 cuando no hay un codigo obtenido
  35. *//previamente en la consulta llegara como cero
  36. *padre5=arr[0];
  37. *padre4=arr[1];
  38. *padre3=arr[2];
  39. *padre2=arr[3];
  40. *padre1=arr[4]; 
  41.  
  42.   
  43. *Ajax.setShowMessage(1);
  44. *Ajax.setMessage("Loaded..");
  45. *if(Ajax.CheckReadyState(Ajax.request))
  46. *{ 
  47. *if(Ajax.request.readyState==4){
  48. *if(Ajax.request.status==200){
  49. * //alert(Ajax.request.responseText);
  50. * var * response=eval('('+Ajax.request.responseText+')');
  51. * var str='';
  52. * var i=0;
  53. * if(response.data.length==0)
  54. * {
  55. * *Q1.getElementById(response.id).style.display="none";
  56. * }
  57. * var mainid=response.id.replace(/_/g,'');
  58. * for(i=0;i < response.data.length;i++)
  59. * {
  60. * *str+='<div id="'+mainid+''+i+'" style="padding-left:10px;">';
  61. * *str+='<span id="symbol_'+mainid+''+i+'"><a id="a_'+response.data[i].id+'" href="javascript:expand(\''+response.id+'_'+i+'\','+response.data[i].id+');" class="nodecls">'+UI.expand+'</a></span>';
  62. * *str+='<a id="name_'+response.data[i].id+'" style="" href="javascript:getData('+response.data[i].id+');" class="nodecls">'+response.data[i].name+'</a></div>';
  63. * *str+='<div id="'+response.id+'_'+i+'" style="padding-left:30px;display:none"></div>';
  64. * }
  65. * //alert(response.id);
  66. * //alert(str);
  67. * var datoMostrar = Q1.getElementById(response.id); 
  68. *// Q1.getElementById(mainid).innerHTML=str;
  69. * datoMostrar.innerHTML=str;
  70. *//aqui ingreso cada codigo segun se complete la parte 'tree1_0_2' esta misma 
  71. *//estructura la uso para obtener los demas nodos del arbol
  72. *expandSearch('tree1_0_2',padre5,''); 
  73. *//a partir de aqui tendria que verificar nuevamente que la peticion se complete
  74. *//y lanzar la siguiente peticion con la misma estructura.
  75. *}
  76. * }
  77. *}
  78. }

en el codigo anterior expandSearch('tree1_0_2',padre5,''); me deberia armar nuevamente la peticion y cuando esta peticion se complete lanzar la nueva, el problema es que me toca volver a colocar las condiciones
if(Ajax.request.readyState==4){
if(Ajax.request.status==200){
envio un valor en vacio puesto que el array ya lo habia pasado antes entonces las variables ya tienen un valor
y de esta forma no funciona. que estoy haciendo mal? ¿debo crear una nueva funcion ajax que maneje de manera independiente el objeto ajax que tengo en el fuente ajax.js?

Etiquetas: ajax, codigos, funcion, html, js, lista, peticiones, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:21.