Ajax
1. 什么是Ajax
客户端发送请求后，我们的服务端响应一个页面或地址
而ajax响应的不再是地址或网页，而是**一个数据**
Ajax技术的产生：Asynchronous JavaScript and XML
允许浏览器与服务器通信而无须刷新当前页面的技术都叫Ajax
- Ajax的流程
使用Ajax必须具备：
- 通过事件触发向服务器发送请求
- 服务器响应的一定是数据，不再是地址或网页
- 具备的条件：js功底和css功底
2. 如何使用ajax
- 两种实现方法：
- 可以通过js完成原生的ajax请求。JavaScript
- 可以使用jquery实现ajax请求——别人封装原生js发送的ajax
ajax请求：常用方法如下
$.get(url,[data],[callback],[type]);
$post(url,[data],[callback],[type]);
参数意义：
- url：服务器的地址
- data：发送ajax请求时携带的数据
- callback：回调函数——当服务器响应时会触发该函数
- type：服务器响应的数据类型。默认text。而我们一般需要json
- ：里面的参数表示可有可无
实现步骤：
1. 引入jquery文件
在所需的jsp文件的html——的head里引入jquery文件，同前端所学一样
<head><title>$Title$</title><%--引入jquery文件--%><script src="js/jquery-3.4.1.js"></script></head>
2. 通过事件向服务器发送请求
给响应按钮添加相应事件，如点击事件，在事件中发送ajax请求
<body><button onclick="MyAjax()">点击时间</button><%--获取当前时间--%><%=new Date()%>><span id="r"></span></body>
在点击事件中定义ajax服务器的地址，发送请求时所携带的数据，回调函数等
<script>
<%--/MyServlet：服务器地址{name:"zmq",age:15}：发送请求时携带的值回调函数：当服务器响应后触发的函数msg：服务器响应后的数据赋值给该变量
--%>function MyAjax(){$.get("/MyServlet",{name:"zmq",age:15},function (msg){//依据选择器将msg的值传入到相应位置$("#r").html(msg);})}
</script>
3. 服务器端的相关业务操作
注解：用于注册servlet
@WebServlet(urlPatterns = "/MyServlet")
继承HttpServlet类，重写service方法
因为前面发送请求时携带了参数，所以——接收参数
//获取数据String name = req.getParameter("name");String age = req.getParameter("age");
因为java代码中没有内置输出对象，所以——需要先获取输出对象
因为是响应的，所以用resp
//获取输出对象PrintWriter our = resp.getWriter();
通过输出对象响应数据，将响应的数据传入赋值给msg
//响应数据our.print("ajax----------响应");
最后，刷新out对象和关闭out对象
//刷新页面our.flush();//关闭响应our.close();
- 整体代码
@WebServlet(urlPatterns = "/MyServlet")
public class MyServlet extends HttpServlet {//重写service方法@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置编码格式req.setCharacterEncoding("utf-8");//请求的编码格式resp.setCharacterEncoding("utf-8");//响应的编码格式//获取数据String name = req.getParameter("name");String age = req.getParameter("age");//获取输出对象PrintWriter our = resp.getWriter();//响应数据our.print("ajax----------响应");//刷新页面our.flush();//关闭响应our.close();}
}3.服务器响应的数据类型
text：文本类型，默认就是文本类型
json ：json对象类型，非常重要
xml ：xml类型，可扩展标记语言，一般用于人工智能、微信支付【了解】
4. json以及格式
4.1 what
JSON ：JavaScript Object Notation 一种简单的数据格式
是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包
JSON规则：对象是一个无需的" '名称/值’对"集合。一个对象已"{“(左括号)开始，”}“(右括号)结束。每个"名称"后跟一个”:“(冒号)；”'名称/值’对"之间使用","(逗号)分隔
JSON对象：
{"key":value,"key":value...}JSON集合：
[{"key":value,"key":value...},{"key":value,"key":value...},...{"key":value,"key":value...}
]规则如下：
① 映射用冒号(“:”)表示。名称：值
② 并列的数据之间用逗号(“,”)分割。名称1：值1，名称2：值2
③ 映射的集合(对象)用大括号(“{}”)表示。{名称1：值1，名称2：值2}
④ 并列数据的集合(对象)用大括号(“[]”)表示
[
{名称1：值1，名称2：值2}，
{名称1：值1，名称2：值2}
]
⑤ 元素值可具有的类型：string、number、object、array、true、false、null
⑥ 调用json对象中数据：对象名.key
<script>//json对象,String,number,boolean,Object,nullvar p={"name":"张三","age":18};// alert(p.name)//复杂的jsonvar p2={"name":"李四","age":22,"address":{"province":"河南省","city":"郑州市","street":"杨金街道"}};// alert(p2.address.street)//json集合对象var ps=[{"name":"李四1","age":22,"address":{"province":"河南省1","city":"郑州市1","street":"杨金街道1"}},{"name":"李四2","age":221,"address":{"province":"河南省2","city":"郑州市2","street":"杨金街道2"}},{"name":"李四3","age":222,"address":{"province":"河南省3","city":"郑州市3","street":"杨金街道3"}}]//循环for(var i=0;i<ps.length;i++){alert(ps[i].name)}</script>4.2 服务器如何响应json数据
就是把拿到的java对象，转化为json数据响应给前端
第一种，手动把java对象转化为json对象【不用】
后端
@WebServlet(urlPatterns = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//接受参数String name = req.getParameter("name");String age = req.getParameter("age");//业务操作---System.out.println("name~~~~~~~~~~"+name+";age~~~~~~~~~~~"+age);//获取输出对象PrintWriter out = resp.getWriter();User user=new User(1,"xueyang",18);//把java对象转化为json字符串数据---手动转化 学生: id,name,sex,age,hiredate,address,banji....String json="{\"id\":"+user.getId()+",\"name\":\""+user.getName()+"\",\"age\":"+user.getAge()+"}";System.out.println(json);//响应数据---out.print(json);//刷新和关闭out对象out.flush();out.close();}
}前端
<script>function myclick() {// AjaxServlet服务器的地址// {key:value,key:value.....}// 回调函数: 当服务器响应后触发的函数 msg:服务器响应的数据赋值给该变量$.get("/AjaxServlet",{name:"zs",age:25},function(msg){ //msg={\"id\":"+user.getId()+",\"name\":\""+user.getName()+"\",\"age\":"+user.getAge()+"};//alert(msg.name)//服务器响应的是一个json格式的字符串//手动把json格式的字符串转化为json对象// var jsonObject=JSON.parse(msg);// alert(jsonObject.name+";"+jsonObject.age)// $("#r").html(msg)alert(msg.name)},"json");}</script>第二种：第三方工具——阿里巴巴fastjson
① 引入fastjson依赖
② 后端代码
创建一个Java对象
User user=new User(1,zmq,18);把Java对象转化为json字符串数据——通过fastjson工具类
String json=JSON.toJSONString(user);完整代码
@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");//请求的编码设置resp.setCharacterEncoding("utf-8");//设置响应的编码//接受参数String name = req.getParameter("name");String age = req.getParameter("age");//业务操作---System.out.println("name~~~~~~~~~~"+name+";age~~~~~~~~~~~"+age);//获取输出对象PrintWriter out = resp.getWriter();User user=new User(1,"薛阳",18);//把java对象转化为json字符串数据---手动转化 学生: id,name,sex,age,hiredate,address,banji....
// String json="{\"id\":"+user.getId()+",\"name\":\""+user.getName()+"\",\"age\":"+user.getAge()+"}";
// System.out.println(json);//把java对象转化为json字符串数据---fastjson工具类String json = JSON.toJSONString(user);//响应数据---out.print(json);//刷新和关闭out对象out.flush();out.close();}③ 前端代码
回调函数中type设置为json类型
<script>function myclick(){$.get("/AjaxServlet",{name:"zs",age:25},funcion(msg){alert(msg.name) },"json");}
</script>5.通过使用Ajax实现登录
-
type类型改为button，不再使用submit提交表单数据，而是普通的普通按钮，添加点击事件
<input type="button" value="登录" onclick="loginCheck()"/> -
在点击事件function中，通过选择器获取到input框中的值。通过get方法中的[data]将数据携带
function loginCheck(){//依据id选择器获取值var username = $("#username").val();var userpassword = $("#userpassword").val();//ajax请求，携带通过id选择器获取到的数据username和userpassword$.get("/LoginServlet",{"name":username,"password":userpassword},function (msg){if(msg==="true"){alert("登陆成功！");location.href="success.jsp";}else{alert("账号或密码错误");}});} -
在LoginServlet中，通过req.getParamether获取携带的数据，封装到session会话中。调用方法查询，如果返回值为null，返回false给msg；如果不等于null，返回true给msg。都是通过创建的out响应对象调用print进行返回。
//获取数据String name = req.getParameter("name");String password = req.getParameter("password");//通过获取到的数据调用userdao中的方法进行判断UserDao userDao=new UserDao();User user = userDao.selectByNameAndPassword(name, password);//获取输出对象PrintWriter out = resp.getWriter();//对user进行判断if(user!=null){//获取session对象，并将用户信息封装到会话中HttpSession session = req.getSession();session.setAttribute("user",user);//输出布尔值trueout.print(true);}else {//输出布尔值falseout.print(false);} -
刷新，关闭
//刷新out.flush();//关闭out对象out.close();
总结
失焦事件：onblur()
json中"key"为字符串类型，不加"",表示jaon中的类对象
onload：页面加载完执行事件【js】
【jquery】：$(function(){})
