Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Leguim en 28 Diciembre 2020, 00:39 am



Título: [Pregunta]: ¿Por qué pasa esto con mis llamadas AJAX? Es algo totalmente ilógico y sin sentido.
Publicado por: Leguim en 28 Diciembre 2020, 00:39 am
Hola,

bueno tengo para mostrarles hoy, dos funciones que hacen llamadas a código del servidor por medio de AJAX.

El problema que tengo es que si estas funciones ajax se ejecutan de manera "Secuencial" es decir, primero una y después la otra no va a haber ningún problema. Pero si las ejecuto al mismo momento se me bugean por lo menos la primer llamada de la siguiente manera.

Cuando digo que se bugean me refiero a que cuando la intento volver a llamar a dicha función esta no se ejecuta (no pasa absolutamente nada)

Para el ejemplo que les tengo, Un sistema donde tengo dos cajas donde en principio son de color gris pero al ejecutar "Ajax_Colour_A();" o "Ajax_Colour_B();" por medio de la consola del navegador va a modificar el color de las cajas. Si es Ajax_Colour_A modificará con color ROJO la primer caja pero si es Ajax_Colour_B modificará con color azul la segunda caja.

Además, abajo de todo habrá un mensaje en texto plano, de "Ejecutando..." cuando se este ejecutando el archivo php que este mensaje ayudará a que vean que no se ejecuta el archivo cuando se bugea su función correspondiente.

- test.php (tendrá las dos cajas y las definiciones de las funciones necesarias)
- ajax_colour_a.php (este archivo php será el que tendrá un script para modificar el color de la caja A con color ROJO)
- ajax_colour_b.php (este archivo php será el que tendrá un script para modificar el color de la caja B con color AZUL)

Aclaración: No hace falta verle el sentido al código, es solamente un ejemplo lo más básico posible para poder entender el problema.

test.php
Código
  1. <div id="box_a" style="background: #f2f2f2; border: 1px solid #e6e6e6; height: 300px; width: 300px; padding: 10px;">
  2.         <h2 style="text-align: center; margin-top: 70px;">AJAX #1</h2>
  3.         <h6 style="text-align: center; margin-top: 10px;">Ajax_Colour_A();</h6>
  4. </div>
  5. <div id="box_b" style="background: #f2f2f2; border: 1px solid #e6e6e6; height: 300px; padding: 10px;">
  6.         <h2 style="text-align: center; margin-top: 70px;">AJAX #2</h2>
  7.         <h6 style="text-align: center; margin-top: 10px;">Ajax_Colour_B();</h6>
  8. </div>
  9.  
  10. <script type="text/javascript">
  11.    var ajax_file_used = null;
  12.    var ajax_files = ['ajax_colour_a.php', 'ajax_colour_b.php'];
  13.    var ajax_enviando = [];
  14.    var ajax_solicitud = [];
  15.  
  16.    for(var i = 0; i < ajax_files.length; i++)
  17.    {
  18.        ajax_enviando[ajax_files[i]] = false;
  19.        ajax_solicitud[ajax_files[i]] = null;
  20.    }
  21.  
  22.    function Ajax_Colour_A()
  23.    {
  24.        ajax_file_used = 'ajax_colour_a.php';
  25.  
  26.        if(ajax_enviando[ajax_file_used] == false)
  27.        {
  28.            ajax_enviando[ajax_file_used] = true;
  29.  
  30.            ajax_solicitud[ajax_file_used] = $.ajax({
  31.                url: (ROOT_URL)+'/ajax/'+(ajax_file_used),
  32.                type: 'POST',
  33.                dataType: 'html',
  34.  
  35.                success: function()
  36.                {
  37.                    ajax_enviando[ajax_file_used] = false;
  38.                }
  39.            })
  40.  
  41.            .done(function(results)
  42.            {
  43.                $('body').append(results);
  44.            })
  45.  
  46.            .fail(function()
  47.            {
  48.                ajax_enviando[ajax_file_used] = false;
  49.            })
  50.        }
  51.    }
  52.  
  53.    function Ajax_Colour_B()
  54.    {
  55.        ajax_file_used = 'ajax_colour_b.php';
  56.  
  57.        if(ajax_enviando[ajax_file_used] == false)
  58.        {
  59.            ajax_enviando[ajax_file_used] = true;
  60.  
  61.            ajax_solicitud[ajax_file_used] = $.ajax({
  62.                url: (ROOT_URL)+'/ajax/'+(ajax_file_used),
  63.                type: 'POST',
  64.                dataType: 'html',
  65.  
  66.                success: function()
  67.                {
  68.                    ajax_enviando[ajax_file_used] = false;
  69.                }
  70.            })
  71.  
  72.            .done(function(results)
  73.            {
  74.                $('body').append(results);
  75.            })
  76.  
  77.            .fail(function()
  78.            {
  79.                ajax_enviando[ajax_file_used] = false;
  80.            })
  81.        }
  82.    }
  83. </script>
  84.  


ajax/ajax_colour_a.php
Código
  1. <!-- ajax_colour_a.php -->
  2. <?php
  3. echo "<br>ejecutando...<br>";
  4.  
  5. ?>
  6. <script type="text/javascript">
  7. document.getElementById('box_a').style.background = 'red';
  8. </script>
  9.  

ajax/ajax_colour_b.php
Código
  1. <!-- ajax_colour_b.php -->
  2. <?php
  3. echo "<br>ejecutando...<br>";
  4.  
  5. ?>
  6. <script type="text/javascript">
  7. document.getElementById('box_b').style.background = 'blue';
  8. </script>
  9.  

La verdad no puedo entender que es lo que está mal con el código porque todo debería de funcionar de 10, estuve todo el día de el porque de esto pero no se entiende.


Título: Re: [Pregunta]: ¿Por qué pasa esto con mis llamadas AJAX? Es algo totalmente ilógico y sin sentido.
Publicado por: Leguim en 28 Diciembre 2020, 14:44 pm
PROBLEMA SOLUCIONADO

En resumen el problema fue una mala interpretación de como funcionaba el código y no hacer uso de let (variable local).

Explico, digamos que cuando se ejecutaban en este caso 2 peticiones ajax en simultaneo lo que ocurría era que...

(https://i.ibb.co/X4yhG5J/problema-ajax.jpg)

Lo que pasa con esto es que en la variable "ajax_file_used" al ser de alcance global se va a terminar poniendo en false con el nuevo nombre modificado por lo que siempre la primer ejecución quedara con el "ajax_enviando" en true por eso después no funcionará.

La solución, usar let ajax_file_used y ya funcionaría.