基于JSON的AJAX请求案例

**基于JSON的AJAX请求案例** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下更新部分网页的技术。而JSON（JavaScript Object Notation）是轻量级的数据交换格式，它使得人们可以轻松地阅读和编写数据，同时也易于机器解析和生成。本案例将探讨如何通过AJAX向本地服务器发起GET和POST请求，以获取或交互JSON数据。 我们需要理解AJAX的基本结构。AJAX的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器进行通信。以下是一个简单的AJAX GET请求示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://localhost:3000/data.json', true); // 本地服务器的URL xhr.onload = function() { if (this.status === 200) { // 请求成功 var jsonData = JSON.parse(this.responseText); console.log(jsonData); // 输出解析后的JSON数据 } else { console.error('请求失败，状态码：' + this.status); } }; xhr.onerror = function() { console.error('请求发生错误'); }; xhr.send(); ``` 在这个例子中，我们创建了一个新的XMLHttpRequest实例，设置了请求类型为GET，目标URL为本地服务器上的"data.json"文件，并开启异步模式。当请求完成时，`onload`事件处理函数会被调用。如果请求成功（HTTP状态码200），则使用`JSON.parse()`将响应文本转换为JavaScript对象并打印出来。若请求失败，`onerror`事件会显示错误信息。 接下来，我们来看POST请求的实现。POST请求常用于向服务器提交数据。以下是一个AJAX POST请求的例子： ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://localhost:3000/submit', true); xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头为JSON格式 xhr.onload = function() { if (this.status === 200) { console.log('数据提交成功'); } else { console.error('提交失败，状态码：' + this.status); } }; xhr.onerror = function() { console.error('提交请求发生错误'); }; var data = { key1: 'value1', key2: 'value2' }; // 要发送的JSON数据 xhr.send(JSON.stringify(data)); // 将数据转换为字符串发送 ``` 在这个例子中，我们设置了请求类型为POST，目标URL为"submit"。通过`setRequestHeader()`设置请求头，告诉服务器我们发送的数据是JSON格式。然后，我们定义了要发送的数据并将其转化为JSON字符串，最后通过`send()`方法发送。 对于本地服务器，我们可以使用Node.js搭建。例如，使用Express框架创建一个简单的服务器来处理GET和POST请求： ```javascript const express = require('express'); const app = express(); const port = 3000; app.use(express.json()); // 解析JSON数据 // 处理GET请求 app.get('/data.json', (req, res) => { const jsonData = { key: 'value' }; res.json(jsonData); // 返回JSON数据 }); // 处理POST请求 app.post('/submit', (req, res) => { const postData = req.body; console.log(postData); // 打印接收到的数据 res.send('数据已接收'); }); app.listen(port, () => { console.log(`Server running at http://localhost:${port}`); }); ``` 在这个服务器配置中，我们使用了Express的`json()`中间件来解析接收到的JSON数据，然后根据GET和POST路由处理数据。 总结起来，这个案例展示了如何利用AJAX与本地服务器进行交互，获取和提交JSON数据。通过创建XMLHttpRequest对象、设置请求参数和处理响应，以及在服务器端处理请求，我们可以实现在客户端和服务器之间的无刷新数据交换。这个过程对于实现动态网页和实时应用至关重要。