Ajax技术与模拟QQ邮箱登录

一.前端需要的一些基本概念

1.CSS绝对定位 : 就是一种覆盖的效果 ,多个div可重叠 ,那么对于作用域范围最大的那个div的定位 ,也可作用到其它div中
这是不加绝对定位的,说明对wrapper的边距定位不生效
这是
这是加了绝对定位的
在这里插入图片描述

2.背景图片 : 之前一直很搞不懂背景图片咋设置 ,这下终于懂了

body{  
非常简单 ,就是对块作用域中 设置background属性,路径使用的是url
		background-size: cover;
		background: url('img/bg.jpg');	
	}

3.去除下划线 : 主要是去除< a >标签的下划线 #foot a{text-decoration: none;}

二.Ajax重要方法和基本概念

概念 : Ajax是一种组合技术 ,不是单纯由一种技术构成的,
其中包含了JavaScript , HTML+CSS , XML等等
最突出的特点就是异步传输

同步与异步的区别 : 同步也就是俗称的one by one ,一个接着一个处理
而所谓的异步 ,就是在处理一项业务的时候 ,还能同时进行其它业务, 比如在用户登录的时候 ,还能进行其它操作

背景 : Ajax与登录的关系 ,采用异步处理 ,能让我们在登录的时候 ,万一密码输入错误 ,可能会导致输入框清空 ,用户需要从头到尾再打一遍账号密码的尴尬局面 ,因此 ,在提高用户体验上 ,Ajax的作用至关重要

XMLHttpRequest对象 : 该对象是实现Ajax异步的JavaScript对象

responseText属性 : 只读属性 ,用于接收HTTP响应的文本内容 (在本文是被用于接收print传输来的status属于来判断账号密码是否正确)

readyState , 是XMLHttpRequest对象的一个属性 , 用于标记需要信息是否完全被接收到 (4表示完全被接收到了)

[其实,拿来当工具类就可以了]

模拟代码

//登录页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
	body{
		background-size: cover;
		background: url('img/bg.jpg');	
	}
	#wrapper{
		position: absolute; /**可重叠*/
		top :200px;  
		left :900px;/**与页面边界的边距*/
		background-color: #fff;
		width:400px;
		height:300px;
		text-align: center;
	}
	
	input[type="text"],input[type="password"]{
		width:270px;
		height:35px;
		border-radius: 3px;
		margin:10px 0;
		border: 1px solid #aaa;
	}
	input[type="button"]{
		background-color: #86ce2f;
		width:270px;
		height: 40px;
		color:#fff;
		font-size: 18px;
		margin-top: px;
		border: 0px;
	}
	#tittle{
		font-size:24px;
		color:#666;
		height:60px
		line-height:60px  
	}
	
	#info{
		color:red;
		height: 10px;
		
	}
	
	#foot{
		font-size: 14px;
		margin-top: 10px;
		padding-right: 70px;
		text-align: right;
	}
	
	#foot a{
		text-decoration: none;  /**去除下划线*/
	}
	
</style>

<script>
	function valid(){//请求部分
		var username = document.getElementById("username").value;
		var pwd = document.getElementById("pwd").value;
		var infoDiv = 	document.getElementById("info");
		if(username==''){
			infoDiv.innerHTML = "用户名不能为空";
		}else if(pwd ==''){
			infoDiv.innerHTML = "密码不能为空";
		}else{
			//使用Ajax异步请求后台
			//创建XMLHttpRequest对象
			var req = new XMLHttpRequest();
			//打开通道 ,三个方法method ,url(后台servlet),model(true表示异步)
			req.open("post","LoginServlet",true);	
			//请求头 : 标识http报文的类型
			req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			//发送 把数据发给后台 open的第一个参数是get的话,send的参数为null
			req.send("username="+username+"&pwd="+pwd);//执行这句后,state变为2
			
			//再使用Ajax去接受服务器(后台)响应 ,在readyState为4的时候去接收响应文本
			req.onreadystatechange = function(){
				//↑原来监听readyState的状态 ,一旦状态改变,函数就会调用
				if(req.readyState==4){
					//可以接受响应文本了
					var res = req.responseText;
					if(res =='0'){
						infoDiv.innerHTML = "用户名或密码错误!";
					}else if(res =='1'){
						//登陆成功,跳转去主页
						location.href="main.jsp";//用于页面跳转
						
					}
				}
			}
			
		}
	}
</script>

</head>
<body>
	<!--
	 css中的定位, 绝对定位 ,position:absolute (依赖父类定位,元素会重叠)
	 之前学的 都是a标签传值 ,form表单传值 ,会发生页面跳转 ,降低用户体验
	 
	 
	 -->
	
	
	<div id="wrapper">
		<div id="tittle">
			账号密码登录
		</div>
		
		<div id="info">
			
		</div>
		
		<form action="" enctype="application/x-www-form-urlencoded">
			<input type="text" placeholder="用户名" name="" id="username">
			
			<input type="password" placeholder="密码" name="" id="pwd">
			
			<input type="button" onclick="valid()" value="登录">
		</form>
		
		<div id="foot">
			<a href="">忘记密码</a>
			<a href="">注册账号</a>
			<a href="">反馈</a>
		</div>
	
	</div>
</body>
</html>

//servlet

package com.hzyc.lesson.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class LoginServlet
 */
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String username = request.getParameter("username");
		String pwd =  request.getParameter("pwd");
		System.out.println(username+"-"+pwd);
		int status = 0;//0表示登录失败 ,成功后设置为1

		//收到请求后 ,连接数据库进行密码比对
		if(username.equals("tt")&&pwd.equals("123456")) {  //这里就不连接了,直接写死
			status=1;
		}
		
		//给前台返回 登录是否成功
		//登录成功后 ,设置session
		
		//如果失败 ,得返回 response
		PrintWriter out = response.getWriter();//能够获取到一个具有输出功能的流
		out.print(status);
		//强制刷新 (带有缓冲区,只有在满了以后才输出,所有用一个强制刷新,强行输出)
		out.flush();
		//关闭流
		out.close();
	}

}