ervlet、jsp、Cookie、Ajax学习-EW帮帮网

系列文章目录

第一章基础知识、数据类型学习
 第二章万年历项目
 第三章代码逻辑训练习题
 第四章方法、数组学习
 第五章图书管理系统项目
 第六章面向对象编程：封装、继承、多态学习
 第七章封装继承多态习题
 第八章常用类、包装类、异常处理机制学习
 第九章集合学习
 第十章 IO流、多线程学习
 第十一章仓库管理系统项目
 第十二章员工管理系统、多表查询、反射实现DBHelper学习
 第十三章 DML、DDL、数据库对象学习
 第十四章网络编程、各种标签、CSS学习
 第十五章 ECMAScript、BOM学习
 第十六章 DOM、jQuery学习
 第十七章 Servlet、jsp、Cookie、Ajax学习

前言

本文我们将讲述：
Servlet：是在服务器端编程的技术
jsp：.jsp文件类似.html文件，里面都是前端页面代码，以后会用.jsp文件
Cookie：在客户端做数据存储
Ajax：异步请求
同步请求、异步请求具体区别：Ajax与Web对比
人类甄别计划完成了100%，但我觉得太没意思了就没执行，毕竟符合条件的就我一个外星移民，照理你们都得被毁灭光线“biubiu”死，但太没意思了嘛。我决定把这个杀手锏握在手里，让每个国家上交国家金库里的30%，不然我就针对性的把他们国家的人都“biubiu”死！呼哈哈哈哈哈哈哈哈！呼哈哈哈哈哈哈哈哈哈哈哈！

一、Servlet

服务器-Tomcat容器-web服务器-web容器-tomcat-servlet容器指的都是Servlet
Servlet是在服务器端编程的技术 哦，déjà-vu"
一个Servlet对象，负责一个或一组url
Servlet/jsp是一种在服务器端动态生成html/css/js页面的技术，可以在idea里动态生成页面的组件

1. Servlet运行过程

（发送）客户端浏览器发送请求到服务器（用到http协议）
（匹配）服务器根据请求信息的路径url，去调用响应的Servlet类（请求）
（处理）通过Servlet中的打印流对象将生成的html数据输出给服务器（响应）
（返回）服务器将servlet生成的数据在输出给客户端浏览器（用到http协议）
（查看）客户端接收到响应信息后，先解压，再交给浏览器解释执行，用户进行查看

2. Servlet与url对应

2.1 单个

一个Servlet对象，负责一个url
写法：
/aaa

2.2 多个

