使用Ajax获取数据示例-优快云博客

本文链接：https://blog.youkuaiyun.com/confirmAname/article/details/16850885

本文介绍了一个简单的Ajax示例，展示了如何通过Ajax发送GET请求并从Servlet接收响应。示例中包括了基本的HTML页面结构、JavaScript代码以及Java Servlet的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

testAjax.jsp :

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ajax(){
	var xhr=getXhr();
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				document.getElementById("resText").innerHTML=xhr.responseText;
			}
		}
	}
	xhr.open('get','test',true);
	xhr.send(null);
}

function getXhr(){
	var xhr=null;
	if(window.ActiveXObject){
		xhr=new ActiveXObject("Microsoft.XMLHTTP");
	}else if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}
	return xhr;
}
</script>
</head>
<body>

<input type="button" value="以ajax方式获取数据" onclick="ajax();">
<div id="resText"></div>

</body>
</html>

TestServlet.java :

public class TestServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response) 
		throws ServletException, IOException {
		PrintWriter pw=response.getWriter();
		pw.print("hello ajax...");
		pw.close();
	}

}

为Servlet映射的url为test。

点击按钮后：

如果get方式要传递参数，可以这样：

xhr.open('get','test?name=tom&age=23',true);

public class TestServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response) 
		throws ServletException, IOException {
		String name=request.getParameter("name");
		String age=request.getParameter("age");
		PrintWriter pw=response.getWriter();
		pw.print("name:"+name+" ,age:"+age);
		pw.close();
	}

}

原生的ajax