来看一个实际开发中常见的场景：用户注册时，输入用户名后，页面能实时提示该用户名是否已被占用。这种体验背后，靠的就是AJAX异步请求。下面用具体的代码走一遍完整的实现流程。

前端页面很简单，一个注册表单，用户名输入框绑定了失去焦点事件（onblur）。当用户输入完用户名，光标移开时，触发AJAX请求，把输入的值传给后端做校验。

先看HTML部分（index）：

  
  


  
用户注册
  

    

      
用户名：

      
密码：
      
确认密码：
      

    
  
  

前端逻辑很清晰：创建XMLHttpRequest对象，用GET方式把用户名拼到URL参数里，发送请求，然后监听状态变化。当readyState为4且status为200时，将服务器返回的文本直接显示在页面的提示区域（

）中。

再看后端，用Node.js + Express搭建，模拟从数据库查用户列表：

let express = require("express");
let bodyParser = require("body-parser");
let app = express();

// 给ejs模板引擎设置别名，别名叫html
app.engine("html",require("ejs").__express);
app.set("view engine","html");
// 指定模板的存放位置
app.set("views","./views")

// 配置bodyParser
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))

// 路由
app.get("/",(req,res)=>{
  res.render("reg01"); // 渲染模块
})

// 处理注册
app.post("/doreg",(req,res)=>{
  // 获取客户端传递的数据
  let username = req.body.username.trim();
  let pwd = req.body.pwd.trim();
  let repwd = req.body.repwd.trim();
  // 模拟从数据库中获取的用户信息
  let users = ["wangcai","xiaoqiang","admin"];
  if(users.find(user=>user===username)){
    res.send("
对不起，该用户名已经被注册了，请换个用户名~返回注册页
")
  }else{
    res.send("
恭喜你，该用户名可以使用~返回注册页
")
  }
})

app.listen(3000,()=>{
  console.log("server is running on 3000~")
})

后端代码中，/check路由并没有直接写出来，但从前端请求的URL可以看出，实际应该有一个GET /check接口来处理用户名校验。这里为了演示，把校验逻辑放到了注册处理路由里，但核心思路是一样的：从请求中拿到用户名，跟预设的数组（模拟数据库）比对，返回相应的提示信息。

整个流程跑通后，用户在输入框失去焦点时，就能看到“对不起，该用户名已经被注册了”或“恭喜你，该用户名可以使用”的实时反馈，无需刷新页面。这就是AJAX在实际项目中最典型的应用之一。