ajax样式演示
以下是一个简单的使用AJAX技术的网页样例,它展示了如何在不刷新页面的情况下更新数据。
HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX 样例</title>
<script>
function fetchData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("data").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "data.json", true);
xhr.send();
}
</script>
</head>
<body onload="fetchData()">
<div id="data">加载中...</div>
<button onclick="fetchData()">刷新数据</button>
</body>
</html>
JSON文件(data.json):
{
"message": "这是通过AJAX加载的数据"
}
这个HTML页面在加载时会通过AJAX调用获取名为data.json
的数据文件,并将其内容显示在<div id="data">
元素中。用户可以通过点击按钮来手动刷新这些数据。这个例子展示了如何使用AJAX技术进行数据的异步获取和显示,这在开发需要与服务器进行频繁交互的现代web应用时非常有用。
评论已关闭