在现代网页开发中，获取用户的IP信息并展示在页面上可以为用户提供更多个性化体验或实现特定的功能。使用Ajax从远程JS文件获取IP信息并在HTML元素中展示是一种常见且有效的方法。

理解Ajax的工作原理至关重要。Ajax即“Asynchronous JavaScript and XML”，它允许在不刷新整个页面的情况下与服务器进行异步通信，从而实现动态更新网页内容。通过Ajax，我们可以向服务器请求数据，并在后台处理响应，然后将相关信息展示在网页上。

要从远程JS文件获取IP信息，我们需要借助一些提供IP信息查询的服务。有许多公开的API可供选择，例如ip-api.com等。我们可以使用Ajax的XMLHttpRequest对象或更现代的fetch API来发送请求。以fetch API为例，代码大致如下：

fetch('http://ip-api.com/json')
.then(response => response.json())
.then(data => {
    // 处理获取到的IP信息
    const ipElement = document.getElementById('ip-address');
    ipElement.textContent = data.query;
  })
.catch(error => {
    console.error('获取IP信息时出错:', error);
  });

在上述代码中，我们首先使用fetch发送一个GET请求到指定的API地址。服务器返回的数据是JSON格式，我们使用response.json()将其解析为JavaScript对象。接着，我们找到HTML中用于展示IP信息的元素（假设其id为ip-address），并将获取到的IP地址填充到该元素的文本内容中。

为了确保该功能在HTML页面加载完成后执行，我们可以将上述代码放在DOMContentLoaded事件的回调函数中。例如：

document.addEventListener('DOMContentLoaded', function() {
  // 上述获取IP信息并展示的代码
});

这样，当页面的DOM结构加载完成后，就会自动执行获取IP信息并展示的操作。

通过这种使用Ajax从远程JS文件获取IP信息并在HTML元素中展示的方法，开发者可以轻松地为网站添加与用户IP相关的功能，提升用户体验和网站的交互性。合理优化代码和选择可靠的API服务，也能确保网站的性能和稳定性。