在 JAVASCRIPT 中获取 IP 地址地理数据(1)

📌 相关文章

📜 在 JAVASCRIPT 中获取 IP 地址地理数据(1)

📅 最后修改于: 2023-12-03 15:23:10.386000 🧑 作者: Mango

在 JavaScript 中获取 IP 地址地理数据

在开发需要获取用户地理位置的应用程序时，我们通常需要知道用户的 IP 地址及其地理位置。JavaScript 可以帮助我们获取用户的 IP 地址并通过 API 获取其地理位置数据。

获取用户 IP 地址

要获取用户的 IP 地址，我们可以使用 XMLHttpRequest 对象向以下地址发出 HTTP 请求：http://ipv4.myexternalip.com/json

function getIpAddress(callback) {
  const xhr = new XMLHttpRequest();
  xhr.onload = function() {
    if (this.readyState === 4 && this.status === 200) {
      const ipAddress = JSON.parse(this.responseText).ip;
      callback(ipAddress);
    }
  };
  xhr.open('GET', 'http://ipv4.myexternalip.com/json');
  xhr.send();
}

上述代码使用 XMLHttpRequest 对象向 http://ipv4.myexternalip.com/json 发出了一个 GET 请求。该请求会返回包含用户 IP 地址的 JSON 数据。我们可以调用 JSON.parse() 方法将其转换为 JavaScript 对象，然后从对象中获取 IP 地址并将其传递给回调函数。

获取 IP 地址地理数据

获取 IP 地址地理数据需要使用 API。我们可以使用第三方的 IP 地址定位服务，例如 ipapi。该服务提供了一个简单的 API，可以通过提供 IP 地址来获取其地理位置数据。

function getGeolocationData(ipAddress, callback) {
  const xhr = new XMLHttpRequest();
  xhr.onload = function() {
    if (this.readyState === 4 && this.status === 200) {
      const geolocationData = JSON.parse(this.responseText);
      callback(geolocationData);
    }
  };
  xhr.open('GET', `https://ipapi.co/${ipAddress}/json/`);
  xhr.send();
}

上述代码中，我们在 getGeolocationData 函数中传入了 IP 地址和一个回调函数。函数内部使用 XMLHttpRequest 对象向 https://ipapi.co/${ipAddress}/json/ 发出了一个 GET 请求，该请求会返回包含 IP 地址地理数据的 JSON 对象。我们将 JSON 对象传递给回调函数。

示例

下面是一个完整的示例，该示例演示了如何获取用户的 IP 地址和地理位置数据，并将其显示在网页上。

<!DOCTYPE html>
<html>
  <head>
    <script>
      function getIpAddress(callback) {
        const xhr = new XMLHttpRequest();
        xhr.onload = function() {
          if (this.readyState === 4 && this.status === 200) {
            const ipAddress = JSON.parse(this.responseText).ip;
            callback(ipAddress);
          }
        };
        xhr.open('GET', 'http://ipv4.myexternalip.com/json');
        xhr.send();
      }

      function getGeolocationData(ipAddress, callback) {
        const xhr = new XMLHttpRequest();
        xhr.onload = function() {
          if (this.readyState === 4 && this.status === 200) {
            const geolocationData = JSON.parse(this.responseText);
            callback(geolocationData);
          }
        };
        xhr.open('GET', `https://ipapi.co/${ipAddress}/json/`);
        xhr.send();
      }

      function showGeolocationData(geolocationData) {
        const ipElement = document.getElementById('ip');
        const cityElement = document.getElementById('city');
        const regionElement = document.getElementById('region');
        const countryElement = document.getElementById('country');

        ipElement.textContent = geolocationData.ip;
        cityElement.textContent = geolocationData.city;
        regionElement.textContent = geolocationData.region;
        countryElement.textContent = geolocationData.country;
      }

      function init() {
        getIpAddress(ipAddress => {
          getGeolocationData(ipAddress, showGeolocationData);
        });
      }
    </script>
  </head>
  <body onload="init()">
    <h1>IP 地址地理数据</h1>
    <p>IP 地址：<span id="ip"></span></p>
    <p>城市：<span id="city"></span></p>
    <p>州/省：<span id="region"></span></p>
    <p>国家：<span id="country"></span></p>
  </body>
</html>

上述代码使用了两个函数 getIpAddress 和 getGeolocationData，并在 init 函数中将它们连接起来。当页面加载完成时，它会自动运行 init 函数，该函数会获取用户的 IP 地址并获取其地理位置数据（city、region、country），最后将它们显示在网页上。