Ajax request to return error 403 Forbidden?

3

I have the following code on my site.

setInterval(function(){
    var id = $("#id_radio").val();
    var id_glob;
    $.ajax({
        type: "POST",
        url: "ajax/update_radio.php",
        data: "id="+id,
        success:function(e){
            $("#nome_radio").removeClass("ellipsis");
            $("#hora_radio").removeClass("ellipsis");
            if(e!==""){
                var expl = e.split(",");
                var id_glob = expl[3];
                if(expl[3] !== id){
                $("#img_radio").animate({
                    opacity: 0
                }, 300);
                setTimeout(function(){
                    $("#img_radio").attr("src", "radio/programas/"+expl[3]+"/"+expl[0]);
                    $("#img_radio").css("width", "100%");
                }, 300)
                setTimeout(function(){
                    $("#img_radio").animate({
                        opacity: 1
                    }, 300);
                }, 300)
                $("#nome_radio").html(expl[1]);
                $(".programa_radio").html(expl[1]);
                $(".horario_radio").html(expl[2]);
                $("#hora_radio").html(expl[2]);
                $("#id_radio").val(expl[3]);
                $("#pub_radio").animate({
                    opacity: 0
                }, 300);
                setTimeout(function(){
                    $("#pub_radio").attr("src", "adm/images/publicidades/"+expl[5]+"/"+expl[6]);
                    $("#pub_radio").css("max-width", "100%");
                }, 300)
                setTimeout(function(){
                    $("#pub_radio").animate({
                        opacity: 1
                    }, 300);
                }, 300)
                    $.ajax({
                        type: "POST",
                        url: "ajax/update_pub_radio.php",
                        data: "id="+$("#id_radio").val(),
                        success: function(t){
                             $(".carousel_imgs").animate({
                                opacity: 0
                            }, 300);
                            setTimeout(function(){
                                $(".carousel_imgs").html(t);
                            }, 300)
                            setTimeout(function(){
                                $(".carousel_imgs").animate({
                                    opacity: 1
                                }, 300);
                            }, 300)
                        }
                    })
                }
            }
        }
    });

}, 1000);

With this code it every second updates the current program of the radio but a little bit begins to appear a bug in the console (403 Forbidden). I have the exact same code on another website and it works perfectly.

And besides giving 403 error on the console, the whole site gets 403 forbidden until after a few seconds.

I have something wrong?

    
asked by anonymous 30.05.2018 / 11:01

2 answers

5

It's like the @Henrique Pauli answer , but I think you can go deeper into the problem and still make some comments in the code.

The setInterval problem:

% wont never should be used to make Ajax requests at time intervals. As the above response suggests, setInterval has no synchronization with Ajax, that is, Ajax depends on the return of the request, while the setInteval timer will be processed at each reported interval (in its case, 1 second ) firing Ajax one after another in a very short interval without waiting or wondering if the previous request was completed. The result of this is server and browser overhead, causing browser crashes as it will create a bottleneck for too much information in the processing queue, a behavior much like an infinite loop, which completely hangs up the system.

In view of this, possibly 403 is due to over requests at short intervals and / or server overload. With this, as a way to defend against abuse, the server may be suspending access temporarily, hence the 403 error.

1 second interval

Even with the fixes, I believe that 1 second is a very short interval to send requests in a row, but if the server can handle this volume, then fine.

Code Redundancy

I also note some redundancies in the code that could make your code a bit lighter:

1) 4 setTimeout s with the same time in the first Ajax and 2 in the second. Ex.:

setTimeout(function () {
    $(".carousel_imgs").html(t);
}, 300)
setTimeout(function () {
    $(".carousel_imgs").animate({
        opacity: 1
    }, 300);
}, 300)

When it could be 1 setInterval only:

setTimeout(function () {
    $(".carousel_imgs")
   .html(t)
   .animate({
        opacity: 1
    }, 300);
}, 300)

2) Identical amendments separately. Ex.:

$("#nome_radio").removeClass("ellipsis");
$("#hora_radio").removeClass("ellipsis");

When you could reduce this way below, since both elements will lose the class setTimeout at the same time:

$("#nome_radio, #hora_radio").removeClass("ellipsis");

Recalling the .ellipsis function after Ajax:

As you are using two nested Ajax, the logic would be:

If the first Ajax succeeds ( raDio() ), call the second. But if it goes wrong ( success ), call the function again after 1 second.

If the first worked out ( error ), it will call the second, but in the second you should use the callback success to start all over again after 1 second. Why not complete ? Because regardless of whether or not this error occurred in this second Ajax, you will want to start the function again. The complete is always called, if it gave error or not.

In all cases, as the other response suggested, you will use complete in these callbacks.

Completed explanations, see what the organized code looks like:

