ajax的何获全称是Asynchronous JavaScript and XML，翻译成中文就是取后“异步的JavaScript和XML”。名字听着唬人，台数核心就一句话：在不刷新整个页面的何获情况下，让浏览器偷偷跟服务器要数据。取后我当年第一次用这东西，台数是何获在一个后台管理系统的列表页上——点一下“下一页”，整个页面白光一闪，取后重新加载，台数滚动条弹回顶部，何获那体验简直像被人扇了一巴掌。取后后来换了ajax，台数点下一页，何获表格里的取后数据悄无声息地换了，页面纹丝不动，台数那种顺滑感，像给老破小的自行车换了根链条。

要拿数据，得先建一个请求。最常见的写法是用XMLHttpRequest对象。别被这名字吓到，它就是个老实的邮差。你告诉它“去哪个地址、用什么方法、带什么参数”，它就骑着自行车出发了。代码大概长这样：

var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/users?id=123', true); xhr.send(); 

第三行的true，就是“异步”开关。如果写成false，页面会卡死在那儿等服务器回话，跟打电话没人接也不挂断一样，用户只能干瞪眼。异步的意思就是，你先把电话拨出去，然后该干嘛干嘛，等对方回拨了再聊。

但光把请求发出去没用，你得监听回应。这时候要给xhr对象挂上onreadystatechange事件。readyState有5个值，从0到4，4表示服务器响应完毕。status是HTTP状态码，200代表一切正常。所以标准的判断写法是：

xhr.onreadystatechange = function() {  if (xhr.readyState === 4 && xhr.status === 200) {  var data = JSON.parse(xhr.responseText); console.log(data); } }; 

这里有个细节，服务器返回的往往是JSON字符串，不经过JSON.parse，你拿到的就是一串带花括号的文本，没法直接用。就像收到一箱快递，箱子外面写着“易碎”，你还得拆开包装才能拿到里面的瓷器。

后来jQuery流行起来，把这一套封装成了$.ajax()，代码短了不少，但底层还是那套原理。再后来ES6出了fetch，原生支持Promise，写法更清爽：

fetch('/api/users?id=123') .then(response => response.json()) .then(data => console.log(data)); 

fetch默认不带cookie，需要手动加credentials: 'include'，这是个坑。我有个同事，项目上线后用户登录状态时有时无，查了半天，就是fetch默认不带凭证导致的。他当时骂了一句：这设计反人类。

实际开发里，ajax拿数据最常见的坑有三个。第一个是跨域，浏览器出于安全考虑，禁止你从a.com向b.com发请求。解决方案有JSONP、CORS、代理服务器。CORS最正规，但需要后端配合，在响应头里加Access-Control-Allow-Origin。第二个是缓存，GET请求在某些浏览器里会缓存结果，导致你改了后台数据，前端拿到的还是旧的。解决办法是在URL后面拼一个时间戳参数，比如&_=Date.now()。第三个是请求顺序，用户快速操作时，前一个请求还没回来，后一个已经发出去了，最后显示的数据可能是旧的那批。这时候要么用AbortController取消前面的请求，要么在回调里判断请求序号，只处理最后一次的结果。

ajax拿数据，说到底就是一次HTTP往返。但真正考验人的，是对异步流程的控制。多个请求要并行，可以用Promise.all；要串行，可以用async/await。我见过不少新手，把回调套回调，三层嵌套下来，代码长得像一盘意大利面，自己都找不到出口。换个async写法，清清楚楚：

async function getData() {  var res1 = await fetch('/api/user'); var user = await res1.json(); var res2 = await fetch('/api/orders?userId=' + user.id); var orders = await res2.json(); return orders; } 

就这么简单。没有魔法，没有神秘仪式，ajax就是浏览器给你开的一扇小窗，你探头出去喊一声，服务器把数据扔进来，你接住，然后更新页面。搞懂它，你就能做出那种“页面不动，数据却换了”的流畅体验，而不是每次操作都让用户看着白屏转圈。