Ajax + PHPを使用して、リアルタイムであなたの場所の日没時間を取得するにはどうすればよいですか？

M66 2025-06-12

最新のWeb開発では、Ajax Technologyを使用すると、Webページがリフレッシュせずにサーバーと対話できるため、ユーザーエクスペリエンスが向上します。今日、AjaxとPHPを組み合わせて関数を実現します。ユーザーの位置情報（緯度と経度）を通じて、リアルタイムで場所の日没時間を取得します。

ステップ1：ユーザーの位置情報を取得します

まず、ユーザーの地理的位置情報を取得する必要があります。 HTML5は、現在のユーザーの緯度と経度を取得するために使用できるNavigator.Geolocationインターフェイスを提供します。このインターフェイスは、ブラウザリクエストを介してユーザーの位置情報を取得します。コードは次のとおりです。

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>リアルタイムで日没時間を取得します</title>
    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                alert("このブラウザはジオロケーションをサポートしていません");
            }
        }

        function showPosition(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

            // 電話 PHP 日没時間を取得するためのインターフェイス
            fetchSunsetTime(latitude, longitude);
        }

        function fetchSunsetTime(latitude, longitude) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "https://m66.net/sunset-time.php?lat=" + latitude + "&lon=" + longitude, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById("sunset-time").innerHTML = "日没の時間: " + response.sunset;
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <h1>リアルタイムで日没時間を取得します</h1>
    <button onclick="getLocation()">获取当前位置的日没の時間</button>
    <p id="sunset-time">日没の時間将显示在这里。</p>
</body>
</html>

上記のコードでは、ユーザーが[現在の場所の日没時間を取得]ボタンをクリックすると、ブラウザがユーザーの地理的位置を取得するように要求します。緯度と経度を取得した後、AJAXリクエストを介してPHPサーバーインターフェイスを呼び出して、場所の日没時間を取得します。

ステップ2：PHPバックエンドインターフェイス

ユーザーの場所に基づいて日没時間を計算するには、外部APIを介して日没の情報を取得する必要があります。ここでは、公共APIを使用して、緯度と経度を通じて場所の日没時間を照会できます。 Ajaxリクエストを処理して日没時間を取得するPHPのコードを次に示します。

 <?php
// sunset-time.php

// ユーザーが提供する緯度と経度を取得します
$latitude = isset($_GET['lat']) ? floatval($_GET['lat']) : 0;
$longitude = isset($_GET['lon']) ? floatval($_GET['lon']) : 0;

// 緯度と経度が有効かどうかを確認してください
if ($latitude == 0 || $longitude == 0) {
    echo json_encode(['error' => '無効な緯度と経度']);
    exit;
}

// 無料の太陽の場所を使用してください API 来获取日没の時間
$url = "https://api.sunsetapi.net/json?lat={$latitude}&lng={$longitude}";
$response = file_get_contents($url);
if ($response === FALSE) {
    echo json_encode(['error' => '无法获取日没の時間']);
    exit;
}

// 分析 API 返されたデータ
$data = json_decode($response, true);

// 确保返回了有效的日没の時間
if (isset($data['results']['sunset'])) {
    $sunset = $data['results']['sunset'];
    echo json_encode(['sunset' => $sunset]);
} else {
    echo json_encode(['error' => '未能获取日没の時間']);
}
?>

このPHPスクリプトでは、GETリクエストを介してクライアントから緯度と経度のパラメーター（ LATおよびLON ）を受け取り、その場所の日没時間を取得するために外部APIを呼び出します。データが取得された後、JSON形式でクライアントに返します。

ステップ3：サーバーとテストを開始します

上記のHTMLおよびPHPコードをそれぞれindex.htmlおよびSunsettime.phpとして保存します。
PHP環境が適切に実行されていることを確認してください（たとえば、XAMPPやWAMPサーバーなどを使用して）。
ファイルをサーバーのルートディレクトリに配置し、サーバーを起動します。
index.htmlページにアクセスしてボタンをクリックすると、ページに現在の場所の日没時間を表示する必要があります。

結果が表示されます

ユーザーがボタンをクリックしてサンセットタイムを取得すると、Ajaxリクエストは緯度と経度情報をバックエンドPHPに渡します。バックエンドが外部APIを介して日没の時間を取得すると、クライアントに返します。クライアントは、JavaScriptを介してページコンテンツを更新し、最後にサンセットタイムを表示します。

date_sunset