内容摘要：Ajax不是一门语言，它是一个套路——一个让网页“偷懒”的套路。1999年，微软在IE5里塞了个XMLHttpRequest对象，当时没人当回事。直到2005年，Jesse James Garrett

Ajax不是菜鸟一门语言，它是教程一个套路——一个让网页“偷懒”的套路。1999年，菜鸟微软在IE5里塞了个XMLHttpRequest对象，教程当时没人当回事。菜鸟直到2005年，教程Jesse James Garrett写了篇文章给它起了个名字叫Ajax，菜鸟这玩意儿才火起来。教程说白了，菜鸟Ajax就是教程让你不用刷新整个页面，就能跟服务器要数据、菜鸟发数据。教程

你肯定用过百度搜索的菜鸟自动补全吧？你敲“怎么”，底下就蹦出“怎么做饭”“怎么追女生”。教程那个下拉列表就是菜鸟Ajax干的活——你每敲一个字，浏览器就偷偷摸摸地往服务器发个请求，拿回一堆匹配项，再悄悄塞进页面里。整个过程你压根感觉不到页面刷新，像变魔术一样。

传统网页那会儿可不是这样。你填个表单，点提交，浏览器就“唰”地白屏一下，然后整个页面重新加载。要是网速慢，你得盯着转圈的小图标干瞪眼。更坑的是，你填了一半的表单内容，刷新后全没了。Ajax把这套流程彻底改了——页面待在原地不动，数据在后台悄悄流动，用户根本感知不到网络请求的发生。

实现Ajax其实不复杂。核心就一个对象：XMLHttpRequest。你新建一个实例，调用open()方法设定请求方式和地址，再用send()把请求发出去。然后监听onreadystatechange事件，等服务器返回数据后，用JavaScript把数据渲染到页面上。就这么几行代码的事。

var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/users', true); xhr.onreadystatechange = function() {  if (xhr.readyState === 4 && xhr.status === 200) {  document.getElementById('result').innerHTML = xhr.responseText; } }; xhr.send(); 

上面这段代码，就是Ajax的骨架。注意那个true参数——它代表异步。意思是说，浏览器发出请求后不傻等，该干嘛干嘛，等服务器回应了再回来处理。你要是把它改成false，页面就卡死了，跟冻结了似的，用户点哪儿都没反应。所以异步是Ajax的灵魂，同步Ajax就是个伪命题。

现在你打开任何一个现代网站，Ajax早就成了标配。刷微博下拉加载更多，点外卖实时更新配送进度，看股票行情价格跳动——全是Ajax在背后忙活。但有意思的是，现在很少有人直接写XMLHttpRequest了，都用fetch()或者axios这种封装好的库。为啥？因为原生写法太啰嗦了，而且回调嵌套多了以后，代码能乱成一锅粥——这就是传说中的“回调地狱”。

我印象特别深的是，刚学Ajax那会儿，我写了个小功能：用户输入用户名，实时检查是否被注册。结果忘了处理服务器返回的JSON格式，直接把字符串塞进页面，显示出来一堆{ "status":"error"}这种乱码。后来才明白，服务器返回的是文本，你得用JSON.parse()把它转成对象才能用。

Ajax还有个坑，叫跨域。你从localhost:3000发请求到api.example.com，浏览器会直接拦截，因为协议、域名、端口任何一个不同，都属于跨域。解决方式有JSONP、CORS、代理服务器这些，但新手最容易卡在这儿。我记得当时折腾了半天，最后发现是后端没设置Access-Control-Allow-Origin响应头，加上一行代码就通了。

说白了，Ajax就是个工具，帮你在不刷新页面的前提下跟服务器打交道。它不神秘，也不复杂，就是一套约定俗成的交互模式。现在前端框架React、Vue里到处都是它的影子，你甚至感觉不到它的存在——但你要是真去追一下网络请求，会发现它们本质上还是那一套：发请求、等响应、更新页面。技术会变，套路不变。会了Ajax，你再看那些花里胡哨的前端框架，底层逻辑一眼就能看穿。