2013-12-09 71 views
0

如果這個問題看起來是重複的,我很抱歉,但是在其他人中我都找不到能夠正確解釋問題和解決方案的答案。JQuery獲取流式內容而不會凍結瀏覽器

我有一個python應用程序,它正在處理請求(並且流正常工作)時流式傳輸一些HTML數據,在客戶端我希望在服務器發送新數據時更新一個框所以我想出了一個JQuery get請求,它是通過按下按鈕來觸發的。

問題是,只有在jQ請求完成時才更新盒子,所以問題: 在執行請求jQ請求時,是否可以更新HTML(DOM)?

下面的代碼

 

$(document).ready(function(){ 

    $('#rescanevts').on('click', 
    function(e) { 
     $('#output').show(); 


     $.get('/actions/rescan/events/switch/{{data.switch.id}}',function(data) { 
    $('#output').append(data) 
     }); 
    } 
);  
}); 

+0

是的。您需要使用定期抓取xhr.responseText屬性內容的setInterval。 –

+0

對不起,但我是新進入這整個AJAX/JS的東西,所以你可以請提供一些很好的例子? –

回答

0

我開始對googlenet研究,發現一些替代品,但大多數人並沒有記錄在案(jQuery的流又名門戶)以及其他一些我們真的很晦澀像我這樣的小白。

我發現XMLHttpRequestonreadystatechange屬性,並用它來更新我的消息框中的HTML。以下代碼

 
$(document).ready(function(){ 
    var outframe = $('#outcontent'); 

    // Function which will be called whenever the XML requester has a state 
    // change (normally new data being received) and will update the full content 
    // with new data (including what was already in the buffer) 
    // This can be expensive in long streams 
    function reqListener() { 
    outframe.html(this.responseText); 
    }; 

    $('#rescanevts').on('click', 
    function(e) { 
     $('#output').show(); 
     // The XMLHttpRequest 
     var oReq = new XMLHttpRequest(); 
     oReq.open("get", "/actions/rescan/events/switch/{{data.switch.id}}", true); 
     oReq.onreadystatechange = reqListener; 
     oReq.send(); 
    } 
);  
});