无法在HTML控制台中显示Ajax响应文本

嘿，我一眼就看出问题所在啦！你现在的写法有个关键误区——jQuery的$.ajax默认是异步请求，当你直接在调用后立刻取.responseText时，请求还没完成，服务器还没返回数据呢，所以自然拿到的是undefined。

正确的异步处理方式（推荐） #

异步请求的核心逻辑是：等请求成功完成后，再去处理返回的数据。jQuery提供了done()方法来绑定成功回调，这是最标准也最友好的写法：

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "https://raw.githubusercontent.com/Theruler333/Letsmod/master/test.txt",
    dataType: "text"
  }).done(function(data) {
    // 只有请求成功拿到数据后，才会执行这里的代码
    console.log(data);
  }).fail(function() {
    // 可以额外加个失败回调，方便排查请求出错的情况
    console.log("请求失败啦，检查下地址或者网络~");
  });
});

为什么原代码会返回undefined？ #

原代码里你把$.ajax()的调用结果直接赋值给data，然后立刻执行console.log——这时候Ajax请求还在后台和服务器通信，服务器还没把数据传回来，.responseText还没被赋值，所以输出的就是undefined。

不推荐的同步写法（仅作了解） #

虽然可以通过设置async: false把请求改成同步，但这种方式会阻塞浏览器，在请求完成前用户没法操作页面，体验极差，所以非常不建议使用：

$(document).ready(function() {
  var data;
  $.ajax({
    type: "GET",
    url: "https://raw.githubusercontent.com/Theruler333/Letsmod/master/test.txt",
    dataType: "text",
    async: false, // 开启同步请求，不推荐！
    success: function(response) {
      data = response;
    }
  });
  console.log(data);
});

总之，一定要用异步回调的方式处理Ajax返回的数据，这是前端异步编程的基础哦～

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