以下是一个简单的 AJAX 实例代码，使用 jQuery 库实现：
HTML 代码：
<!DOCTYPE html> <html> <head> <title>AJAX Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>AJAX Example</h1> <button id="load-data">Load Data</button> <div id="result"></div> </body> </html>
JavaScript 代码：
$(document).ready(function() {
$('#load-data').click(function() {
$.ajax({
url: 'data.json', // 请求的 URL 地址
type: 'GET', // 请求方式为 GET
dataType: 'json', // 预期服务器返回的数据类型为 JSON
success: function(data) { // 请求成功时的回调函数，参数 data 为服务器返回的数据
var html = '<ul>'; // 创建一个 ul 元素用于显示数据
$.each(data, function(index, item) { // 遍历返回的数据，每个数据项为一个对象
html += '<li>' + item.name + ': ' + item.value + '</li>'; // 将每个数据项的 name 和 value 属性添加到 ul 元素中
});
html += '</ul>'; // 关闭 ul 元素
$('#result').html(html); // 将 ul 元素插入到 id 为 result 的 div 元素中
},
error: function(jqXHR, textStatus, errorThrown) { // 请求失败时的回调函数，参数 jqXHR 为 jQuery XMLHttpRequest 对象，textStatus 为状态信息，errorThrown 为异常信息
alert('Error: ' + textStatus); // 弹出错误信息
}
});
});
});
在这个例子中，当用户点击 "Load Data" 按钮时，会触发一个 AJAX GET 请求，请求的 URL 地址为 "data.json"，服务器返回的数据应该是一个 JSON 格式的对象数组，每个对象包含 name 和 value 两个属性，在请求成功时，回调函数会将返回的数据遍历并生成一个 ul 元素，然后将 ul 元素插入到 id 为 result 的 div 元素中，如果请求失败，则会弹出错误信息。