一个Servlet对象，负责一组url
写法有二：
/aaa/*

*.bbb

3. servlet的生命周期

3.1 创建

当客户端第一次发送请求到Servlet里，服务器才会创建该Servlet对象

3.2 初始化

创建时初始化
执行一次

3.3 服务执行

对请求进行分发，分发到对应的方法里进行处理
重复执行

3.4 销毁

关闭服务器时，当前服务器下所有Servlet对象都销毁

4. Servlet的单例模式

Servlet其实是伪单例：构造器可以共有
实现方式：
使用是map集合的方式，实现servlet对象单例
是key
是value

一般是懒汉式，饿汉式用1实现

5. Servlet简写

Servlet3.0版本支持注解方式来配置Servlet
一个注解@WebServlet替换两组对应标签
在这里插入图片描述
在Servlet类上写@WebServlet(“要链接的前端页面”)

6. 请求和响应分解

http协议：
单向性、长连接、无状态
规定的内容：
——请求的内容：
————1、一个请求行（请求方式，请求路径，协议名字，协议版本）
————2、多个请求头
————3、请求主体（请求的参数列表）
——响应的内容：
————1、一个响应行（协议名，协议版本，状态码，状态码描述）
————2、多个响应头
————3、响应主体

7. 介绍请求对象HttpServletRequest

7.1 获得请求行信息

请求方式：request.getMethod()
资源路径：request.getRequestURL()
资源路径：request.getRequestURI()
协议：request.getScheme()
协议版本号：request.getProtocol()
get方式的请求信息：request.getQueryString()
当前项目部署的名称：request.getContextPath()

7.2 获取请求头信息

单独获得：request.getHeader(“User-Agent”)
获得所有：
Enumeration 枚举的意思，getHeaderNames()返回枚举类型的数组

Enumeration<String> names=request.getHeaderNames();
while(names.hasMoreElements()) {
    String name = names.nextElement();
    System.out.println(name + ":" + request.getHeader(name));
    System.out.println();
}

7.3 获取请求主体信息

获得请求主题里的参数列表
String empno= request.getParameter(“empno”);//获得请求参数
String ename = request.getParameter(“ename”);
获得一组参数：
request.getParameterValues(“cait”);

8. 介绍响应对象HttpServletResponse

8.1 设置响应行

response.setStatus(Integer.parseInt(empno), ename);//设置一个状态，同时设置状态信息

8.2 设置响应头

//处理乱码
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //简写response.setContentType("text/html;charset = utf-8");
        response.setHeader("contentType", "text/html;charset = utf-8");
        //完整版

8.3 设置响应主体

response.getWriter().println(ename + "登陆失败");

9. 过滤器与监听器

9.1 过滤器Filter

可以对web服务器管理的所有web资源进行拦截，在web返回servlet 和servlet返回web 都会进行拦截。

9.1 监听器

监听器用于监听web应用中的某些对象、信息的创建、销毁、增加、修改、删除等动作的发生，然后做出相应的相应处理。当范围对象的状态发生变化时，服务器自动调用监听器对象中的方法。可以做统计在线人数。

二、jsp

jsp就是Servlet：继承HttpJspBase继承Servlet
Servlet擅长做逻辑处理，不擅长做数据展示；
jsp擅长做数据展示，不擅长做逻辑处理
jsp本质上是Servlet，所以jsp也是java类

2.1 jsp的运行过程

客户端第一次发送请求，要访问jsp页面，
服务器接收到请求，获得请求路径，
将对应的jsp页面，翻译成java类
然后编译成字节码文件，
再使用虚拟机，解释成机器码，运行机器码
根据请求信息进行逻辑处理后，给出响应，以流方式输出给服务器，再输出到客户端

2.2 转发和重定向

（相当于return，后面的代码不会执行）
jsp-jsp
jsp-Servlet
Servlet-jsp
Servlet-Servlet

2.2.1 转发

转发代码：

request.setAttribute("emps", emps);
request.getRequestDispatcher("show.jsp").forward(request, response);

转发时，将本方法的request参数和response参数传给转发后的页面，所以能做到共享相同的请求对象和上下文数据。
转发是服务器内部的操作，客户端不会察觉到转发的过程，URL地址不会发生改变

2.2.2 重定向

重定向代码：

request.setAttribute("emps", emps);//把键值对存在request对象中
response.sendRedirect("show.jsp");
//如果想

因为重定向没法传入request、response，所以重定向没法获取数据，如果想获取数据，可以将第二行改为如下，将数据传入，但如果需要传大量数据，本方法会显得非常臃肿。

response.sendRedirect("show.jsp?emps=", emps);

重定向的本质：服务器发送一个特殊的响应给客户端，告诉客户端它请求的资源在另一个URL上，客户端根据新的URL发起一个新的请求，服务器会处理该请求并返回相应。

2.2.3 为什么会转发用request，重定向用response

转发代表服务器内一个页面转到另一个页面，是把客户端传给服务器的request传给另一个页面，客户端没做任何操作。
重定向代表服务器返回给客户端一个response，客户端再自动重新发起另一个请求request，访问另一个页面。

2.2.4 转发与重定向区别：

1、跳转效率的不同
转发：效率高
重定向：效率低
2、是否共用一个request
转发：原来页面与新页面共有同一个request
重定向：原来页面与新页面不共有一个request（可以用session扩大重定向的作用域来共享数据）
3、浏览器URL地址不同
转发：URL地址保持不变
重定向：URL地址为重定向后地址
4、“/”路径的含义不同
转发：代表当前项目的根目录
重定向：代表当前服务器的根目录
5、跳转范围不同
转发：只能转发到同一应用的URL
重定向：可以重定向任何服务器、任何应用的URL
6、刷新是否导致重复提交
转发：会导致重复提交
重定向：不会导致重复提交
7、是否经过过滤器
转发：不经过过滤器
重定向：经过过滤器
8、实现语句不通
转发：request.getRequestDispatcher().forward(request, response);
重定向：response.sendRedirect();

2.3 作用域对象

2.3.1 pageContext

当前页面内

2.3.2 request

一次请求只要给出相应，请求就算结束
（转发算一次请求内，重定义不算一次请求内）
既是请求参数
又是作用域对象

2.3.3 session

一次会话（建立连接到断开连接）
会话对象：
生命周期：
创建：建立连接
销毁：断开连接分为
客户端销毁：用户关闭浏览器：session丢失（30分钟活动时间后销毁）
服务器关闭：session销毁（所有对象销毁）

2.3.4 application

一个应用内（只要服务器不管就不算结束）一般不用

2.4 路径问题：

1、一个url/一组url对应一个servlet
2、“/”路径的含义不同
3、在开发过程中，不要写相对路径，要写绝对路径
jsp绝对路径
动态获得base标签

<%
    String base = request.getContextPath() + "/";
    System.out.println(base);
    String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + base;
    System.out.println(url);
%>
<base href="<%=url%>">

2.5 jsp语法

声明全局变量<%! %>
表达式<%= %>
java脚本段<% %>
指令@

2.6 jsp九大内置对象（重点要记）

1、request请求对象，作用域对象
2、response响应对象
3、pageContext页面上下文对象，作用域对象
4、session会话对象，作用域对象
5、application应用程序对象，作用域对象
6、out输出对象
7、config配置对象
8、page页面对象
9、exception对象：隐藏对象，在当前jsp页面中添加<%@ page isErrorPage=“true”%>，重新刷新页面，在tomcat的work包里的servlet文件中，会自动出现exception对象

三、Cookie

Cookie在客户端做数据存储，和session在服务端做数据存储类似

Cookie类继承Object类
可以同时建立多个Cookie

1. CookieServlet类

@WebServlet("/cs")
public class CookieServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //处理乱码
        try {
            request.setCharacterEncoding("utf-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset = utf-8");

        String no = request.getParameter("empno");
        String name = request.getParameter("ename");
        if ("123".equals(no) && "admin".equals(name)){
            Cookie cookie = new Cookie("login", name);
            cookie.setMaxAge(60 * 60 * 24 * 7);//设置保存时间
            response.addCookie(cookie);
            response.sendRedirect(request.getContextPath() + "/empok.jsp");
        }else {
            response.getWriter().println("登录失败");
        }
    }
}

2. empLogin.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%
        String base = request.getContextPath() + "/";
        System.out.println(base);
        String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + base;
        System.out.println(url);
    %>
    <base href="<%=url%>">
<%--    <%
        String base = request.getContextPath() + "/";
        String url = request.getScheme():
    %>--%>
</head>
<body>
    <%
        Cookie[] cookies = request.getCookies();
        if (cookies != null){
            for (Cookie cookie :cookies) {
                if (cookie.getName().equals("login")){
                    response.sendRedirect(request.getContextPath() + "/empok.jsp");
                }
            }
        }
    %>
    <form action="cs" method="get">
        员工编号<input type="text" name="empno"><br/>
        员工姓名<input type="text" name="ename"><br/>
        <input type="submit" name="提交">
    </form>
<a href="emp/reg">点击跳转注册</a>
</body>
</html>

3. emok.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1>登录成功！！</h1>
</body>
</html>

四、Ajax

Ajax = Asychronous + Javascript + And + Xml(JSON)
JSON（javascript的原生对象）JavaScript Object Notation

1. 同步请求和异步请求

同步请求（Web）：页面跟着请求一起走，到服务器端需要对当前页面的所有数据集合，重新查询，在返回。
异步请求（Ajax）：页面不跟请求走，只有局部区域的内容发生变化。

2. Ajax优势劣势

Ajax优势：异步请求、局部刷新
不刷新整个页面，只刷新局部；
页面不需要刷新，提供连续的用户体验；
“按需请求”，减少带宽的占用，响应速度快；
把一部分服务器的压力，转交给前端。

Ajax劣势：
如果一个页面大量使用ajax的话，那么该页面的搜索性能查
破坏了history历史记录的机制

3. Ajax常用方法

3.1 open(method, URL, async)

建立与服务器的连接
method指定请求的HTTP方法，一般为get或post
URL指定请求的地址
async指定是否使用异步请求，值为true或false，一般不写或写true

3.2 send(content)

发送请求
content指定请求的参数

3.3 setRequestHeader(header, value)

设置请求的头信息

4. Ajax常用属性

XMLHttpRequest的状态信息：readystate

就绪状态码	说明
0	XMLHttpRequest对象未完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应
4	XMLHttpRequest对象读取响应结束

监听事件变化：Onreadystatechange

5. Web与Ajax差异

发送请求方式不同
Web：提交表单方式发送请求
Ajax：异步引擎对象发送请求
服务器响应不同
Web：相应内容是一个完整页面
Ajax：相应内容知识需要的数据
客户端处理方式不同
Web：需等待服务器响应完成并重新加载整个页面后用户才能进行操作
Ajax：可以动态更新页面中的部分内容，用户不需要等待请求的响应

6. Ajax工作流程

在这里插入图片描述

7. Ajax使用步骤

1、创建异步引擎对象XMLHttpRequest
2、设置一个请求：请求方式、请求路径、参数
3、发送请求
4、接收响应

五、同步请求、异步请求具体区别

1. ajaxUser.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3 .js"></script>
    <script type="text/javascript">
        function demo1() {
            //1、创建异步请求对象
            var obj = new XMLHttpRequest();
            //2、设置一个请求：请求方式、请求路径、参数
            var str = document.myform.ename.value;
            obj.open("get", "ajaxs?ename=" + str);
            //3、发送请求
            obj.send(null);//null请求的主体
            //4、接收响应
            obj.onreadystatechange = function () {
                if (obj.readyState == 4 && obj.status == 200) {
                    document.getElementById("sid").innerText = obj.responseText;
                }
            }
        }

        function demo2() {
            //1、创建异步请求对象
            var req = new XMLHttpRequest();
            //2、设置一个请求：请求方式、请求路径、参数
            req.open("post", "ajaxs");
            //3、发送请求
            req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
            req.send("ename=" + document.myform2.ename2.value);
            //4、接收响应
            req.onreadystatechange = function () {
                if (req.status == 200 && req.readyState == 4) {
                    document.getElementById("sid2").innerText = req.responseText;
                }
            }
        }

        function demo3() {
            //1、创建异步请求对象
            var obj = new XMLHttpRequest();
            //2、设置一个请求：请求方式、请求路径、参数
            var str = document.myform3.ename3.value;
            obj.open("get", "ajaxs?ename=" + str);
            //3、发送请求
            obj.send(null);//null请求的主体
            //4、接收响应
            obj.onreadystatechange = function () {
                if (obj.readyState == 4 && obj.status == 200) {
                    eval("var emp=" + obj.responseText);
                    document.getElementById("sid3").innerText = emp.empno + ";" + emp.ename + ";" + emp.job;
                }
            }
        }

        function demo4() {
            //1、创建异步请求对象
            var obj = new XMLHttpRequest();
            //2、设置一个请求：请求方式、请求路径、参数
            var str = document.myform4.ename4.value;
            obj.open("get", "ajaxs?ename=" + str);
            //3、发送请求
            obj.send(null);//null请求的主体
            //4、接收响应
            obj.onreadystatechange = function () {
                if (obj.readyState == 4 && obj.status == 200) {
                    eval("var emps=" + obj.responseText);
                    $("select").empty();
                    for (var i = 0; i < emps.length; i++) {
                        $("<option value='" +
                            emps[i].empno + "'>" +
                            emps[i].ename + "_" +
                            emps[i].job + "</option>").appendTo("[id='sel']");
                    }
                }
            }
        }

        //5、为txt5添加异步请求
        $(document).ready(function () {
            //为txt5文本框添加异步请求
            $("[name='txt5']").blur(function () {
                $.ajax({
                    type: "get",
                    url: "ajaxs?ename=" + $(this).val(),
                    success: function (str) {
                        JSON.stringify(str);
                        $("[name='txt5']").next().text(str.empno + ";" + str.ename + ";" + str.job);
                    }
                });
            });
            
            //6、为txt6添加异步请求
            $("[name='txt6']").blur(function () {
                var ename = $("[name='txt6']").val();
                alert(ename);
                $.get("ajaxs", "ename=" + ename, function (emps) {
                    JSON.stringify(emps);
                    alert(emps);
                    $("#sel6").empty();
                    for (var i = 0; i < emps.length; i++) {
                        $("<option value='" +
                            emps[i].empno + "'>" +
                            emps[i].ename +
                            "</option>").appendTo("#sel6");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <table border="1px">
        <tr>
            <td style="height: 200px;width: 300px">
                <form name="myform">
                    <input type="text" name="ename" onblur="demo1()"/><span id="sid"></span>
                </form>
            </td>
            <td style="height: 200px;width: 300px">
                <form name="myform2">
                    <input type="text" name="ename2" onblur="demo2()"/><span id="sid2"></span>
                </form>
            </td>
            <td style="height: 200px;width: 300px">
    
                <form name="myform3">
                    <input type="text" name="ename3" onblur="demo3()"/><span id="sid3"></span>
                </form>
            </td>
            <td style="height: 200px;width: 300px">
                <form name="myform4">
                    <input type="text" name="ename4" onblur="demo4()"/>
                    <select id="sel"></select>
                </form>
            </td>
        </tr>
        <tr>
            <td style="height: 200px;width: 300px">
                <input type="text" name="txt5"><span></span>
            </td>
            <td style="height: 200px;width: 300px">
                <input type="text" name="txt6">
                <select id="sel6"></select>
            </td>
            <td style="height: 200px;width: 300px"></td>
            <td style="height: 200px;width: 300px"></td>
        </tr>
    </table>
</body>
</html>

2. AjaxServlet文件

package com.controller;

import com.google.gson.Gson;
import entry.Emp;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;

@WebServlet("/ajaxs")
public class AjaxServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //处理乱码
        try {
            request.setCharacterEncoding("utf-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json; charset = utf-8");
        String ename = request.getParameter("ename");
        if ("admin".equals(ename)){
            response.getWriter().println("[]");

        }else{
            ArrayList<Emp> list = new ArrayList<>();
            list.add(new Emp(1234, "alen", "job"));
            list.add(new Emp(1214, "ellen", "jobes"));
            Gson gson = new Gson();
            response.getWriter().println(gson.toJson(list));
        }
    }
}

总结

本文我们讲述了：
Servlet和jsp是一对一、一对多的关系，一对多时，可以用反射简单实现
Cookie用来在客户端做数据存储，做了如何实现7天用户免登录
Ajax与Web对比：Ajax是局部刷新，而Web是全屏刷新

好没意思哦…地球人能不能搞出点新鲜玩应儿啊…

ervlet、jsp、Cookie、Ajax学习