AJAX（Asynchronous JavaScript and XML）是一种在前端页面和后端服务器之间进行异步数据交互的技术。通过AJAX，前端页面可以在不刷新整个页面的情况下，获取后端服务器返回的数据并更新页面内容。AJAX的特点是可同时执行，即在数据请求的同时，页面可以继续执行其他操作。下面将通过举例和代码示例来讲解AJAX和页面同时执行的原理和应用。

在现实生活中，我们经常使用搜索引擎来获取相关信息。当我们在搜索框中输入关键字，并点击搜索按钮时，页面并不会刷新。相反，搜索引擎会通过AJAX技术向后端服务器发送请求，并获取相关的搜索结果。这样，我们就可以在搜索过程中继续浏览其他内容，例如阅读新闻、观看视频等。

// 示例代码
function search(keyword) {
// 发送AJAX请求并获取搜索结果
var xhr = new XMLHttpRequest();
xhr.open("GET", "/search?keyword=" + keyword, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var results = xhr.responseText;
// 更新页面内容
document.getElementById("search-results").innerHTML = results;
}
}
xhr.send();
}

在上述示例代码中，我们定义了一个search函数，该函数会使用AJAX发送GET请求到后端服务器，并在获取到搜索结果后更新页面内容。其中，search-results是一个页面元素的ID，用于显示搜索结果。

除了搜索引擎，AJAX还可以应用于许多其他场景。例如，在购物网站上，当用户点击“加入购物车”按钮时，AJAX可以发送POST请求将商品添加到购物车，而不需要刷新整个页面。这样，用户就可以继续浏览其他商品，而不被中断。

// 示例代码
function addToCart(productId) {
// 发送AJAX请求并添加商品到购物车
var xhr = new XMLHttpRequest();
xhr.open("POST", "/cart", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 更新购物车数量
document.getElementById("cart-count").innerHTML = response.count;
}
}
xhr.send(JSON.stringify({ productId: productId }));
}

在上述示例代码中，我们定义了一个addToCart函数，该函数会使用AJAX发送POST请求将商品添加到购物车，并在添加成功后更新购物车数量。其中，cart-count是一个页面元素的ID，用于显示购物车中商品的数量。

通过以上示例，我们可以看到，AJAX技术可以简化用户操作，并提高用户体验。前端页面可以与后端服务器同时执行，从而实现无刷新更新页面内容的效果。无论是搜索引擎、购物网站还是其他应用，AJAX和页面同时执行的能力都起到了重要的作用。