AJAX 轮询是什么

在本文中，我们将看到如何使用AJAX进行轮询。在这里，我们尝试使用类似轮询的方式使用JavaScript的特性，例如AJAX和Fetch API，来创建类似轮询的体验。

轮询是持续而连续地进行HTTP调用，直到获得所需的响应。这是一种非常基本的方法，用于在应用程序中创建实时更新。轮询与简单的HTTP请求并没有太大区别。

在下面的图表中，客户端会持续向服务器发出请求，直到获得相应为止。服务器在找到请求的答案之前返回空响应。轮询的问题在于客户端必须不断向服务器询问是否有新数据。因此，很多响应都是空的，从而产生HTTP开销。轮询的目的是与服务器内容保持联系。它可以用于实时应用程序，但会导致网络资源的高使用率。

AJAX 轮询是什么

异步JavaScript和XML(AJAX) ：它用于使用JavaScript进行异步HTTP调用。它用于在不刷新网页的情况下与服务器通信，从而提高用户体验和性能。

Fetch API ：一种用于在JavaScript中发出HTTP请求的API。 Fetch API提供了在window对象上定义的fetch()方法。这用于执行请求。此方法返回一个Promise对象，可以进一步用于检索请求的响应。

轮询类型：

短轮询： 在这种情况下，客户端永远不会等待服务器的响应，因此当服务器没有准备好答案时，客户端获取到的是空响应。
长轮询： 在这种类型的轮询中，客户端将等待直到从服务器获得适当的响应，因此请求/响应周期是长期存在的。

方法： 将使用以下HTTP轮询的工作流程来执行所需的任务，如下所述：

首先，客户端向服务器发出HTTP请求。
服务器处理此请求。
服务器返回空或完成的响应。
客户端获取响应。
客户端重复发送请求，直到从服务器获取所需的资源。

注意: 在下面的示例中，我们将调用https://jsonplaceholder.typicode.com/todos/1进行访问。

示例1: 在此示例中，我们将进行一个简单的AJAX请求，这是使用JavaScript进行轮询的基本构建块。

步骤:

使用XMLHttpRequest发出HTTP请求。
使用onload事件在控制台选项卡上记录响应。

HTML

<html> 
 
<head> 
    <title>Page Title</title> 
</head> 
 
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3>Explain what is polling in AJAX.</h3> 
</body> 
<script> 
  const xhr = new XMLHttpRequest(); 
    xhr.onload = (ev)=>{ 
        if(ev.target.status == 200){ 
            console.log("response received!"); 
        } 
    } 
 
    xhr.open("GET","https://jsonplaceholder.typicode.com/todos/1",true); 
    xhr.send(); 
</script> 
</html>

输出： 打开浏览器的控制台选项卡以查看输出结果：

AJAX 轮询是什么

示例2： 在这个示例中，我们将会每秒钟调用send方法来轮询服务器。

步骤：

使用XMLHttpRequest创建一个AJAX实例。
使用open( )创建HTTP请求。
使用send( )发送一个GET方法请求。
使用 onload 事件获取响应。
使用 setInterval 每秒钟发送一次请求。

所以，这个方法通过每秒钟发送一个请求来轮询服务器。

HTML

<html> 
 
<head> 
    <title>Page Title</title> 
</head> 
 
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3>Explain what is polling in AJAX.</h3> 
</body> 
<script> 
const xhr = new XMLHttpRequest(); 
xhr.onload = (ev)=>{ 
   if(ev.target.status == 200){ 
      console.log("response received!"); 
   } 
} 
 
setInterval(()=>{ 
   xhr.open("GET","https://jsonplaceholder.typicode.com/todos/1",true); 
   xhr.send(); 
},1000) 
</script> 
</html>

解释: 服务器每秒钟都会给我们一个输出结果，因此在下面的输出中会显示一个文本消息“ 收到响应 ”。打开浏览器的控制台标签以查看输出结果。

输出结果:

AJAX 轮询是什么

示例3： 在这个示例中，我们将使用Javascript的fetch API进行轮询，我们每秒发送一次请求。

获取的语法：

fetch(" url ")
.then((res)=> {
})
.catch((err)=> {
}

步骤：

使用Fetch()发送HTTP请求
使用then()获取响应
使用setInterval()每秒发送一次请求

HTML

<html> 
<head> 
    <title>Page Title</title> 
</head> 
 
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3>Explain what is polling in AJAX.</h3> 
</body> 
<script>  
 
setInterval(()=>{ 
   fetch('https://jsonplaceholder.typicode.com/todos/1') 
  .then((response) => {console.log("response received!")}) 
},1000) 
</script> 
</html>

输出： 打开浏览器的控制台选项卡，查看输出结果。

AJAX 轮询是什么