Keeping a jQuery .getJSON() connection open and waiting while in body of a page?

问题

I'm writing a basic push messaging system. A small change has caused it to stop workingly properly. Let me explain. In my original version, I was able to put the code in the of a document something like this:

<head>
  ...text/javascript">
  $(document).ready(function(){
    $(document).ajaxStop(check4Updates);
    check4Updates();
  });

  function check4Updates(){
    $.getJSON('%PATH%', callback);
  };
...
</head>

This worked nicely and would keep the connection open even if the server return null (which it would after say a 2 minute timeout). It would just keep calling the getJSON function over and over indefinitely. Happy Panda.

Now, I must put the code segment in between tags. Access to the $(document).ready() function pretty much won't work.

<body>
...
check4Updates();
$("body").ajaxStop(check4Updates);
...
</body>

This works... for a while. Shortly thereafter, it will stop calling check4Updates and get into an infinite loop and use 100% processor time.

I'm trying to get it so that check4Updates is repeatedly called until the page is closed. If anyone has any insights as to why my simple change is no longer functioning as expected, PLEASE let me know. Thank you for taking the time to read and help me out.

Best Regards, Van Nguyen

回答1:

Yeah, you're not going to want to use that loop, you're pretty much DOSing yourself not to mention locking the client.

Simple enough, create a polling plugin:

Source: http://web.archive.org/web/20081227121015/http://buntin.org:80/2008/sep/23/jquery-polling-plugin/

Usage:

$("#chat").poll({
    url: "/chat/ajax/1/messages/",
    interval: 3000,
    type: "GET",
    success: function(data){
        $("#chat").append(data);
    }
});

The code to back it up:

(function($) {
    $.fn.poll = function(options){
        var $this = $(this);
        // extend our default options with those provided
        var opts = $.extend({}, $.fn.poll.defaults, options);
        setInterval(update, opts.interval);

        // method used to update element html
        function update(){
            $.ajax({
                type: opts.type,
                url: opts.url,
                success: opts.success
            });
        };
    };

    // default options
    $.fn.poll.defaults = {
        type: "POST",
        url: ".",
        success: '',
        interval: 2000
    };
})(jQuery);

回答2:

Use a timeout, these types of loops are a really bad idea, so if you must employ polling for whatever reason, make sure you don't keep hammering your backend.

回答3:

You either need to change to a polling method as described by altCognito, or you can use comet, which is designed to push data from the server to the client. Depending on your needs, you could use something like Jetty (for Java) or Twisted (Python) or WebSync (ASP.NET/IIS)