Javascript 使用jQuery将内容动态附加到元素

我希望能够让ajaxget在每次触发span标记时更新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。但是，对于随后的点火，它不会更新

---

如何确保每次触发时内容都得到更新？

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

---

HTH.

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

如果，正如您的标签所示，您正在使用（请确保确实如此，我不确定您是否非常清楚什么是事件、投票和长途电话），那么每次收到请求时，您都需要提出新的请求

在

success

和

error

处理程序中，都必须递归地对服务器进行AJAX调用。您还必须为通话设置超时，这可能会取消通话，并在30秒后启动新的通话

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

---

为了完整性，我必须补充一点，这将是HTML5或HTML的一个很好的用例。但是它们还没有准备好投入生产使用。

如果调用了成功回调，那么这种方式就不起作用了——连接已经关闭，所以一旦请求完成，您的长轮询就会失效

长时间轮询背后的想法是让连接保持活跃。正确配置服务器，使其尽可能长时间保持连接打开（将超时设置为尽可能高）

以下是我的咖啡休息时间的方法（未经测试）：

服务器

// 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);
  }
});

• 每封邮件都必须以分隔符：：PART:结尾：
• 服务器必须正确配置，这意味着设置尽可能高的超时

客户端（浏览器）

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();
  }
};

---

这是rails应用程序的内部。javascript在页面初始加载时被触发。在原始页面中有一些将html加载到iframe中的链接。html加载会触发新的代码触发。我有一个rabbitmq服务器，有一个从队列中读取消息的分部。我想模拟日志系统的web前端，这样当新消息被注入队列时，它们就会显示在网页上。我们在生产模式下使用socket.io，没有任何问题：）当然，如果您使用的库提供并隐藏在一个漂亮的API后面，没有问题：）这仍然不意味着WebSocket作为一种技术，就其本身而言，已经可以生产了。如果您要在您的网站中实现，您将对浏览器支持和维护感到非常失望；）