原生JavaScript编写Ajax时onload自定义回调失效问题排查与解决

嘿，我一眼就揪出问题所在啦！你的代码里有两个关键错误导致回调失效：

1. 错误的回调赋值逻辑 #

你写的 xhr.onload = onloadUpdate(); 是直接执行了onloadUpdate函数，然后把它的返回值（因为函数没有return语句，所以返回undefined）赋值给了xhr.onload。这就意味着，当AJAX请求完成时，onload事件绑定的是undefined，根本没有有效的回调函数会被触发。

同时，因为你直接执行了onloadUpdate，此时函数内部的this指向的是全局对象（浏览器里是window），而不是XHR实例，所以this.responseText自然是undefined。

2. 未发送AJAX请求 #

你的代码里把xhr.send(data)注释掉了，这会导致AJAX请求根本没有被发送出去——就算回调绑定正确，也不会触发onload事件。

修复后的代码 #

方案一：直接绑定函数引用（最推荐） #

只需要去掉onloadUpdate后面的括号，把函数本身赋值给xhr.onload，这样当请求完成时，XHR会自动调用这个函数，且函数内部的this会指向XHR实例：

function ajax (url, method) { 
  var xhr = new XMLHttpRequest(); 
  xhr.open(method, url, true); 
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
  xhr.onload = onloadUpdate; // 去掉括号，传递函数引用
  xhr.send(); // 必须调用send发送请求，如果是POST需要传数据就写xhr.send('参数名=值')
} 

function onloadUpdate () { 
  console.log(this.responseText); // 现在能正确拿到响应内容
  // 其他成功更新通知的代码
} 

ajax('sample-site.dev', 'POST');

方案二：用箭头函数控制this（可选） #

如果你需要在回调里改变this的指向，或者要给onloadUpdate传递参数，可以用箭头函数包裹：

function ajax (url, method) { 
  var xhr = new XMLHttpRequest(); 
  xhr.open(method, url, true); 
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
  xhr.onload = () => {
    onloadUpdate(xhr.responseText); // 直接把响应内容作为参数传递
  };
  xhr.send();
} 

function onloadUpdate (response) { 
  console.log(response); // 直接拿到传递的响应内容
  // 其他成功更新通知的代码
} 

ajax('sample-site.dev', 'POST');

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