<?php
// 设置响应头为JSON格式
header('Content-Type: application/json');

// 准备要发送的数据
$data = [
    'name' => 'John Doe',
    'email' => 'john@example.com',
    'age' => 30,
    'interests' => ['coding', 'reading', 'hiking']
];

// 将PHP数组转换为JSON字符串并输出
echo json_encode($data);
?>

// 使用原生JavaScript的XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', 'your_php_script.php', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        try {
            // 解析JSON响应
            var response = JSON.parse(xhr.responseText);
            console.log(response);
            
            // 使用数据
            document.getElementById('name').textContent = response.name;
            document.getElementById('email').textContent = response.email;
            
            // 处理数组
            var interestsList = document.getElementById('interests');
            response.interests.forEach(function(interest) {
                var li = document.createElement('li');
                li.textContent = interest;
                interestsList.appendChild(li);
            });
        } catch (e) {
            console.error('Error parsing JSON:', e);
        }
    }
};
xhr.send();

// 使用jQuery的简化版本
$.ajax({
    url: 'your_php_script.php',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
        console.log(response);
        $('#name').text(response.name);
        $('#email').text(response.email);
        
        $.each(response.interests, function(index, interest) {
            $('#interests').append('<li>' + interest + '</li>');
        });
    },
    error: function(xhr, status, error) {
        console.error('AJAX Error:', status, error);
    }
});

// 使用Fetch API的现代方法
fetch('your_php_script.php')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
        document.getElementById('name').textContent = data.name;
        document.getElementById('email').textContent = data.email;
        
        data.interests.forEach(interest => {
            document.getElementById('interests').innerHTML += `<li>${interest}</li>`;
        });
    })
    .catch(error => {
        console.error('Fetch Error:', error);
    });