一个完整的ajax简单案例
本篇文章给大家带来《一个完整的ajax简单案例》，石家庄人才网对文章内容进行了深度展开说明，希望对各位有所帮助，记得收藏本站。
AJAX（Asynchronous JavaScript and XML）是一种用于创建动态网页的技术，它允许网页在后台与服务器交换数据，而无需重新加载整个页面。本文将介绍一个完整的 AJAX 简单案例，帮助您理解 AJAX 的基本原理和使用方法。
案例描述
假设我们有一个网页，上面有一个按钮，当用户点击按钮时，网页会向服务器发送一个请求，获取当前时间，并将时间显示在网页上。
HTML 代码
首先，我们需要创建一个简单的 HTML 页面，包含一个按钮和一个用于显示时间的容器：
<!DOCTYPE html><html><head> <title>AJAX 简单案例</title></head><body> <button id="getTime">获取当前时间</button> <div id="time"></div> <script src="script.js"></script></body></html>
JavaScript 代码
接下来，我们需要编写 JavaScript 代码来处理 AJAX 请求。我们将使用 JavaScript 的 `XMLHttpRequest` 对象来发送请求：
// 获取按钮元素const button = document.getElementById('getTime');// 获取时间容器元素const timeContainer = document.getElementById('time');
// 为按钮添加点击事件监听器button.addEventListener('click', () => { // 创建 XMLHttpRequest 对象 const xhr = new XMLHttpRequest(); // 配置请求 xhr.open('GET', '/get-time'); // 设置响应回调函数 xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 400) { // 请求成功，将时间显示在容器中 timeContainer.textContent = xhr.responseText; } else { // 请求失败，显示错误信息 console.error('请求失败'); } }; // 发送请求 xhr.send();});服务器端代码
最后，我们需要编写服务器端代码来处理 AJAX 请求并返回当前时间。这里我们使用 Node.js 和 Express 框架来创建一个简单的服务器：
const express = require('express');const app = express();app.get('/get-time', (req, res) => { res.send(new Date().toLocaleString());});app.listen(3000, () => { console.log('服务器运行在 http://localhost:3000');});运行案例
完成以上代码后，您可以将 HTML、JavaScript 和服务器端代码保存在同一个目录下，然后运行服务器端代码。在浏览器中访问 `http://localhost:3000`，您将看到一个按钮，点击按钮即可获取当前时间并显示在页面上。石家庄人才网小编提示，这是一个非常简单的 AJAX 案例，您可以根据自己的需求进行修改和扩展。
有关《一个完整的ajax简单案例》的内容介绍到这里，想要了解更多相关内容记得收藏关注本站。
- 上一篇：contentwindow 兼容性
- 下一篇：返回列表
版权声明：《一个完整的ajax简单案例》来自【石家庄人才网】收集整理于网络，不代表本站立场，所有图片文章版权属于原作者，如有侵略，联系删除。
https://www.ymil.cn/quanzi/23501.html