当前位置：首页 > 全部内容 > JavaScript AJAX 入门：从环境搭建到 GET/POST 请求详解

JavaScript AJAX 入门：从环境搭建到 GET/POST 请求详解

作者：代码拾荒时间：2026-10-31 03:34:16浏览：398

本文通过完整案例详解 JavaScript 中 AJAX 的使用。从 JavaWeb 环境搭建、Servlet 注册开始，逐步演示如何创建前台页面。重点解析基于 GET 和 POST 方式的异步数据请求流程，包括 XMLHttpRequest 对象的状态码（readyState）与状态码（status）的判断，以及浏览器开发者工具 Network 面板的数据交互分析，帮助开发者理解局部刷新原理。

AJAX 入门案例与环境搭建

AJAX 入门案例

AJAX 入门案例与环境搭建

1.1 搭建 Web 环境

AJAX（Asynchronous JavaScript and XML）技术已广为人知，它的出现极大地简化了前端页面与服务器之间的数据传输过程，并支持页面的局部刷新。通过后台与服务器进行少量数据交换，AJAX 允许网页实现异步更新，即在不重新加载整个网页的前提下，对网页的特定部分进行更新。

在 JavaWeb 项目中，AJAX 主要应用于浏览器与服务器之间的数据传输场景。

为避免枯燥地堆砌知识点，按照惯例，此处暂不深入理论，而是直接通过一个实际案例进行演示。

启动 Eclipse 开发工具，新建一个 Web 项目。

若对 JavaWeb 项目的创建尚不熟悉，可参考作者之前的相关教程。

项目目录结构如下：

AJAX 入门案例与环境搭建


<?xml version="1.0" encoding="UTF-8"?>
<web-app>
</web-app>

至此，Web 项目的搭建工作即告完成。

在继续编写代码前，需先验证当前环境配置是否正确。

验证方法为：在 WebContent 目录下新建一个空白的 JSP 页面，并在其中随意编写少量内容。

AJAX 入门案例与环境搭建


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body style="padding:100px">
<h1>Hello World</h1>
</body>
</html>

启动 Tomcat 服务器，并将该项目部署运行。

AJAX 入门案例与环境搭建

若启动过程未报错，则说明服务器运行正常。

打开浏览器，输入访问地址。此处 Tomcat 端口号为 80，默认情况下可省略不写。

http://localhost/ajax/index.jsp

AJAX 入门案例与环境搭建

页面成功加载，访问无误。

这表明我们的 Web 项目环境搭建已成功。

编写服务器程序 Servlet

1.2 编写服务器程序 Servlet

AJAX 入门案例与环境搭建

个人感悟与精粹整理

Web 环境已就绪，接下来编写一个简单的 Servlet 程序。Tomcat 作为服务器，其中包含名为 ajax 的 Web 项目，而 Servlet 则相当于该项目中的各个独立功能模块。

以电脑中的 QQ、Word、杀毒软件等程序为例，一个 Web 项目本质上与这些应用程序的概念相同。

打开 QQ 可实现聊天、语音、视频等功能，类比到 JavaWeb 项目，这些具体功能即由一个个 Servlet 实现。

许多开发者熟悉 SpringMVC 等框架，其中的 Controller 组件实际上是对 Servlet 的封装，其本质依然相同。

编写 Servlet 时，需在 web.xml 文件中进行注册，否则无法调用。这类似于安装 QQ 时需要在注册表中进行注册，原理一致。

言归正传，现在编写一个具体的功能模块，即一个 Servlet。

继承 HttpServlet 类，并重写 doGet 方法。


import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MyServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("111");
}
}

在方法体内，暂时不编写任何具体逻辑。

接下来，需在 web.xml 文件中对该 Servlet 进行注册配置。


<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<servlet>
<!-- 这里是servlet的名字 -->
<servlet-name>MyServlet</servlet-name>
<servlet-class>MyServlet</servlet-class>
<!-- 这里写servlet类在的包路径 -->
</servlet>
<servlet-mapping>
<!-- 这里是地址映射 -->
<servlet-name>MyServlet</servlet-name>
<!-- 这里写servlet映射地址 -->
<url-pattern>/MyServlet</url-pattern>
</servlet-mapping>
</web-app>

完成 Servlet 注册后，先尝试访问该功能以验证配置。

重启 Tomcat 服务器。

访问地址：http://localhost/ajax/MyServlet

AJAX 入门案例与环境搭建

前台页面设计与 GET 请求

1.3 前台页面设计

服务器端程序基本就绪，为实现与服务器的交互，需编写前台页面。该页面面向用户，用户仅能通过前台页面访问 Servlet。

构建一个小案例：在页面上发送一句话至服务器，服务器随后返回回应。

此案例旨在熟悉整体交互流程，逻辑较为简单。

