可以通过使用JavaScript中的beforeunload事件和XMLHttpRequest对象来实现在AJAX调用完成之前阻止切换到其他页面。

以下是一个示例代码：

var xhr;
window.addEventListener("beforeunload", function(event) {
    if (xhr && xhr.readyState !== 4) {
        event.preventDefault();
        event.returnValue = '';
    }
});

function makeAjaxCall() {
    xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.example.com/data", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 处理返回的数据
        }
    };
    xhr.send();
}

在上面的示例中，我们使用beforeunload事件监听器来检查xhr对象的状态。如果xhr对象的readyState不等于4（即AJAX调用尚未完成），则阻止切换到其他页面。这是通过设置event.returnValue为一个非空字符串来实现的。

makeAjaxCall函数是一个用于发起AJAX调用的示例函数。当该函数被调用时，它会创建一个新的XMLHttpRequest对象，并发送一个GET请求到指定的URL。在xhr.onreadystatechange事件中，我们可以处理返回的数据。

请注意，由于浏览器的安全策略，上述代码可能无法在所有浏览器中完全运行。有些浏览器会忽略对event.returnValue的设置，并显示自定义的提示消息。