AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,通过后台加载数据的技术,结合定时器(如JavaScript的setTimeout
或setInterval
函数),我们可以实现定时读取数据库数据的功能。
以下是一个详细的步骤:
1. 创建HTML页面
我们需要一个HTML页面来显示从数据库中获取的数据。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>AJAX定时读取数据库</title></head><body> <p id="datacontainer"></p> <script src="app.js"></script></body></html>
2. 编写JavaScript代码
接下来,我们需要编写JavaScript代码来实现AJAX请求和定时器。
app.js
function fetchData() { // 创建一个新的XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 配置请求 xhr.open('GET', 'server.php', true); // 设置请求完成后的处理函数 xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 400) { // 请求成功,处理返回的数据 var data = JSON.parse(xhr.responseText); displayData(data); } else { // 请求失败,显示错误信息 console.error('Failed to fetch data: ' + xhr.statusText); } }; // 发送请求 xhr.send();}function displayData(data) { var container = document.getElementById('datacontainer'); container.innerHTML = ''; for (var i = 0; i < data.length; i++) { var item = document.createElement('p'); item.textContent = data[i]; container.appendChild(item); }}// 使用setInterval定时调用fetchData函数,每隔5秒(5000毫秒)执行一次setInterval(fetchData, 5000);
3. 编写服务器端代码
在这个例子中,我们假设服务器端代码是PHP,用于从数据库中获取数据并返回给客户端。
server.php
<?php// 连接数据库$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'username', 'password');// 查询数据$result = $db>query('select * FROM data_table');// 将结果转换为JSON格式并输出echo json_encode($result>fetchAll(PDO::FETCH_ASSOC));?>
4. 单元表格
步骤 | 描述 | 备注 |
1 | 创建HTML页面 | 用于显示从数据库中获取的数据 |
2 | 编写JavaScript代码 | 实现AJAX请求和定时器 |
3 | 编写服务器端代码 | 从数据库中获取数据并返回给客户端 |
现在,每当页面加载时,它会自动开始定时从服务器获取数据,并将数据显示在页面上。
TAG:ajax定时查询数据库刷新
免责声明:本站内容(文字信息+图片素材)来源于互联网公开数据整理或转载,仅用于学习参考,如有侵权问题,请及时联系本站删除,我们将在5个工作日内处理。联系邮箱:chuangshanghai#qq.com(把#换成@)