javaweb技术小结

作者: 天际神游 | 来源:发表于2018-11-10 20:36 被阅读0次

1. HTML

HTML指的超文本标记语言(Hyper Text Markup Language), 是一种用来描述网页的语言.
HTML: 结构, 决定网页的结构和内容
CSS: 表现, 设定网页的表现样式
JavaScript: 行为, 控制网页的行为

2. servlet

Servlet是Sun公司制定的一套技术标准, 包含与Web应用相关的一系列接口, 是Web应用实现方式的宏观解决方案. 而具体的Servlet容器负责提供标准的实现.
可以简单的理解servlet就是用来处理客户端请求的.

请求与servlet的对应, 是通过在web.xml配置中servlet-mapping生效, 详见文章最后.

一次请求经过的流程:
一次请求request ==>
过滤器(如果有)==>
到对应的servlet中根据发送的get或者post请求然后执行相应的doGet或者doPost方法(此处可以可以编码继承HttpServlet, 重写相应的方法来实现, 也可以直接重写service方法) ==>
根据Servlet具体的行为, 执行响应的动作, 例如可能返回response, 可能转发, 可能重定向等 ==> end

public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 处理get请求
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 处理post请求
    }
    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        // 也可以同时在这里处理request 和 response
    }
}

关于请求参数HttpServletRequest其功能是:

可以从该对象获取请求参数
在请求域中绑定数据
将请求转发给另外一个URL地址

响应结果HttpServletResponse其功能是:

使用PrintWriter对象向浏览器输出数据
实现请求的重定向

设置重定向:

response.sendRedirect("重定向的地址");

servlet收到浏览器请求后, 可以进行一定处理后, 交给服务器内部的别的servlet进行处理, 即转发请求:
因为转发是在服务器内部进行的, 所以用户是无感知的.

RequestDispatcher rd = req.getRequestDispatcher("转发的地址");
// req还是用的原来的req, 所以在req到达下一个servlet后, 其中绑定的数据依然可以使用
rd.forward(req, resp);

JSP技术

其本质是一种servlet技术, 主要用于页面显示

JSP全称Java Server Pages, 顾名思义就是运行在java服务器中的页面, 也就是在我们JavaWeb中的动态页面, 其本质就是一个Servlet.(经过转化后就是一个java文件, 其中的网页源代码文件就是java程序通过不断的打印输出 HTML 的代码实现)

一般情况下, 都是Servlet处理完的数据, 转发到JSP, JSP负责显示数据的工作(因为其擅长显示的工作)
我们可以在jsp页面汇总写java代码:

<%
// java代码
System.out.println("Hello JSP");
String str = "content";
%>
<%-- 可以通过以下的jsp表达式，使用java变量 --%>
<%=str%>

jsp中隐含的对象有以下几个，可以直接使用：
① out（JspWriter）：相当于response.getWriter()获取的对象，用于在页面中显示信息。
② config（ServletConfig）：对应Servlet中的ServletConfig对象。
③ page（Object）：对应当前Servlet对象，实际上就是this。
④ pageContext（PageContext）：当前页面的上下文，也是一个域对象。
⑤ exception（Throwable）：错误页面中异常对象
⑥ request（HttpServletRequest）：HttpServletRequest对象
⑦ response（HttpServletResponse）：HttpServletResponse对象
⑧ application（ServletContext）：ServletContext对象
⑨ session（HttpSession）：HttpSession对象

JSP之EL表达式

EL是JSP内置的表达式语言, 用以访问页面的上下文以及不同作用域中的对象, 取得对象属性的值, 或执行简单的运算或判断操作. EL在得到某个数据时, 会自动进行数据类型的转换

EL表达式用于代替JSP表达式(<%= %>)在页面中做输出操作, 其作用就是读取数据. 输出数据, 如果数据为null, 则不输出.

$(EL表达式(可完成取值, 简单判断, 简单的运算等)) 例如:
${emp.email}
${emp.gender==0 ? "女": "男"}

EL取值的四个域:
pageScope: 当前页面有效
requestScope: 一次请求有效
sessionScope: 一次会话有效
applicationScope: 应用的全局变量(服务器不炸, 一直都有, 一般是环境变量等全局的信息)

JSTL

JSTL（JavaServer Pages Standard Tag Library，JSP标准标签库)
提供一些标签, 让我们少写java代码. 页面更加简洁.
常用的标签:

<!-- if使用示例 --> 
<c:if test="${! empty employeeList}"></c:if>

