AJAX：判断用户是否存在及用户名密码是否正确问题

最新推荐文章于 2024-04-25 23:56:41 发布

伊人冰

最新推荐文章于 2024-04-25 23:56:41 发布

阅读量2w

点赞数 3

分类专栏： WEB

本文链接：https://blog.csdn.net/sxb956347789/article/details/53326683

版权

WEB 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

概念：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX 是一种用于创建快速动态网页的技术。

优点：

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

应用：

运用XHTML+CSS来表达资讯；
运用JavaScript操作DOM（Document Object Model）来执行动态效果；
运用XML和XSLT操作资料;
运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；
注：AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

AJAX应用程序与浏览器和平台无关的！

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>ajax学习</title>
		<script type="text/javascript">
			/*第一步 实例化 XMLHttpRequest对象*/
			var xmlhttp;
			if(window.XMLHttpRequest){
			//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp = new XMLHttpRequest();
			}else{
			// IE6, IE5 浏览器执行代码
				xmlhttp =  new ActiveXObject("Microsoft.XMLHTTP");
			}
			/*第二步 调用open方法设置参数，调用send发送请求 true表示异步  false表示同步*/
			xmlhttp.open("GET","./login.jsp?username='张三'&password='123456'",true);
			xmlhttp.send();
			/*第三步 监听服务端响应*/
			xmlhttp.onreadystatechange=function(){
				if(xmlhttp.readyState==4 & xmlhttp.readyStatus==200){
					var text = xmlhttp.responseText; //用户已存在
					document.getElementById("msg").innerHTML=text;
				}
			}
		</script>
	</head>
	
	<body>
		<input type="text" name="username"/>
		<p id="img"></p>
	</body>
</html>

现实生活中检查用户是否存在：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>ajax学习</title>
		<script src="jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			function checkUserByAjax(){
				var user = $("#user").val();//获取表单元素值
				if(user==""){
					$("#checkmsg").html("用户名不能为空");
					return;
				}
				/*第一步 实例化 XMLHttpRequest对象*/
				var xmlhttp;
				if(window.XMLHttpRequest){
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp = new XMLHttpRequest();
				}else{
				// IE6, IE5 浏览器执行代码
					xmlhttp =  new ActiveXObject("Microsoft.XMLHTTP");
				}
				/*第二步 调用open方法设置参数，调用send发送请求 true表示异步  false表示同步*/
				xmlhttp.open("GET","http://192.168.5.3/ajax/checkuser.servlet?userName="+eval(document.getElementById('user')).value,true);
				xmlhttp.send();
				/*第三步 监听服务端响应*/
				xmlhttp.onreadystatechange=function(){
					if(xmlhttp.readyState==4 & xmlhttp.readyStatus==200){
						var text = xmlhttp.responseText; //用户已存在
						document.getElementById("checkmsg").innerHTML=text;
					}
				}
			}	
		</script>
	</head>
	
	<body>
	
		用户名：<input id="user" type="text" name="userName"/>
		<span id="checkmsg"></span><br><br>
		<button οnclick="checkUserByAjax()">检查用户</button><br><br>
	</body>
</html>

当输入用户名和密码时判断是否为空：(是否正确是服务端操作判断)

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8"/>
		<title>表单学习</title>
		<style>
			div{background-image:url('E:/java1606/November/WEB/css/day18/html和css测试/image/7.jpg');
				background-repeat:no-repeat;
				width:400px;
				height:400px;
				margin:20% auto;
				text-align:center;
				}
				div form{padding:80px;}
				#msg{color:blue;}
		</style>
		<script src="jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			function check(){
				var user = $("#user").val();
				var psw = $("#psw").val();
				if(user == ""){
					$("#msg").html("用户名不能为空");
					return false;
				}else if(psw == ""){
					$("#msg").html("用户名密码不能为空");
					return false;
				}else{
					return true;
				}
			}
			
		</script>
	</head>
	
	<body>
		<div>
			<form name="form1" action="http://192.168.5.3/ajax/login.servlet" method="get" οnsubmit="return check()">
			用户名：<input id="user" type="text" name="userName" placeholder="请输入用户名"/><br><br>
			密 码: <input id="psw" type="password" name="passWord" placeholder="请输入用户名密码"/><br><br>
			<input type="submit" value="提交"/>
			<span id="msg"></span>
			</form>
		</div>
	</body>
</html>

伊人冰

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
AJAX：判断用户是否存在及用户名密码是否正确问题

概念：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。AJAX 是一种用于创建快速动态网页的技术。优点：通过在后台与服务器进行
复制链接

扫一扫