What is the proper way of doing long polling using jQuery and AJAX

Question

I have a project which involves live notification. So I stumbled upon using socket io but I didn't have enough time to learn it yet. So I tried doing it with AJAX and jQuery. Below is my code structure and I was wondering if this is gonna work with no drawbacks?

setInterval(function(){
  if( !element.hasClass('processing') ){
    element.addClass('processing');
    $.ajax({
      type:         'post',
      dataType:     'json',
      url:      ajaxurl,
      data:         {},
      success:  function( response ){
        /* Success! */
        element.removeClass('processing');
      }
    });
  }
}, 2500);

i think this one is looks good to me. further readings https://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery — Gayan, Jul 07 '16 at 06:18
Looks fine to me, the only change I would make is to put the removeClass function in the 'complete' callback rather than 'success' just to be thorough. — Anthony Sherratt, Jul 07 '16 at 06:28
Possible duplicate of [How do I implement basic "Long Polling"?](http://stackoverflow.com/questions/333664/how-do-i-implement-basic-long-polling) — ADreNaLiNe-DJ, Jul 07 '16 at 06:36

score 12 · Accepted Answer · answered Jul 07 '16 at 06:59

Some Extra Info

The way you described will work. From Experience I would just like to point out some things.

I usually do a recursive function, allows you to wait your interval between ajax calls and not a fixed rate. //OPTIONAL BUT DOES GIVE THE SERVER SOME BREATHING ROOM.
Use window.setTimeout() with an isActive flag. //ALLOWS YOU TO STOP POLLING FOR WHATEVER REASON, AND BECAUSE FUNCTION IS RECURSIVE START UP AGAIN IF NEED BE
For Sake of being thorough, I found it is always a good idea to handle the error case of the $.ajax() post. You could perhaps display some message telling the user he is no longer connected to the internet etc.

Some Sample Code:

var isActive = true;

$().ready(function () {
    //EITHER USE A GLOBAL VAR OR PLACE VAR IN HIDDEN FIELD
    //IF FOR WHATEVER REASON YOU WANT TO STOP POLLING
    pollServer();
});

function pollServer()
{
    if (isActive)
    {
        window.setTimeout(function () {
            $.ajax({
                url: "...",
                type: "POST",
                success: function (result) {
                    //SUCCESS LOGIC
                    pollServer();
                },
                error: function () {
                    //ERROR HANDLING
                    pollServer();
                }});
        }, 2500);
    }
}

NOTE

This is just some things I picked up using the exact method you are using, It seems that Web Sockets could be the better option and I will be diving into that in the near future.

Yes, many told me that it would be better to use socket.io though as far as browser support and learning curve and time is concerned, this will do for now. — Martin Cipriano, Jul 07 '16 at 08:12

score 0 · Answer 2 · edited May 23 '17 at 12:18

Please refer : Jquery : Ajax : How can I show loading dialog before start and close after close?

I hope this could help you

$("div.add_post a").click(function(){

  var dlg = loadingDialog({modal : true, minHeight : 80, show : true});
            dlg.dialog("show");
  $.ajax({
        url : "/add.php",
        complete : function (){
            dlg.dialog("hide");
        }
     });
 return false;
});


//--Loading dialog

function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...")
{
    var dlg = $("<div><img src='/theme/style/imgs/busy.gif' alt='загрузка'/> "+text+"<div>").dialog(dOpts);
    $(".ui-dialog-titlebar").hide();

    return dialog;
}

What is the proper way of doing long polling using jQuery and AJAX

2 Answers2

Some Extra Info

NOTE

Linked