<!-- for使用示例 --> 
<c:forEach items="${employeeList}" var="emp">
            <tr align="center">
                <td>${emp.id}</td>
                <td>${emp.lastName}</td>
                <td>${emp.department.deptName}</td>
                <td>
                    <a href="#">Edit</a>
                    &nbsp;&nbsp;
                    <a href="#">Delete</a>
                </td>
            </tr>
</c:forEach>

3. JavaScript

一种脚本语言, 在仅仅需要浏览器的支持即可运行(现在浏览器应该没有不支持的...), 负责网页的动态内容或者逻辑处理等等.

使用:

<script type="text/javascript">
// 具体代码
</script>

JavaScript的事件驱动:
用户事件: 点击, 鼠标移入, 鼠标移出等
系统事件: 由系统触发的事件, 如文档加载完成等

BOM: Borwser Object Model 浏览器对象模型, 提供了独立于内容的、可以与浏览器窗口进行互动的对象结构. Window对象是BOM的顶层对象，其他对象都是该对象的子对象.

DOM: Document Object Model 文档对象模型, document对象代表当前的HTML文档(可以把HTML文档看成一个树状模型). 获取document对象的本质方法是：window.document，而“window.”可以省略. (也就是说BOM包含了DOM)

DOM描述了处理网页内容的方法和接口, BOM描述了与浏览器进行交互的方法和接口.

元素查询:

// 通过id查询, 返回一个具体的节点(id是唯一的)
document.getElementById("id值")
// 通过标签名查询, 返回元素节点数组
document.getElementsByTagName("标签名")
// 根据name属性值查询, 返回元素节点数组
document.getElementsByName("name值")

AJAX

AJAX 是 Asynchronous JavaScript And XML 的简称. 直译为, 异步的JS和XML.
AJAX 是一门技术, 它提供了异步更新的机制, 使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。

异步请求对象: XMLHttpRequest, 用来封装请求报文. 现在有些浏览器已经不支持了.

JQuery

jQuery是一个框架, 它对JS进行了封装, 使其更易于使用.
JQuery对同样提供了对Ajax的支持, 更易于的进行Ajax的开发, 提供的相关方法有$.get, $.post, $.ajax等

JQuery的对象的本质就是dom对象的数组/集合
JS转JQuery: var jObj = $(dObj)
JQuery转JS: var dObj = jObj[0] 或者 var dObj = jObj.get(0)

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

一个登陆注册页面的例子如下:

$(function () {  // 页面加载完成会执行该函数内容
            // 是否通过密码测试标志
            var passwordFlag = false
            // 是否通过用户名合法测试标志
            var usernameFlag = false

            $("#form").submit(function () {
                return usernameFlag && passwordFlag
            })

            $("#username").focus(function () {
                // alert("聚焦")
                $("#regist_msg").html("")
            })

            $("#re_password").blur(function () {
                // 离开
                var password = $("#password").val()
                var re_password = $("#re_password").val()
                if (password != null && password != "" && password == re_password) {
                    // 可以注册
                    $("#repassord_msg").html("√")
                    passwordFlag = true
                } else {
                    // 不能注册
                    $("#repassord_msg").html("X")
                    passwordFlag = false
                }
            })

            $("#username").blur(function () {
                // 离开
                var username = $("#username").val();
                // 发送异步请求
                $.ajax({
                    url: "checkUsername",
                    type: "POST",
                    data: "username=" + username,
                    success: function (data) {  // 会将服务器返回的数据保存到data中
                        // 设置到span 元素 的内容为data
                        if (data == 0) {
                            // alert("用户已存在")
                            $("#regist_msg").html("用户已存在")
                            usernameFlag = false
                        } else {
                            // alert("用户不存在")
                            $("#regist_msg").html("可以使用")
                            usernameFlag = true
                        }
                    }
                })
            })
        })

4. 一些技术

Cookie

HTTP是无状态协议, 服务器不能记录浏览器的访问状态, 也就是说服务器不能区分中两次请求是否由一个客户端发出.
Cookie就是服务器在浏览器保存的一段信息. 有了Cookie就可以让浏览器每次带着Cookie进行访问, 浏览器就可以根据其中的内容, 判断是哪个浏览器在访问了.

Cookie的使用

// 设置cookie, 要返回给浏览器
Cookie cookie = new Cookie("id","123321123321");
cookie.setPath("设置cookie的路径");
cookie.setMaxAge("设置cookie保留的时间");
response.addCookie(cookie);

// 读取cookie, 浏览器带着cookie来访问
Cookie [] cookies = request.getCookies();

