文章目录
ajax登录
● Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）， 使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了 用户体验。
● Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest） 异步地向服务器发送请求，
● 服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新， 整个过程，页面无刷新，不打断用户的操作。
out.println(“登录成功”);
/*
out.println(“登录成功”); 响应的内容。就将原来发起请求的页面内容覆盖了
//jsp
*/
//ajax
//解决方案是使用ajax 从前端向后代进行发起请求交互
//如果是ajax方式提交的数据，那么服务器端响应的数据返回后会交给XMLHttpRequest对象
LoginServlet.class
package com.ffyc.webpro.servlet;
import com.ffyc.webpro.dao.LoginDao;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/*
程序：既定流程
*/
public class LoginServlet extends HttpServlet {
/*
登录处理
*/
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter out =null;
try{
//响应行(状态码200 404 500) 响应头(setContentType编码格式)
//out.println("登录成功"); 服务器向客户端输出的内容
resp.setContentType("text/html;charset=utf-8"); //响应头
req.setCharacterEncoding("utf-8"); //设置编码格式
String account=req.getParameter("account");
String password=req.getParameter("password");
LoginDao loginDao=new LoginDao();
boolean b=loginDao.checkLogin(account,password);
out= resp.getWriter();
if(b){
//out.println("登录成功");
out.println(0);
/*
out.println("登录成功"); 响应的内容。就将原来发起请求的页面内容覆盖了
//jsp
*/
//ajax
//解决方案是使用ajax 从前端向后代进行发起请求交互
//如果是ajax方式提交的数据，那么服务器端响应的数据返回后会交给XMLHttpRequest对象
}else{
//out.println("账号或密码错误");
out.println(1);
}
}catch (Exception e){
e.printStackTrace();
//out.println("服务器忙！");
out.println(2);
}
}
}
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function subform(){
var account=document.getElementById("accountId").value;
var password=document.getElementById("passwordId").value;
//表单验证
//使用浏览器对象XMLHttpRequest对象，发起异步请求
var httpObj=new XMLHttpRequest();
httpObj.open("post","login",true) //建立与服务器的链接 async参数指定是否使用异步请求 值为true/false
httpObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置提交数据的格式的请求头
httpObj.send("account="+account+"&password="+password); //发送请求 键值&键值
//接收服务器端响应回来的数据，当发送请求之后，会触发onreadystatechange事件
//在此事件回调函数中，获取响应的内容
httpObj.onreadystatechange=function (){
//当对象就绪状态为4，http状态响应码为200时获取响应内容
if(httpObj.readyState==4&httpObj.status==200){
if(httpObj.responseText==0){
alert("登录成功");
location.replace("success.html")
}else if(httpObj.responseText==1){
alert("账号或密码错误");
}else{
alert("服务器忙！")
}
}
}
}
</script>
</head>
<body>
<!--
表单验证
-->
<!--<form action="login" method="post">-->
<!--<form enctype="application/x-www-form-urlencoded"> 表单默认提交数据请求头-->
<form>
账号<input type="text" name="account" id="accountId"> <br/>
密码<input type="password" name="password" id="passwordId"> <br/>
<!--<input type="submit" value="登录">-->
<input type="button" value="登录" onclick="subform()">
</form>
<a href="register.html">注册</a>
</body>
</html>
success.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
登录成功
</body>
</html>
