您的位置：首页 > 其它

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

2016-11-24 22:10 701 查看

概念：

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发送请
4000
求 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 onclick="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" onsubmit="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航