Seesion

Cookie有局限性, 不能太大(否则网络传输会浪费大量时间), 而且浏览器一般会对cookie的大小做出限制.
于是Session出现了, 可以有效的解决这个问题.

Session的用法
就是在服务器端保存一些用户的数据, 然后传递给用户一个名字为 JSESSIONID 的Cookie, 其对应服务器的一个Session对象, 通过它就可以获取保存用户信息的Session.

Session的创建时机是在request.getSession()方法第一次被调用时.
Session创建后, 同时又一个名为JSESSIONID 的Cookie被创建, 这个Cookie的默认时效就是当前的会话.
Session的机制也是依赖于Cookie来实现的.

Session默认有效时间为30分钟，可以在服务器的web.xml配置中修改.

关于URL重写

有时候Cookie会被浏览器禁用, 这时可以使用URL重写. 把会话的JSESSIONID 写在URL后面.

服务器的过滤器

WEB资源可能Servlet、JSP、HTML页面等. 过滤器可以截取客户端和WEB资源之间的request和response信息.
一个WEB应用中可以部署多个过滤器, 多个过滤器就组成了一个过滤器链, 请求和响应必须在经过多个过滤器后才能到达目标.

示意图

过滤器的使用, 通过Filter接口完成过滤器的开发

public class LoginFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("LoginFilter 初始化");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, 
                        ServletResponse servletResponse, 
                        FilterChain filterChain) throws IOException, ServletException {
    }

    @Override
    public void destroy() {
        System.out.println("LoginFilter 销毁方法");
    }
}

同时在web.xml中配置生效.

在线人数统计

监听到session创建了, 就认为一个用户在线
编写一个监听器

public class MySessionListener implements HttpSessionListener {
    /**
     * 监听到session创建了, 就认为一个用户在线.
      ServletContext: 很强大, 引用服务器被创建, 服务器销毁此对象才会被销毁, 声明周期与服务器相同, 相当于全局变量
     */
    @Override
    public void sessionCreated(HttpSessionEvent se) {
        /* Session is created. */
        ServletContext servletContext = se.getSession().getServletContext();
        // 获取人数
        Object count = servletContext.getAttribute("count");
        if(count == null){
            // 没有则创建
            servletContext.setAttribute("count", 1);
        }else {
            servletContext.setAttribute("count", (Integer)count + 1);
        }
    }
    @Override
    public void sessionDestroyed(HttpSessionEvent se) {
        /* Session is destroyed. */
    }
}

同时在web.xml中添加一个listener即可.

Json

AJAX一开始使用的时XML的数据格式, XML的数据格式非常简单清晰, 容易编写, 但是由于XML中包含了过多的标签, 以及十分复杂的结构, 解析起来也相对复杂. 所以目前来讲, AJAX中已经几乎不使用XML来发送数据了, 取而代之的是一项JSON.

JSON是JavaScript Object Notation 的缩写，是JS提供的一种数据交换格式.

在服务器与浏览器之间通过JSON字符串传递数据.

JSON字符串转化为Java对象, 常用的工具大概有三种, json-lib, jackson, gson.
而java对象通过json字符串传送给浏览器, js在接受的时候会默认直接转化为JSON对象.

web.xml的配置文件

<servlet-mapping> 中的 <servlet-name> 和 <servlet> 中的 <servlet-name> 相同的时候, 二者就关联起来了, 就能通过<servlet-class> 找到对应的servlet.
<url-pattern> 则是浏览器访问服务端匹配的模式, 只要匹配就可以通过<servlet-name>找到<servlet-class>

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!-- 过滤器的使用 -->
    <filter>
        <filter-name>LoginFilter</filter-name>
        <filter-class>com.jia.login.filter.LoginFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>LoginFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- 监听器的配置 -->
    <listener>
        <listener-class>com.jia.login.listener.MySessionListener</listener-class>
    </listener>

    <!-- servlet的配置 -->
    <servlet>
        <servlet-name>loginServlet</servlet-name>
        <servlet-class>com.jia.login.servlet.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <!-- 客户端的登录请求: http://localhost:8888/web01/login -->
        <servlet-name>loginServlet</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping>

    <!-- servlet的配置 -->
    <servlet>
        <servlet-name>checkUsername</servlet-name>
        <servlet-class>com.jia.login.servlet.CheckUsername</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>checkUsername</servlet-name>
        <url-pattern>/checkUsername</url-pattern>
    </servlet-mapping>
</web-app>