HTML 什么是长轮询和短轮询

在本文中，我们将了解轮询概念，以及不同类型的轮询，了解它们之间的基本区别和相关的代码示例。

轮询指的是通过定期向服务器发出API调用，在固定时间间隔内检查新数据。它用于获取应用程序的实时更新。有许多应用程序需要实时数据，轮询对这些应用程序来说是救命稻草。

不同类型的轮询：

短轮询 ：在短轮询中，客户端向服务器请求数据，服务器将根据数据是否可用来返回响应，如果不可用，则返回一个空响应。这个过程会定期重复。

我们将通过一个示例来理解短轮询，其中使用AJAX来理解短轮询，尽管我们也可以使用普通的HTTP请求。

使用AJAX进行短轮询的步骤如下：

创建一个新的XMLHttpRequest。
使用XMLHttpRequest的open()方法指定请求。
使用XMLHttpRequest的send()方法向服务器发送请求。
使用XMLHttpRequest的”onreadystatechange”属性定义一个函数，该函数将帮助我们在任何地方使用响应。
在该函数内部使用responseText来在网页的任何地方显示数据。
将整个请求和响应放入setInterval中，指定时间间隔。
然后将该setInterval放入一个在按钮点击时调用的函数中。
示例1： 在这个示例中，我们将服务器文件命名为data.json，其中包含一些数据。

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                         initial-scale=1.0">
    <title>Short Polling using AJAX</title>
    <style>
        h1, h3 {
            text-align: center;
            color: green;
        }
 
        button {
            margin-left: 34.5rem;
        }
    </style>
 
    <script>
        function loadInformation() {
            setInterval(function () {
 
                // Request
                var request = new XMLHttpRequest();
                request.open("GET", "./data.json");
                request.send();
 
                // Response
                request.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
 
                        // Also checked status==200 to 
                        // verify its status is OK or not
                        console.log(this.responseText);
                    }
                }
            }, 1000);
        }
    </script>
</head>
 
<body>
    <h1>Geeks for Geeks</h1>
    <h3>Short Polling using AJAX</h3>
    <button onClick="loadInformation()">
        Click to Load
    </button>
</body>
 
</html>

data.json:

{
    "name":"Manish",
    "age":"22",
    "city":"Kolkata"
}

输出：

HTML 什么是长轮询和短轮询

虽然短轮询存在一些问题，即轮询的频率可能会对网络或服务器造成不可接受的负担，特别是当可接受的延迟较低时。

长轮询： 在短轮询中，如果响应不可用，则服务器返回空响应。

因此，在长轮询中，解决了这个问题。在长轮询中，客户端向服务器发送请求，如果响应不可用，则服务器将保持请求直到响应可用，并在响应可用后将其发送回客户端。在收到响应后，再次立即或经过一段时间发出请求，并重复此过程。简单来说，客户端将始终保持与服务器的实时连接。

示例2： 在这个示例中，我们将了解长轮询，并使用AJAX来理解长轮询，尽管我们也可以使用普通的HTTP请求。以下是步骤：

创建XMLHttpRequest以发送请求的基本方法与短轮询相同。
但是在这里，由于响应只在可用时由服务器返回，因此无法在固定间隔发送请求。
这就是为什么我们只会在收到上一个请求的响应后发送下一个请求。

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                         initial-scale=1.0">
    <title>Long Polling using AJAX</title>
    <style>
        h1, h3 {
            text-align: center;
            color: green;
        }
 
        button {
            margin-left: 34.5rem;
        }
    </style>
 
    <script>
        function loadInformation() {
 
            // Request
            var request = new XMLHttpRequest();
            request.open("GET", "./data.json");
            request.send();
             
            // Response
            request.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
 
                    // Also checked status==200 to 
                    // verify its status is OK or not
                    console.log(this.responseText);
                    loadInformation();
                }
            }
        }
    </script>
</head>
 
<body>
    <h1>Geeks for Geeks</h1>
    <h3>Long Polling using AJAX</h3>
    <button onClick="loadInformation()">
        Click to Load
    </button>
</body>
 
</html>

data.json:

{
    "name":"Mridul",
    "age":"24",
    "city":"Banglore"
}

输出：

HTML 什么是长轮询和短轮询

现实世界的投票应用： 投票有不同的现实世界应用。以下是其中一些描述：

出租车服务提供商： 当用户通过出租车服务提供商的应用程序预订出租车时，在这种情况下，他/她需要每秒钟检查司机的位置，以了解司机距离上车点有多远。

在这种情况下，位置数据变化很快，因此我们需要通过投票来每次获取正确的位置。

列车追踪： 当用户想要知道任何一列火车的当前位置时，他/她使用列车追踪应用程序。由于火车的位置每时每刻都在变化。因此，在这种情况下，也需要通过投票随时获取火车的更新位置，无论用户何时搜索。

短轮询和长轮询的区别：

短轮询	长轮询
它基于计时器。因此，它用于那些需要在固定时间间隔内更新数据的应用程序。	它基于获取响应。因此，它用于不希望得到空响应的应用程序。
在这里，如果响应不可用，可以发送空响应。	这里永远不会发送空响应。
它不太受欢迎。	它比短轮询更受欢迎。
它会产生大量的流量。	它也会产生流量，但比短轮询少。