檢查是否添加了新消息AJAX

我試圖在標籤標題中實現某種類似Facebook通知'（1）'的功能。下面是我未來的網站消息框的簡化代碼 - 我想要做的就是使用AJAX來檢查新消息是否添加（新的tr），但不刷新網站，然後在標籤標題中顯示預期的數字。這裏是我到目前爲止的代碼 - 但我不得不增加一個新錶行後刷新頁面...檢查是否添加了新消息AJAX

<body> 
    <div id="container"> 
     <div id="tab"> 
      <table id="tabl"> 
       <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Message</th> 
       </tr> 
       <tr> 
        <td>1</td> 
        <td>John</td> 
        <td>Hey! What's up!</td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>Kylie</td> 
        <td>Are you there Kylie?</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>Peter</td> 
        <td>Please, buy me a milk</td> 
       </tr>      
      </table> 
     </div> 
    </div> 
    <script> 
     var count = document.getElementById('tabl').rows.length - 1; 
     var x = new XMLHttpRequest(); 
     var i = 0; 
     x.onreadystatechange = function() { 
      if (x.readyState == 4 && x.status == 200) { 
       document.title = '(' + count + ')' + ' ' + document.title; 
      } 
     }; 
     x.open('GET', 'http://localhost/php13/notif.php', true); 
     x.send(); 
    </script> 
</body>

如何實現這一目標而無需刷新網站？

來源

2016-08-02 Piter

IIRC被稱爲AJAX輪詢：http://stackoverflow.com/questions/6835835/jquery-simple-polling-example – yuriy636

你在哪裏獲得你的AJAX請求/響應中的任何實際數據？ – David

同意。不，我們必須使用AJAX輪詢 –

-2

以及最簡單的方法是使用setinterval()

<script> 
setInterval(function(){ 
     var count = document.getElementById('tabl').rows.length - 1; 
     var x = new XMLHttpRequest(); 
     var i = 0; 
     x.onreadystatechange = function() { 
      if (x.readyState == 4 && x.status == 200) { 
       document.title = '(' + count + ')' + ' ' + document.title; 
      } 
     }; 
     x.open('GET', 'http://localhost/php13/notif.php', true); 
     x.send(); 
}, 1000); 
    </script>

這對新郵件要檢查每1秒

來源

2016-08-02 19:34:09

這不是週期性地調用服務器的正確方法。如果沒有消息說1小時，您將請求服務器3600次。 –

是的，這是低效的，但這是問題所在。 –

很酷。這也將解決問題，根據我也 –

這是因爲，對於所有的實際目的count變量有甚至之前確定的靜態值文檔加載事件或任何AJAX調用都會發生。您的AJAX函數不會更改count的值，因此每次AJAX執行時，都會將document.title的值設置爲相同的靜態值，並且增加了數量不斷增加的count強段。

所以我們說count是4在初始頁面加載（因爲它會在你的例子）和初始document.title價值Test這裏是document.title值將如何與每個AJAX執行更改：

onload - Test 
1st - (4) Test 
2nd - (4) (4) Test 
3rd - (4) (4) (4) Test 
etc.

正如你可以看到，你這裏的邏輯都是錯誤的。

來源

2016-08-02 19:37:51

所以你會如何實現這一點，所以'數'不會是靜態的？ – Piter

@Piter取決於AJAX結果如何返回。 Youquestion沒有說明你打算在AJAX成功處理器中發生什麼。是否應該將表更新爲（可能）不同數量的行？ AJAX響應是否提供了用於插入的HTML DOM元素（在這種情況下，您可能需要像第一次那樣重新計算），還是提供了需要用來更新DOM的JSON或類似數據結構（在這種情況下，您可能會能夠從數組長度或類似物中得出計數）？ –

您將需要實施一項技術，它允許您從服務器向客戶端（瀏覽器）發送消息。

它可能是Websockets,Server Sent Events或something else。

在您決定使用哪種技術之前，您需要考慮要支持的傳統瀏覽器並檢查是否支持該技術。您可以在caniuse.com上查看。

你也可以使用像socket.io這樣的庫來嘗試使用更新的技術（比如Websockets），如果瀏覽器不支持它，則會回退到舊的解決方案。

如果你寫了更多關於你的後端，可以給你更精確的anwser。

來源

2016-08-02 19:46:37

我不想使用websockets，只是簡單的ajax – Piter

所以你必須定期輪詢服務器。這已經被其他答案覆蓋了。 –

你使用什麼後端？ PHP的？ ASP？ Node.js的？

無論如何，我認爲有人實際上鍵入併發送該消息，處理此類功能的絕對最佳方式是在消息發送時執行該消息。你必須已經知道收件人的信息，所以當它發送時，告訴收件人（的）更新他們的通知。

我知道你列出了ajax，但使用websockets可能是最好的技術來實現這一點，你不需要任何常量循環來檢查服務器的更新或任何ajax輪詢，服務器可以簡單地發送消息給沒有他的收件人不得不做任何客戶端，接收到新的消息。

來源

2016-08-02 19:49:22 user2267175

我正在使用php。我不想使用websockets，只是純粹簡單的ajax – Piter

檢查是否添加了新消息AJAX

回答

相關問題