使用Ajax实现PHP向JS传递变量遇报错，求有效解决方案

你的代码主要存在以下几个问题，导致控制台报错：

1. 变量作用域错误
   variableARecuperee是在onload回调函数内部定义的局部变量，外部的console.log根本访问不到它，这会直接抛出variableARecuperee is not defined的错误。

2. PHP输出内容不规范
   你同时输出了json_encode($var)和$var，最终返回的内容是"Mountain"Mountain，这不是合法的JSON格式，后续解析或处理都会出问题。

3. 同步请求已被弃用
   XMLHttpRequest的同步模式（第三个参数设为false）在现代浏览器中会被限制，而且会阻塞页面渲染，严重影响性能。

修正后的代码示例 #

1. 单独的PHP数据接口（比如命名为data.php）

确保接口只返回纯净的JSON数据，不要混入HTML或其他多余内容：

<?php
$var = "Mountain";
// 仅输出JSON编码后的变量
echo json_encode($var);
?>

2. 修正后的JS脚本（TestAjax9.js）

将所有依赖响应数据的逻辑放在回调内部，使用异步请求，并处理请求状态：

var requete = new XMLHttpRequest();
requete.onload = function() {
    // 先判断请求是否成功
    if (this.status >= 200 && this.status < 300) {
        // 解析JSON响应
        var variableARecuperee = JSON.parse(this.responseText);
        console.log("获取到的数据：", variableARecuperee);
    } else {
        console.error("请求失败，状态码：", this.status);
    }
};
// 使用异步请求（第三个参数默认是true，可省略）
requete.open("get", "data.php");
// 设置请求头，明确期望JSON格式响应
requete.setRequestHeader("Accept", "application/json");
requete.send();

更现代的替代方案：使用Fetch API #

相比传统的XMLHttpRequest，Fetch API语法更简洁，支持Promise，是当前推荐的异步请求方式：

fetch('data.php')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP错误！状态码：${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log("获取到的数据：", data);
    })
    .catch(error => {
        console.error("请求出错：", error);
    });

内容的提问来源于stack exchange，提问作者Tetsuochat