为简化开发，不手动调整 CSS 样式，直接引入 Bootstrap 框架。

引入 Bootstrap 的核心 CSS 文件。

AJAX 入门案例与环境搭建​

随后，修改 index.jsp 文件内容。


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
<title>Insert title here</title>
<style type="text/css">
.container {
margin-top:100px;
}
</style>
<script>
window.onload = function(){
var btn = document.getElementById("submit");
btn.onclick = function(){
alert();
}
};
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button id="submit" class="btn btn-default" type="button">提交</button>
</span>
</div>
</div>
</div>
</div>
</body>
</html>

页面显示效果如下：

AJAX 入门案例与环境搭建

1.4 基于 GET 方式的数据请求

点击提交按钮时，先执行 alert() 提示，若成功弹出，说明点击事件绑定无误，随后继续编写后续代码。

传统方式通过 form 表单提交，但这会导致页面整体刷新，且代码逻辑相对复杂。

AJAX 技术的出现极大改善了这一状况，局部刷新技术在当时被视为重大进步。

此处直接给出实现代码：


btn.onclick = function(){
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("get","MyServlet?message="+document.getElementsByTagName("input")[0].value,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
};
}

同时修改 MyServlet 以处理请求。


@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String msg = req.getParameter("message");
System.out.println(msg);
}

重启 Tomcat，访问 index.jsp 页面进行测试。

现代浏览器均具备调试功能，按下 F12 键即可打开调试界面。以 Chrome 浏览器为例，找到 Network 选项卡。

AJAX 入门案例与环境搭建

Network 视图会展示所有数据交互情况，包括引入的 JS、CSS 文件，以及各类请求和响应信息。

例如，刷新页面时观察 Network 面板。

AJAX 入门案例与环境搭建

刷新后，服务器首先接收到的 URL 为：http://localhost/ajax/index.jsp

这是一个请求，服务器接收后返回 index.jsp 页面及 bootstrap.min.css 文件。

由于在 index.jsp 中引入了 bootstrap.min.css，因此该文件也被一并加载。

AJAX 入门案例与环境搭建

现在，输入一句话并点击提交按钮，观察发生的变化。

AJAX 入门案例与环境搭建

将 input 框内的内容提交至服务器程序 MyServlet。

控制台已接收到数据，此处幸运地未出现中文乱码问题，暂忽略乱码处理。

AJAX 入门案例与环境搭建

由于 MyServlet 未返回任何内容，alert 弹窗显示为空。

接下来，让浏览器接收服务器返回的一句话。


@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String msg = req.getParameter("message");
System.out.println(msg);
resp.setContentType("text/html;charset=utf-8");
PrintWriter out=resp.getWriter();
out.println("你好，这是服务器返回的信息！");
out.flush();
out.close();
}

再次点击提交按钮。

AJAX 入门案例与环境搭建

操作成功。

接下来，查看请求的具体详细信息。

AJAX 入门案例与环境搭建

结合 JS 代码进行比对，即可一目了然。


btn.onclick = function(){
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("get","MyServlet?message="+document.getElementsByTagName("input")[0].value,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
};
}

readyState 状态码说明：

0: 请求未初始化

1: 服务器连接已建立，但尚未发送请求

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

当 readyState 等于 4 且 HTTP 状态码为 200 时，表示响应已就绪。

请求方式为 GET，且仅当返回的状态码为 200 时，才会打印 responseText，这对应于以下代码：

out.println("你好，这是服务器返回的信息！");

即上述语句的输出内容。

基于 POST 方式的数据请求

1.5 基于 POST 方式的数据请求

GET 方法会将提交的数据显示在 URL 地址栏中，而 POST 方法不会，因此 POST 方法相对更安全。

POST 方法的流程与 GET 方式相似，此处直接提供代码：


window.onload = function(){
var btn = document.getElementById("submit");
btn.onclick = function(){
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("post","MyServlet",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var postData = {message : document.getElementsByTagName("input")[0].value};
var postDataStr = (function(obj){ // 转成post需要的字符串.
var str = "";
for(var prop in obj){
str += prop + "=" + obj[prop] + "&"
}
return str;
})(postData);
alert(postDataStr);
xhr.send(postDataStr);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
};
}
};

MyServlet.java 文件内容。


import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MyServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
String msg = req.getParameter("message");
System.out.println(msg);
resp.setContentType("text/html;charset=utf-8");
PrintWriter out=resp.getWriter();
out.println("你好，这是服务器返回的信息！");
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}

以上所述是小编给大家介绍的 JavaScript 中浅讲 AJAX 图文详解，希望对大家有所帮助。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

作者最新文章

5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选

2026-11-05 17:04:04

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00

JavaScript函数定义的三种方式：声明、表达式与箭头函数

2026-11-05 13:50:55