使用jQuery动态地向元素追加内容

Question

我希望能够有一个ajax得到更新文本在一个span标签每次它被触发。

  $.ajax({
    type: 'GET',
    url: "JSON URL",
    cache: false,
    contentType: 'application/json',
    dataType: 'json',
    success: function(html){
      $('#status_frame_span').prepend(html.status)
      alert(html.status)
    },
    error: function(jq,stats,errmes) {
             alert("Error" + errmes);
           }
  });

第一次触发时，从URL返回的json的内容被正确地添加到span中。但是，对于后续的触发，它不会更新。

我如何确保每次触发的内容得到更新?

Answer 1

是什么触发了对服务器的调用?它是正在更新的HTML中的按钮或链接吗?如果是，则在更新UI时可能会丢失事件处理程序。或者，其他东西丢失了事件处理程序，它没有调用方法来触发get请求，等等。

HTH .

Answer 2

当然您的视图只更新一次:您只调用服务器一次!

如果，正如你的标签所建议的那样，你正在使用长轮询(请确保是这种情况，我不确定你对什么是事件、轮询和远程呼叫有一个非常清楚的概念)，那么你需要每次收到一个新的请求!

在success和error处理程序中，都必须递归地向服务器发出AJAX调用。您还必须为呼叫设置一个超时，例如，30秒后可以取消它们并开始一个新的呼叫。

您还应该对递归调用实现某种限制，除非您99.99%确定服务器页面永远不会发送错误。否则，你会杀死你的客户。

为了完整起见，我必须补充这将是HTML5 SSE或WebSocket的一个很好的用例。

Answer 3

它不是这样工作的-如果调用成功回调-连接已关闭，因此您的长轮询将在请求完成后死亡。

长轮询背后的思想是使连接保持活动状态。正确配置您的服务器，以便它将保持连接打开尽可能长的时间(设置超时时间尽可能高)。

这是我喝咖啡休息时的一个方法(未测试):

服务器

• 每条消息必须以分隔符结尾::PART::
• 服务器必须正确配置，这意味着将超时设置得尽可能高!

客户端(浏览器)

// setup longpoll, check all 250ms for new data in the stream
var myPoller  = new LongPoll('some-url', 250);
// bind connection lost
myPoller.bind('longpoll:end', function(evt) {
  alert('connection lost - trying reconnect');
});
// bind error event
myPoller.bind('longpoll:error', function(evt, errmsg) {
  alert('error: ' + errmsg);
});
// bind data event
myPoller.bind('longpoll:data', function(evt, data) {
  try {
    // try to parse json
    data = $.parseJSON(data);
    // prepend 
    $('#status_frame_span').prepend(data.status);
  } catch(e) {
    // invalid json
    alert('invalid json: ' + data);
  }
});

longpoll.js

var LongPoll = function(url, timeout) {
  // url we connect to
  this.url        = url;
  // running?
  this.isRunning  = false;
  // timer for checking the stream
  this.timer      = null;
  // the length of the received data
  this.dataLength = 0;
  /*
    The messages has to be delimited by the delimiter like:
    first data::PART::second data::PART::third data::PART::
  */
  this.delimiter = RegExp.new("::PART::", 'gm');

  // residue from previous transmission
  this.residue   = ''
};

// connect to server
LongPoll.prototype.connect = function() {
  var self = this;
  // reset data length
  this.dataLength = 0;
  // reset residue
  this.residue    = '';
  // start ajax request
  this.xhr  = $.ajax({
    type: 'GET',
    url: this.url,
    cache: false,
    contentType: 'application/json',
    dataType: 'text',
    success: function(){
      // the connection is dead!
      self.xhr = null;
      // trigger event 
      $(self).trigger('longpoll:end');
      // reconnect if still running
      if(self.isRunning) {
        self.connect();
      }
    },
    error: function(jq,stats,errmes) {
      // stop timer and connection
      self.stop();
      $(self).trigger('longpoll:error', errmes);
    }
  }); 
};

// process data
LongPoll.prototype.process = function(buffer) {
  var self = this;
  // check if there is anything new
  if(buffer.length > this.dataLength) {
    var newData = this.residue + buffer.substring(this.dataLength, buffer.length);
    // reset residue
    this.residue  = '';
    // store the new position
    this.dataLength = buffer.length;
    // split data
    var dataParts = newData.split(this.delimiter);
    // how many full parts?
    var fullParts = newData.match(this.delimiter).length;
    if(dataParts.length > fullParts) {
      // pop residue (incomplete message)
      this.residue += dataParts.pop();
    }    
    $.each(dataParts, function(index, part) {
      // broadcast data parts
      $(self).trigger('longpoll:data', $.trim(data));
    });    
  }
};

// check for data
LongPoll.prototype.receive = function() {
  var self = this;
  // connection still there?
  if(this.xhr) {
    // process buffer
    this.process(this.xhr.responseText);
  }  
};

// start long poll
LongPoll.prototype.start = function() {
  var self = this;
  // set flag
  this.isRunning = true;
  this.timer  = setInterval(function() { self.receive(); }, this.timeout);
  this.connect();
};
// stop long poll
LongPoll.prototype.stop = function() {
  // set flag
  this.isRunning = false;
  // clear timer 
  clearInterval(this.timer);
  if(this.xhr) {
    // abort request
    this.xhr.abort();
  }
};