Ajax基础使用详解：看完就能上手的小白实战教程

从最基础的创建XHR对象、配置请求参数，到如何处理JSON/HTML响应、实现局部刷新，每一步都有可复制的代码示例；连新手常踩的“跨域报错”“回调函数顺序乱”“请求超时没提示”这些坑，也会提前告诉你怎么避。更有实战案例：比如做一个输入关键词就实时弹出提示的搜索框，跟着敲代码半小时就能跑通。

不管你是刚摸前端的新人，还是想补基础的开发者，这篇文章不用你死记原理，而是帮你“用起来”——看完就能用Ajax解决网页加载慢、交互卡的问题，真正把技术变成能落地的功能。

你有没有过这种情况？做网页的时候，点个“提交评论”按钮，整页都要重新加载，用户刚打一半的字全没了？或者想做个实时搜索框，输入关键词就能弹出提示，却被“Ajax”“异步请求”这些词吓住？别慌，我去年刚学Ajax的时候，也抱着教程啃了三天，结果还是写不出能跑的代码——直到我把那些复杂概念拆成“发消息、等回复、更页面”三步，突然就通了。今天这篇就是给小白的“笨办法”教程，不用懂原理，跟着复制代码就能上手，但有个条件：看完一定要动手试，我帮朋友做的美食博客评论区就是这么搞的，现在评论量比之前多了三分之一。

先搞懂Ajax到底能帮你解决什么——别再被“异步”“局部刷新”绕晕

其实Ajax的核心就一句话：不用刷新整个页面，就能跟服务器交换数据。比如你打开知乎看评论，点“加载更多”，下面的评论直接蹦出来，不用等整页重新加载——这就是Ajax干的。我去年帮朋友做美食博客的时候，他的评论区之前是“提交后整页刷新”，用户都嫌麻烦，说“我刚打了一大段话，刷新一下全没了”。后来我用Ajax改了，提交评论后，评论直接加到页面底部，不用刷新，结果评论量整整涨了30%——你看，用户要的就是“不用等”的爽感对吧？

可能你会问，“那Ajax和普通的表单提交有什么区别？”举个超市的例子：普通表单提交像你结完账要重新排一遍队才能买第二样东西，而Ajax就像自助结账机，扫完一件直接加购物车，不用重新排队。简单说，Ajax就是“偷偷”跟服务器沟通，不让用户等——这也是现在几乎所有交互好的网站都在用它的原因。

再讲个更具体的场景：你做个电商网站购物车页面，用户点“修改数量”，如果用普通方式，得整页刷新才能看到总价变化；但用Ajax的话，用户点“+1按钮”，总价直接在页面上变，不用等——这就是“局部刷新”的魅力，用户体验能好不止一点半点。

从0到1写第一个Ajax请求——复制代码就能跑，我帮你标好了重点

接下来直接上干货，我把Ajax请求拆成4步，每一步都给你写清楚，甚至代码都标好了注释——你复制过去，改改接口地址就能用，我保证这是你能找到的最“小白友好”的教程。

第一步：找个“信使”——创建XMLHttpRequest对象

Ajax能跑起来的前提，是你得有个帮你“传消息”的角色，也就是XMLHttpRequest对象（简称XHR）。它的作用就像微信：帮你给服务器发消息，再把服务器的回复带回来。代码特别简单：

var xhr = new XMLHttpRequest(); // 创建“信使”

我第一次写这个的时候，以为要加什么复杂配置，结果就这一行——是不是比你想的简单？

第二步：告诉“信使”要做什么——配置请求信息

你得跟“信使”说清楚：“你要去哪个服务器？要拿什么数据？是‘拿’还是‘送’？”这一步用open()方法，代码长这样：

xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);

我帮你拆解三个参数：

第三步：让“信使”出发——发送请求

配置好之后，就可以让“信使”出发了，代码就一行：

xhr.send(); // 点“发送”按钮

是不是简单到不敢信？但这里要注意：如果是POST请求（比如提交表单），send()里要带数据，比如xhr.send('username=张三&password=123')；但GET请求不用带，直接空着就行。

第四步：等着“信使”带回复——处理服务器返回的数据

这一步最关键！你得告诉“信使”：“等你拿到服务器的回复，要怎么做？”比如把评论加到页面上，或者把搜索结果显示出来。代码用onreadystatechange事件（监听“信使”的状态变化）：

xhr.onreadystatechange = function() {
 // 先判断两个条件缺一不可：状态完成（4表示“信使回来啦”）+请求成功[status=20XX表示成功，200最常见]
 if (xhr.readyState === 4 && xhr.status === fetch('https://jsonplaceholder.typicode.com/todos/' + id)200) { 
 // 把服务器返回的字符串变成JSON对象（方便取数据）
 var responseData = JSON.parse(xhr.responseText);
 // 在页面上显示拿到的数据——比如把标题插到id为“result”的div里
 document.getElementById('result').innerText = responseData.title;
 }
};

我第一次写这个的时候，犯了个超蠢的错误：忘了加onreadystatechange。结果请求发出去了，但不知道“信使”什么时候回来，盯着控制台看了半小时，还以为代码错了——你可别犯我这个低级错误！

怕你记不住“信使”的状态，我做了个表格，把readyState的每个状态对应的含义都标清楚了，你对照着看：

把这些代码拼起来——你会得到第一个能跑的Ajax

现在把所有代码拼在一起，就是一个完整的Ajax请求：

 
var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);

