编写AJAX函数无输出问题求助（附相关代码片段）

我帮你梳理了代码里的几个关键问题，这些都是导致没有输出的核心原因：

1. 回调函数的this指向错误 #

你在onreadystatechange回调里写的this.responseAjax = this.responseText，这里的this其实指向的是XMLHttpRequest实例，而不是你创建的ajaxObj对象。所以你后续根本没法通过xhttp.responseAjax拿到响应结果——这个属性根本没挂载到你的实例上。

2. 忽略了AJAX的异步特性 #

AJAX请求是异步执行的，你在showHint里创建完xhttp后，立刻就想访问结果，但这时候请求可能还在和服务器通信，完全没有返回数据，自然拿不到内容。

3. 缺少DOM更新的完整逻辑 #

你的showHint函数代码没写完（document.get...中断了），就算拿到了响应数据，也没有把结果渲染到页面上的逻辑。

另外还有个小细节：GET请求不需要设置Content-Type头部，因为GET请求没有请求体，这个设置是多余的，甚至可能引发不必要的问题。

修正后的代码示例 #

我调整了你的代码，用回调函数来处理异步响应，同时完善了DOM更新逻辑：

// 重构ajaxObj，添加回调参数处理异步结果
var ajaxObj = function(url, meth, data = "", callback) { 
  var x = new XMLHttpRequest(); 
  x.onreadystatechange = function() { 
    if (x.readyState == 4 && x.status == 200) { 
      // 请求成功后调用回调，传递响应文本
      callback(x.responseText); 
    }
    // 额外处理错误情况，比如状态码不是200的情况
    else if (x.readyState == 4 && x.status != 200) {
      callback("请求出错：" + x.status);
    }
  } 
  x.open(meth, url, true); 
  // 只有POST请求需要设置Content-Type
  if(meth.toUpperCase() === "POST"){
    x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
  }
  x.send(data); 
} 

function showHint(str) { 
  // 假设页面上有id为"hint"的元素用来展示提示
  var hintElement = document.getElementById("hint");
  
  if (str.length == 0) { 
    // 输入为空时清空提示
    hintElement.innerHTML = "";
    return;
  }
  
  // 调用ajaxObj，传入回调处理响应
  ajaxObj("gethint.php?q=" + str, "GET", "", function(response) {
    // 将响应结果渲染到页面
    hintElement.innerHTML = response;
  });
}

额外排查建议 #

• 打开浏览器的开发者工具（F12），切换到「控制台」标签，看看有没有报错信息，比如URL错误、跨域问题或者DOM元素找不到的错误。
• 直接在浏览器地址栏访问gethint.php?q=你的测试字符串，确认服务器端的脚本确实能返回正确的内容。

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