AJAX快速入门 - 四个核心步骤

2401_837088502025-08-02 16:25

1. 编写AjaxServlet，并使用response输出字符串

这是服务器端的工作：

创建一个Java Servlet来处理AJAX请求

当服务器收到请求后，通过response输出字符串返回给客户端

比如：返回"Hello World"或JSON数据

2. 创建XMLHttpRequest对象（代码不用背，直接复制就行了）

这是客户端的第一步，用于和服务器交换数据：

java 复制代码

var xmlhttp;
if (window.XMLHttpRequest) {
    // 现代浏览器：IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // 老版本IE浏览器
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

为什么需要兼容性检查？

现代浏览器都支持XMLHttpRequest

老版本IE浏览器需要使用ActiveXObject

3. 向服务器发送请求（这里面的url用完整路径，因为开发是前后端分离）

java 复制代码

xmlhttp.open("GET","url");  // 打开GET请求到指定URL
xmlhttp.send();            // 发送请求

4. 获取服务器响应数据

java 复制代码

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
        alert(xmlhttp.responseText);  // 显示服务器返回的数据
    }
}

关键概念：

readyState == 4：请求完成

status == 200：请求成功

responseText：服务器返回的文本内容

完整流程图示

客户端（浏览器） → 请求 → 服务器（Servlet）

客户端（浏览器） ← 响应 ← 服务器（Servlet）

实际应用例子

比如用户点击一个按钮，想要检查用户名是否可用：

用户点击按钮

JavaScript创建XMLHttpRequest

发送请求到服务器："检查用户名'张三'"

服务器处理：查询数据库

返回结果："用户名已存在"

JavaScript接收：显示"用户名已被使用"

这就是AJAX的完整工作流程！