AJAX（Asynchronous JavaScript and XML）是一种客户端和服务器之间进行异步通信的技术，可以使网页在不刷新的情况下更新部分内容。在JavaScript中，我们可以通过AJAX来更改页面中的内容。本文将介绍如何使用AJAX来动态更改JavaScript中的内容。

首先，我们需要一个简单的HTML页面作为例子。假设我们有一个按钮，当点击该按钮时，我们希望能够从服务器上获取一条新的消息，并将其显示在页面上。我们可以通过以下代码来实现：

 //引入AJAX库


AJAX Example
点击按钮加载消息
 //用于显示消息的段落
获取消息 //点击按钮触发AJAX请求

在上面的代码中，我们首先引入了一个名为"ajax.js"的文件，这是一个封装了AJAX操作的库文件。接下来，我们在页面中创建了一个段落元素，其id为"message"，用于显示消息。同时，我们还创建了一个按钮，当点击按钮时，会触发一个名为"getMessage()"的函数。

下面，让我们来看一下"ajax.js"文件的内容：

function getMessage() {
//创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//定义一个回调函数，用于处理服务器返回的数据
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("message").innerHTML = xhr.responseText; //将服务器返回的数据显示在页面上
}
};
//发送AJAX请求
xhr.open("GET", "server.php", true);
xhr.send();
}

在这个JavaScript文件中，我们定义了一个名为"getMessage()"的函数，它会在按钮被点击时被调用。首先，我们创建了一个新的XMLHttpRequest对象，这是浏览器提供的用于发送HTTP请求的对象。接下来，我们定义了一个回调函数，它会在服务器返回数据时被执行。在回调函数中，我们首先检查请求的状态和响应的状态码，只有当两者都满足时，才执行后续操作。我们使用"xhr.responseText"来获取服务器返回的数据，并将其赋值给id为"message"的段落元素的innerHTML属性，从而更新页面上的内容。最后，我们使用"xhr.open()"和"xhr.send()"来发送AJAX请求到一个名为"server.php"的服务器端脚本。

在"server.php"脚本中，我们可以通过以下方式来获取一条新的消息：

$messages = array("Hello", "Bonjour", "Hola", "你好"); //定义一组消息
$message = $messages[array_rand($messages)]; //随机选择一条消息
echo $message; //输出消息

在这个服务器端脚本中，我们首先定义了一组消息，每条消息都存储在一个数组中。然后，我们使用"array_rand()"函数随机选择一条消息，并将其输出到客户端。

综上所述，通过使用AJAX技术，我们可以实现在JavaScript中动态更改页面的内容。在上述示例中，我们使用了一个简单的例子，当点击按钮时，会从服务器获取一条新的消息，并将其更新到页面上。当然，实际应用中我们可以根据具体需求进行更复杂的操作。