以下是一个使用Ajax从服务器加载图像和其他变量的示例代码：

1. HTML代码：

    
    
    


    
    

    加载数据

2. JavaScript代码（script.js）：

function loadData() {
    $.ajax({
        url: 'data.php', // 服务器端处理数据的文件路径
        method: 'GET',
        dataType: 'json',
        success: function(response) {
            // 从服务器获取的图像URL
            var imageUrl = response.imageUrl;
            // 从服务器获取的其他变量
            var otherVariable = response.otherVariable;

            // 加载图像到画布
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var image = new Image();
            image.onload = function() {
                context.drawImage(image, 0, 0);
            };
            image.src = imageUrl;

            // 显示其他变量
            var dataDiv = document.getElementById('data');
            dataDiv.innerHTML = '其他变量：' + otherVariable;
        },
        error: function(xhr, status, error) {
            console.log('加载数据时发生错误：' + error);
        }
    });
}

3. 服务器端代码（data.php）：

 'path/to/image.jpg',
    'otherVariable' => 'some value'
);

// 返回JSON格式的数据
header('Content-Type: application/json');
echo json_encode($response);
?>

当用户点击"加载数据"按钮时，JavaScript代码将使用Ajax从服务器加载图像URL和其他变量。然后，图像将加载到画布上，其他变量将显示在页面上。请确保正确配置服务器端代码（data.php）以返回正确的图像URL和其他变量。