JavaScript AJAX 图文详解：从环境搭建到GET/POST请求实现
AJAX的核心在于使用XMLHttpRequest对象在不刷新整个页面的情况下与服务器进行异步数据交换。本文将结合Java后端Servlet，从零开始搭建开发环境，通过具体的代码示例和浏览器调试截图，详细解析基于GET和POST方式的数据请求流程及响应处理。
开发环境与基础配置
AJAX技术常用于前端页面与后端服务器之间的数据传输，实现网页的局部刷新。为了展示这一过程，我们需要一个标准的JavaWeb运行环境。以下操作基于Eclipse开发工具和Apache Tomcat服务器。
第1步：创建Web项目结构
首先，在Eclipse中新建一个Dynamic Web Project。项目的目录结构是后续开发和部署的基础，确保主要代码文件放置在正确的包路径下。
web.xml配置说明：
在项目根目录的WEB-INF文件夹下，必须包含web.xml配置文件。虽然现代框架多采用注解配置，但理解原始的XML注册方式是掌握Servlet原理的关键。最基本的配置文件应至少包含XML声明和根节点<web-app>。
<?xml version="1.0" encoding="UTF-8"?> <web-app> </web-app>
第2步：验证基础环境
为了确保服务器能够正确加载静态资源，建议在WebContent目录下新建一个JSP页面作为入口。index.jsp文件中可以写入简单的HTML进行测试。
编写一个简单的Hello World页面用于测试路径映射：
<%@ 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>Test Page</title> </head> <body style="padding:100px"> <h1>Hello World</h1> </body> </html>
启动Tomcat服务器后，访问http://localhost:80/ajax/index.jsp（端口以实际配置为准）。如果页面正常显示且无报错，说明环境搭建成功。
服务端Servlet程序编写
Servlet相当于Web应用程序中的功能模块。就像电脑上的QQ或Word软件一样，每个Servlet处理一种特定的请求逻辑。在使用Spring MVC等现代框架时，Controller本质上也是对Servlet的封装。因此，理解原生Servlet的创建、继承及注册是掌握底层原理的必要步骤。
第3步：注册与编写MyServlet
创建一个继承自HttpServlet的类MyServlet，并重写doGet方法。随后，必须在web.xml中进行显式注册，指定其名称、类路径以及访问URL模式（url-pattern）。
web.xml核心配置代码：
<?xml version="1.0" encoding="UTF-8"?> <web-app> <servlet> <servlet-name>MyServlet</servlet-name> <servlet-class>MyServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>MyServlet</servlet-name> <!-- 访问路径为 /MyServlet --> <url-pattern>/MyServlet</url-pattern> </servlet-mapping> </web-app>
重启Tomcat后，直接访问http://localhost:80/ajax/MyServlet，确认请求到达后端但未返回具体内容的初始状态。
前端交互界面设计
为了实现与服务器的异步交互，需要在前端页面中添加表单元素和按钮。引入Bootstrap框架可以快速构建美观的输入框和按钮组件。
第4步：整合Bootstrap与JS事件绑定
修改index.jsp，引入Bootstrap的CSS样式，并添加一个简单的文本输入框和一个提交按钮。同时，使用原生JavaScript监听按钮的点击事件，暂时仅输出弹窗以验证事件触发正常。
<%-- ... 头部省略 ... --%>
<script>
window.onload = function(){
var btn = document.getElementById("submit");
btn.onclick = function(){
alert("Click Detected"); // 验证点击事件
}
};
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<input type="text" class="form-control" id="msgInput">
<span class="input-group-btn">
<button id="submit" class="btn btn-default" type="button">提交</button>
</span>
</div>
</div>
</div>
</div>
</body>
渲染后的界面效果如下所示，用户可在输入框中输入文字。
基于GET方式的数据请求
传统的Form表单提交会导致页面刷新，而AJAX可以实现无刷新提交。这里我们通过原生的XMLHttpRequest对象来构建GET请求。
第5步：编写XMLHttpRequest逻辑
在按钮点击事件中，初始化xhr对象，调用open方法设置请求类型为"get"，并在URL参数拼接输入的值，最后调用send()发送。后端Servlet接收参数后，将结果回写到响应流中。
前端JS请求代码：
btn.onclick = function(){
// 兼容旧版IE的XMLHttpRequest创建
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
// open(method, url, async)
var inputValue = document.getElementsByTagName("input")[0].value;
xhr.open("get", "MyServlet?message=" + inputValue, true);
// 监听状态变化
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}
};
xhr.send();
};
后端Servlet修改：读取请求参数并回写响应。
@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();
}
打开浏览器开发者工具（F12），进入Network标签页。刷新页面可以看到对index.jsp的请求及CSS文件的加载过程。
当点击提交按钮后，Network面板会新增一条名为MyServlet的请求记录。检查控制台输出，确认服务器已接收到传递的参数。
由于之前未设置响应体，首次测试可能弹窗为空。配置好服务器端的out.println后，再次点击提交，前端即可收到“你好，这是服务器返回的信息！”的弹窗提示。
回到开发者工具的Preview或Headers选项卡，可以清晰看到此次GET请求的URL结构及返回的Text内容。
关于Ajax请求状态
在处理异步请求时，必须关注readyState属性，它代表请求的当前阶段：
- 0: 请求未初始化
- 1: 服务器连接已建立（已调用open）
- 2: 请求已接收（已调用send）
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
只有当readyState等于4，且HTTP状态码status为200时，才表示数据已成功获取。
基于POST方式的数据请求
相比于GET方法会将参数暴露在URL中，POST方法更加安全且不受长度限制。其核心区别在于需要设置请求头并手动序列化数据。
第6步：转换AJAX发送逻辑
修改前端代码：open改为"post"，添加setRequestHeader设置application/x-www-form-urlencoded类型，并将数据序列化为key=value&格式字符串传入send()。
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 inputVal = document.getElementsByTagName("input")[0].value;
var postDataStr = "message=" + inputVal;
alert(postDataStr); // 调试用，确认数据格式
xhr.send(postDataStr);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}
};
后端Servlet完善：增加Post方法的接收逻辑。为避免重复代码，通常在doPost中直接委托给doGet执行，但需注意Post请求通常要手动设置字符编码。
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8"); // Post需处理编码
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();
}
以上就是JavaScript中AJAX图文详解的详细内容，更多关于JavaScript ajax编程的资料请关注本站其它相关文章！
本站声明
本文内容仅供参考，不代表本站观点。转载或引用请注明出处。如发现内容问题，请通过联系我们页面反馈。
