分享AJAX异步刷新JSON数据的JavaScript示例

本文档提供了一个简单的AJAX示例代码，展示了如何在JavaScript中利用jQuery库实现页面的异步刷新功能。AJAX（Asynchronous JavaScript and XML）是一种用于创建动态网页的技术，它允许在不重新加载整个页面的情况下，通过HTTP协议与服务器进行数据交换，从而实现局部更新。 首先，文档引入了jQuery库，这是一个广泛使用的JavaScript框架，简化了DOM操作和AJAX请求的编写。通过`<script>`标签引入`jquery.js`，确保在执行后续AJAX操作之前，jQuery已经正确加载。 接下来，当页面加载完成后，`$(document).ready()`函数会执行其内部的代码块。这个事件监听器确保DOM元素已经准备好处理用户的交互。在这个例子中，当用户点击带有id为"btnAjax"的按钮时，将触发AJAX请求。 AJAX请求的设置是在`$.ajax()`函数中完成的。以下是关键参数解释： - `type: "POST"` - 定义请求类型，这里是POST方法，意味着向服务器发送数据。 - `url: "json.html"` - 指定了请求的目标URL，即服务器端返回JSON数据的地址。在实际应用中，这可能是动态生成内容的PHP、ASP.NET或RESTful API接口。 当请求成功时，`success:`回调函数被调用，接收来自服务器的数据（在这个例子中，假设`json.html`返回的是一个字符串`msg`）。在这个回调中，首先获取当前`div1`元素的内容，并将其保存在一个名为`oldValue`的变量中，然后添加新的数据到`div1`中，实现了异步更新显示。 最后，文档结构包括一个`<input>`标签，代表按钮，其`id`为"btnAjax"，显示文本为"ajax"，以及一个空的`<div>`元素，id为"div1"，用于接收AJAX响应后的内容更新。 总结来说，这段代码演示了如何使用jQuery的AJAX功能来实现实时、非阻塞的页面更新，提高了用户体验。学习者可以通过这个例子深入理解AJAX的基本原理和使用方法，并在此基础上进一步探索更复杂的数据交互场景。