Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不影响网页正常显示的情况下，与服务器交换数据并更新部分网页内容。
Ajax的工作原理是在浏览器与服务器之间建立一个HTTP连接，然后通过JavaScript发送请求和接收响应，这使得网页可以实现实时更新，而无需刷新整个页面，Ajax技术的核心是JavaScript对象XMLHttpRequest，它提供了一个与服务器交互的方式。
以下是一个简单的Ajax示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax示例</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else { // IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 改变文本</h2></div>
<button type="button" onclick="loadXMLDoc()">点击这里</button>
</body>
</html>
在这个示例中，当用户点击按钮时，会触发loadXMLDoc函数，这个函数首先创建一个新的XMLHttpRequest对象，然后定义一个回调函数，该函数将在请求完成时被调用，回调函数检查readyState属性是否为4（表示请求已完成）以及status属性是否为200（表示成功），如果满足这些条件，就将响应文本设置为指定元素的innerHTML，使用open方法初始化请求，指定请求类型（GET）、URL（ajax_info.txt）和是否异步（true），使用send方法发送请求。
Ajax的优点是可以减少页面刷新次数，提高用户体验，Ajax也有一定的局限性，例如跨域问题、安全性问题等，为了解决这些问题，可以使用JSONP、CORS等技术，随着现代前端框架（如React、Vue、Angular等）的普及，Ajax的使用逐渐减少，取而代之的是Fetch API、Axios等更先进的技术。
Fetch API是一个现代的网络API，它提供了一种简单、合理的方式来跨网络异步获取资源，Fetch API建立在Promise之上，使得代码更加简洁、易读，以下是一个简单的Fetch API示例：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
在这个示例中，使用fetch函数发起一个GET请求，然后将响应转换为JSON格式，并在控制台输出，如果发生错误，将在控制台输出错误信息。
Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境，它可以用于浏览器和Node.js环境中的Ajax请求，以下是一个简单的Axios示例：
const axios = require('axios');
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
在这个示例中，首先引入Axios库，然后使用axios.get方法发起一个GET请求，将响应数据输出到控制台，如果发生错误，将在控制台输出错误信息。