function raDio(){
   var id = $("#id_radio").val();
   var id_glob;
   $.ajax({
      type: "POST",
      url: "ajax/update_radio.php",
      data: "id="+id,
      success:function(e){
         $("#nome_radio, #hora_radio").removeClass("ellipsis");
         if(e!==""){
            var expl = e.split(",");
            var id_glob = expl[3];
            if(expl[3] !== id){
               $("#img_radio").animate({
                  opacity: 0
               }, 300);

               setTimeout(function(){
                  $("#img_radio")
                  .attr("src", "radio/programas/"+expl[3]+"/"+expl[0])
                  .css("width", "100%")
                  .animate({
                     opacity: 1
                  }, 300);

                  $("#pub_radio")
                  .attr("src", "adm/images/publicidades/"+expl[5]+"/"+expl[6])
                  .css("max-width", "100%")
                  .animate({
                     opacity: 1
                  }, 300);
               }, 300)

               $("#nome_radio, .programa_radio").html(expl[1]);
               $(".horario_radio, #hora_radio").html(expl[2]);
               $("#id_radio").val(expl[3]);
               $("#pub_radio").animate({
                  opacity: 0
               }, 300);

               $.ajax({
                  type: "POST",
                  url: "ajax/update_pub_radio.php",
                  data: "id="+$("#id_radio").val(),
                  success: function(t){
                     $(".carousel_imgs").animate({
                        opacity: 0
                     }, 300);
                     setTimeout(function(){
                        $(".carousel_imgs")
                        .html(t)
                        .animate({
                           opacity: 1
                        }, 300);
                     }, 300);
                  },
                  complete: function(){
                     setTimeout(raDio, 1000); // chama a função
                  }
               });
            }
         }
      },
      error: function(){
         setTimeout(raDio, 1000); // chama a função se deu erro
      }
   });
}

$(document).ready(raDio); // chama a função após o carregamento do DOM
    
06.06.2018 / 23:23
2

As I said in my comment I think the problem is that you are sending too many requests to the server. Imagine the following:

Every second you send 1 request, if one of them takes more than 1 second to respond you will send one more on top of it. Soon you have a cascade awaiting response and lock everything.

What you can do to try to soften this is to send the request 1 second AFTER it's all over. Something like:

function atualizarRadio() {
    var id = $("#id_radio").val();
    var id_glob;
    $.ajax({
        type: "POST",
        url: "ajax/update_radio.php",
        data: "id=" + id,
        success: function (e) {
            $("#nome_radio").removeClass("ellipsis");
            $("#hora_radio").removeClass("ellipsis");
            if (e !== "") {
                var expl = e.split(",");
                var id_glob = expl[3];
                if (expl[3] !== id) {
                    $("#img_radio").animate({
                        opacity: 0
                    }, 300);
                    setTimeout(function () {
                        $("#img_radio").attr("src", "radio/programas/" + expl[3] + "/" + expl[0]);
                        $("#img_radio").css("width", "100%");
                    }, 300)
                    setTimeout(function () {
                        $("#img_radio").animate({
                            opacity: 1
                        }, 300);
                    }, 300)
                    $("#nome_radio").html(expl[1]);
                    $(".programa_radio").html(expl[1]);
                    $(".horario_radio").html(expl[2]);
                    $("#hora_radio").html(expl[2]);
                    $("#id_radio").val(expl[3]);
                    $("#pub_radio").animate({
                        opacity: 0
                    }, 300);
                    setTimeout(function () {
                        $("#pub_radio").attr("src", "adm/images/publicidades/" + expl[5] + "/" + expl[6]);
                        $("#pub_radio").css("max-width", "100%");
                    }, 300)
                    setTimeout(function () {
                        $("#pub_radio").animate({
                            opacity: 1
                        }, 300);
                    }, 300)
                    $.ajax({
                        type: "POST",
                        url: "ajax/update_pub_radio.php",
                        data: "id=" + $("#id_radio").val(),
                        success: function (t) {
                            $(".carousel_imgs").animate({
                                opacity: 0
                            }, 300);
                            setTimeout(function () {
                                $(".carousel_imgs").html(t);
                            }, 300)
                            setTimeout(function () {
                                $(".carousel_imgs").animate({
                                    opacity: 1
                                }, 300);
                            }, 300)
                            setTimeout(atualizarRadio,1000); // Terminou tudo, reiniciar.
                        }
                    })
                }else setTimeout(atualizarRadio,1000); // Não chegou ao fim mas precisa reiniciar.
            }else setTimeout(atualizarRadio,1000); // Não chegou ao fim mas precisa reiniciar.
        }
    });
}
atualizarRadio();

NOTE: I've edited your code a little so I do not use interval and become a function. I do not have access to your data so only you can test. Hope it helps at least to give light to your problem.

    
05.06.2018 / 21:51