如何使用Ajax(XMLHttpRequest)发送带参数的请求，以及如何在Servlet中获取请求中的参数

最新推荐文章于 2025-09-13 11:41:32 发布

原创最新推荐文章于 2025-09-13 11:41:32 发布 · 2.3w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Ajax

Servlet

本文介绍了一个简单的前端登录请求处理流程，包括如何构造请求参数、设置请求方式及处理响应等。通过对用户输入的用户名和密码进行封装，利用XMLHttpRequest对象发送到服务器，并处理返回结果。

其实这样设计的初衷是为了在客户端发出请求前，对要发送的数据进行预处理。比如用户密码的加密操作等等。

var xmlhttp;//设置全局变量

function login() {
        //这里为了简化代码，没有附上密码加密的代码
	var params = "username=" + document.getElementById("username").value
			+ "&password=" + document.getElementById("password").value;
	sendRequest(
			"POST",
			"login",
			true,
			params,
			function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					document.getElementById("message").innerHTML = xmlhttp.responseText;
				}
			});
}

function sendRequest(method, url, isAsyns, params, action) {
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {// code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.open(method, url, isAsyns);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//这行代码很关键，用来把字符串类型的参数序列化成Form Data
	xmlhttp.send(params);
	xmlhttp.onreadystatechange = action;
}

public void doPost(HttpServletRequest request, HttpServletResponse response) {
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		......
	}

标签

#xmlhttprequest #servlet #ajax #function #action