使用Ajax实现前端与后端交互-优快云博客

本文链接：https://blog.youkuaiyun.com/Hyc_20/article/details/44010917

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">
<title>AjaxDemo</title>
<script type="text/javascript">
	function show() {
		var number = document.getElementById("number").value;
		var xmlHttpRequest;
		if (window.XMLHttpRequest) {
			xmlHttpRequest = new XMLHttpRequest();
		} else {
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}

		//post提交：若在send里填数据则必须设置  setRequestHeader  使之像HTML表单那样发送数据。
		xmlHttpRequest.open("post", "server.jsp");
		xmlHttpRequest.setRequestHeader("Content-type",
				"application/x-www-form-urlencoded");
		xmlHttpRequest.send("number=" + number);
		xmlHttpRequest.onreadystatechange = function() {
			if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
				document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
			}
		};

		//get方式提交：
		xmlHttpRequest.open("get", "server.jsp?number=" + number);
		xmlHttpRequest.send(null);
		xmlHttpRequest.onreadystatechange = function() {
			if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
				document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
			}
		};
	}
</script>
</head>
<body>
	<h3>验证数字是否为0~10之间？</h3>
	<input type="text" id="number" onblur="show()" />
	<div id="myDiv" style="color: red; display: inline;"></div>
</body>
</html>

server.jsp:

<%
	int num = Integer.parseInt(request.getParameter("number"));
	if (num >= 0 && num < 10) {
		out.print("Yes");
	} else {
		out.print("No");
	}
%>

测试：在【index.jsp】中的文本框输入数字，当光标离开文本框时通过Ajax将数据发送到服务端【server.jsp】，由服务端响应结果后被客户端接收。

Ajax【实例】