原生态的Ajax和Jquery的Ajax的实例

最新推荐文章于 2024-07-29 14:22:26 发布

他好像条狗啊丶

最新推荐文章于 2024-07-29 14:22:26 发布

阅读量206

点赞数

文章标签： java 原生态的Ajax Jquery的Ajax html servlet

本文链接：https://blog.csdn.net/Tajyl/article/details/80080303

版权

本文使用了servlet来演示Ajax

原生态的Ajax

1.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=ISO-8859-1">
<title>原生态Ajax</title>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
	
	function validate(){
		var name = $("#txtUserName").val();
		if(name == "" || name == null){
			$("#hdUserName").html("用户名不能为空！");
		}else{
			//1:创建XMLHttpRequest对象
			xmlHttpRequest = createXMLHttpRequest();
			//2：设置回调函数
			xmlHttpRequest.onreadystatechange = callback;
			//3:初始化XMLHttpRequest组件
			var url = "AjaxServlet?name="+name;//服务器端url地址
			xmlHttpRequest.open("post",url,true);
			//4：发送请求
			xmlHttpRequest.send("key=123");
		}
		
		//创建XMLHttpRequest
		function createXMLHttpRequest(){
			if(window.XMLHttpRequest){		//返回值为true时，说明是新版本IE浏览器
				return new XMLHttpRequest();
			}else{
				return new ActiveXobject("Microsoft.XMLHTTP");
			}
		}
		//ajax回调函数
		function callback(){
			if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
				var data = xmlHttpRequest.responseText;
				if(data == "false"){
					$("#hdUserName").html("用户名已被使用！");
				}else{
					$("#hdUserName").html("用户名可以使用！");
				}
			}
		}
		
	}
</script>
</head>
<body>
	<form action="servlet/AjaxServlet" method="post">
		<table>
			<tr>
				<td>
					用户名：<input type="text" id="txtUserName" name="txtUserName" οnblur="validate()">
				</td>
				<td><div id="hdUserName"></div></td>
			</tr>
		</table>
	</form>
</body>
</html>

AjaxServlet.jsp

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String name = request.getParameter("name");
		boolean flag = false;
		if("admin".equals(name)){
			flag = false;
		}else {
			flag = true;
		}
		PrintWriter out = response.getWriter();
		out.print(flag);
		out.flush();
		out.close();
	}

Jquery的Ajax

2.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>Jquery-Ajax</title>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
	
	$(function(){
		$("#txtUserName").blur(function(){
			var username = $('#txtUserName').val();
			$.ajax({
				type:'post',
				url:"servlet/AjaxServlet?name="+username,
				data:'flag',
				success:function(data){
					if(data == "false"){
						$("#hdUserName").html("NO！");
					}else{
						$("#hdUserName").html("YES！");
					}
				}
			});
		});
		
	});
		
</script>
</head>
<body>
	<form action="servlet/AjaxServlet" method="post">
		<table>
			<tr>
				<td>
					用户名：<input type="text" id="txtUserName" name="txtUserName" >
				</td>
				<td><div id="hdUserName"></div></td>
			</tr>
		</table>
	</form>
</body>
</html>

这个servlet同上

他好像条狗啊丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生态的Ajax和Jquery的Ajax的实例

本文使用了servlet来演示Ajax原生态的Ajax1.jsp&lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt
复制链接

扫一扫