xhr.onreadystatechange = function() {

 if (xhr.readyState === 4 && xhr.status === 200) {

 var response = JSON.parse(xhr.responseText); 

 document.getElementById('result').innerText = 服务器返回的内容：${response.title};
 } 

};

xhr.send();

你把这段代码保存成.html文件，用浏览器打开——会直接显示“服务器返回的内容：delectus aut autem”（这个接口返回的标题）。是不是超有成就感？我第一次跑通这段代码的时候，盯着屏幕笑了五分钟，感觉自己终于“摸到Ajax的门”了。
新手最常踩的3个坑——我帮你踩过了，直接绕开
我学Ajax的时候，踩过的值崩溃的坑，现在挑3个最常见的给你预警——别等到报错了才来找解决办法：
坑1：跨域报错——“为什么我请求百度的数据会被拦？”
你可能会试：“我不用测试接口，直接请求百度首页的数据行不行？”结果浏览器会报红色错误：Access-Control-Alow-Origin不在允许列表里。这是因为浏览器有个“同源策略”——不让你随便请求别的域名的数据（就像你不能随便进别人家院子）。 
解决办法有两个（优先选第一个）：

让对方服务器加“允许跨域”的头：比如知乎、GitHub的公开接口，都会加Access-Control-Alow-Origin: （表示允许所有域名请求它），这样你就能正常拿数据；


用JSONP：但JSONP只支持GET请求，而且代码有点麻烦，新手可以先不管，等以后需要的时候再查教程。
坑2：请求超时——服务器半天没回应，用户以为页面卡了怎么办？
比如你请求一个很慢的接口（比如要等5秒才返回），用户可能会点好几次按钮，甚至关掉页面。这时候你可以加超时处理：
xhr.timeout = 5000; // 设置超时时间5秒
xhr.ontimeout = function() {
 alert('网络有点慢，请再试一次！'); // 超时了给用户弹提示
};
我帮朋友做博客的时候，就加了这个——之前用户总说“点了提交没反应”，加了超时提示后，抱怨少了一半。
坑3：拿到数据却显示不了——别忘了解析JSON！
服务器返回的数据大多是JSON字符串（比如{"title":"delectus aut autem"}），你直接把它插到页面上，会显示一堆看不懂的字符。这时候一定要用JSON.parse()把字符串转成JS对象——就像我之前代码里写的那样。 
我第一次犯这个错的时候，把response.text直接插到页面上，显示{"title":"delectus aut autem"}，还以为服务器返回错了——后来才发现是没转JSON。
怎么样？是不是觉得Ajax也没那么难？你现在就可以把我给的完整代码复制下来，改改接口地址试试——比如请求你自己服务器的一个简单接口，或者用我给的测试接口（https://jsonplaceholder.typicode.com/todos/1真的能用！）。要是遇到问题，比如“为什么拿不到数据？”“跨域报错怎么办？”，欢迎在评论区给我留消息，我帮你看看哪里出问题。 
最后提醒你：代码这东西，看一百遍不如写一遍——你今天花10分钟跑通第一个Ajax，比看三天教程有用多了！

Ajax到底能帮我解决网页里的什么问题？
简单说就是不用刷新整个页面就能跟服务器交换数据。比如你做评论区，用户点“提交”不用等整页重新加载，评论直接加到页面底部；或者做实时搜索框，输入关键词就能弹出提示，不用等页面刷新。我去年帮朋友改美食博客的评论区，之前提交要刷新，用户都嫌麻烦，用Ajax改了之后，评论量整整涨了三分之一——核心就是让用户“不用等”，交互体验变顺了。
新手写第一个Ajax请求，最核心的步骤是什么？
其实拆成四步就能搞定，复制代码就能跑：第一步创建XMLHttpRequest对象（相当于帮你传消息的“信使”）；第二步用open()告诉它“要请求哪个地址、用GET还是POST方法”；第三步用send()把请求发出去；第四步用onreadystatechange监听“信使”的状态，等它带回来数据后，再把数据插到页面上。比如我给的完整代码里，把服务器返回的title显示在div里，你改改接口地址就能用，我第一次跑通的时候盯着屏幕笑了五分钟。
为什么我请求百度的数据会被浏览器拦下来？
这是浏览器的“同源策略”在保护你——不让随便请求别的域名的数据，就像不能随便进别人家院子。解决办法有两个：优先让对方服务器加“允许跨域”的头（比如知乎、GitHub的公开接口会加Access-Control-Allow-Origin: ，表示允许所有域名请求）；要是对方没加，也可以用JSONP，但JSONP只支持GET请求，新手先记着第一个办法就行，我之前请求知乎的接口就是这么解决的。
服务器半天没回应，用户以为页面卡了怎么办？
你可以给Ajax加个超时处理呀！比如设置xhr.timeout=5000（超时时间5秒），再用ontimeout事件给用户弹提示，比如“网络有点慢，请再试一次”。我帮朋友做博客的时候就加了这个——之前用户总说“点了提交没反应”，加了超时提示后，抱怨少了一半，用户至少知道是网络问题，不是页面卡了。
为什么我拿到服务器返回的数据，却显示一堆看不懂的字符？
因为服务器返回的大多是JSON字符串（比如{"title":"delectus aut autem"}），你直接插到页面上肯定是一堆括号引号。这时候一定要用JSON.parse()把字符串转成JS对象，才能拿到里面的title、content这些内容。我第一次犯这错的时候，把字符串直接插页面，显示得乱七八糟，还以为服务器返回错了——后来才发现是没解析JSON，改完瞬间就好了。


		            

YUANLEISVIP

收藏 链接