NativeAjax 原生Ajax，简单案例 —— JavaScript

最新推荐文章于 2022-10-09 17:47:12 发布

原创最新推荐文章于 2022-10-09 17:47:12 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

Ajax

2 篇文章

订阅专栏

本文介绍了一个简单的Ajax应用案例，通过JavaScript实现浏览器与服务器之间的异步数据交换。该示例展示了如何发送POST请求到服务器，并接收服务器返回的数据。

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

JavaScript

<script type="text/javascript">
	function sendInfo() {
		var xmlhttp;
		if (window.XMLHttpRequest) {
			// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
			xmlhttp = new XMLHttpRequest();
		} else {
			// IE6, IE5 浏览器执行代码
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			    // xmlhttp.requestTest  接受服务器信息
				document.getElementById("txt").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("POST", "http://localhost:8080/JavaWebTest/NativeAjax.action?t="+Math.random(), true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("flag=" + "服务器接收信息");
		xmlhttp.send();
	}
</script>

html代码

<body>
	<div id="myDiv">
        <h2>ajax</h2>
        <h3 id="txt"></h3>
    </div>
    <button type="button" onclick="sendInfo()">Send</button>
</body>

Servlet 代码

protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String flag = request.getParameter("flag");
		System.out.println(flag);
		
		PrintWriter out = response.getWriter();
		out.print("前端接受信息");
		out.flush();
		out.close();
}

运行结果