JavaWeb基础入门

JavaWeb的技术体系

img

img

下面以登录功能的实现来讲讲JavaWeb



登录页面的开发

HTML

  • HTML指的超文本标记语言(Hyper Text Markup Language)，是一种用来描述网页的语言。超文本指的是除了可以包含文字之外，还可以包含图片、链接、音乐、视频、程序等内容。

  • HTML网页的组成

    • 结构(HTML)：HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
    • 表现(CSS)：CSS样式是表现。就像网页的外衣。比如，标题字体.颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
    • 行为(JavaScript、JQuery)：JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

  • 常用的HTML标签
    ①html 根标记
    ②head 头标记
    ③body 体标记
    ④a 超链接
    ⑤form 表单
    ⑥table 表格

  • 一个有基本结构的html页面

    ​ img

  • 登录页面的示例

    ​ img



登录功能的实现——环境的搭建

Web服务器

  • Web服务器：Web服务器主要用来接收客户端发送的请求和响应客户端请求。

  • Web服务器类别：

    1. Tomcat（Apache）：当前应用最广的JavaWeb服务器；
    2. JBoss（Redhat红帽）：支持JavaEE，应用比较广EJB容器 –> SSH轻量级的框架代替
    3. GlassFish（Orcale）：Oracle开发JavaWeb服务器，应用不是很广；
    4. Resin（Caucho）：支持JavaEE，应用越来越广；
    5. Weblogic（Orcale）：要钱的！支持JavaEE，适合大型项目；
    6. Websphere（IBM）：要钱的！支持JavaEE，适合大型项目

    我们主要使用Tomcat。

Tomcat服务器的安装及配置

  1. 将Tomcat的安装包下载并解压到任意位置（非中文无空格）

  2. Tomcat服务的目录结构

    ​ img

  3. 配置环境变量，方便Tomcat的启动关闭（可选）

    1. 新建环境变量CATALINA_HOME=解压目录

      ​ img

      在Path环境变量中加入Tomcat解压目录\bin目录

      ​ img

    2. 在命令行中运行catalina run或者 startup启动Tomcat服务器，在浏览器地址栏访问如下地址进行测试：http://localhost:8080

      ​ img

在eclipse中配置Tomcat

  1. 在eclipse中配置运行环境

    ​ img

  2. 在Eclipse中创建新的Server

    ​ img

    ​ img

    ​ img

创建动态的web工程

  1. 在Eclipse中点击File ->New->project->Dynamic Web Project

    ​ img



登录功能实现——LoginServlet

Servlet

  • 什么是Servlet

    1. Servlet是Sun公司制定的一套技术标准，包含与Web应用相关的一系列接口，是Web应用实现方式的宏观解决方案。而具体的Servlet容器负责提供标准的实现。
    2. Servlet作为服务器端的一个组件，它的本意是“服务器端的小程序”。Servlet的实例对象由Servlet容器负责创建；Servlet的方法由容器在特定情况下调用；Servlet容器会在Web应用卸载时销毁Servlet对象的实例。
    3. 简单可以理解为：Servlet就是用来处理客户端的请求的。
    4. 狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。

  • servlet开发规则

    实际编码通过继承HttpServlet来完成Servlet的开发

    public class LoginServlet extends HttpServlet{
}

  • Servlet类的相关方法

    • doGet：处理get请求

      @Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		super.doGet(req, resp);
	}

    • doPost：处理post请求

      @Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	super.doPost(req, resp);
}

    • service

      ①在Servlet的顶层实现中，在service方法中调用的具体的doGet或者是doPost
      ②在实际开发Servlet的过程中，可以选择重写doGet以及doPost或者直接重写service方法来处理请求。

  • Servlet在web.xml中的配置

    ​ img


Request请求对象

  • HttpServletRequest
    1. 该接口是ServletRequest接口的子接口，封装了HTTP请求的相关信息，由Servlet容器创建其实现类对象并传入service(ServletRequest req, ServletResponse res)方法中。以下我们所说的HttpServletRequest对象指的是容器提供的HttpServletRequest实现类对象。
    2. HttpServletRequest对象的主要功能有
      • 获取请求参数
      • 在请求域中绑定数据
      • 将请求转发给另外一个URL地址 [转发]

Response响应对象

  • HttpServletResponse
    1. 该接口是ServletResponse接口的子接口，封装了HTTP响应的相关信息，由Servlet容器创建其实现类对象并传入service(ServletRequest req, ServletResponse res)方法中。以下我们所说的HttpServletResponse对象指的是容器提供的HttpServletResponse实现类对象。
    2. 主要功能
      • 使用PrintWriter对象向浏览器输出数据
      • 实现请求的重定向[重定向]

具体登录功能的实现步骤

  1. 在登录页面中录入用户名和密码，点击登录按钮提交登录请求

    ​ img

  2. 在LoginServlet中通过request对象获取到页面表单提交的用户名和密码

  3. 调用Dao对象，将用户提交的用户名和密码与数据库的用户表的数据进行匹配

  4. 得出结果，完成响应。

package com.atguigu.login.servlet;

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

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

import com.atguigu.login.beans.User;
import com.atguigu.login.dao.UserDao;
import com.atguigu.login.dao.UserDaoImpl;

/*
 * 处理登录请求的Servlet
 * 
 * Servlet是sun公司制定的标准。Tomcat(web应用服务器、Servlet容器)实现了这些标准。
 * 
 * HttpServlet
 */
public class LoginServlet extends HttpServlet{
	/**
	 * 常用的方法：doGet doPost service
	 * 
	 * 第一种方法  重写
	 *  doGet:处理客户端的get方式的请求
	 *  doPost:处理客户端的post方式的请求
	 *  
	 *  第二种方法  重写
	 *  service：根据具体的请求方法去调用对应的doGet、doPost方法
	 *  
	 */
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//登录功能的实现。
		System.out.println("登录请求来了~~~~~~~~~~~");
		//获取到用户输入的用户名的密码，进行登录业务的处理
		/*
		 * HttpServletRequest： 请求对象。Servlet容器会在请求到达后，创建出一个request对象，将
		 * 							Http请求相关的信息全部都封装到该对象中。
		 */
		//获取用户输入的用户名和密码
		String username =  req.getParameter("username");
		String password =  req.getParameter("password");
		//调用Dao对象，将用户提交的用户名和密码与数据库的用户表的数据进行匹配
		UserDao dao = new UserDaoJdbcImpl();
		User user = dao.findUserByUsernameAndPassword(username, password);
		//设置响应头信息
		resp.setContentType("text/html;charset=utf-8");
		//获取输出流
		PrintWriter  out = resp.getWriter();
		if(user == null ) {
			//登录失败
			out.println("登录失败！！！！");
		}else {
			//登录成功
			out.println("登录成功！！！！");
			}
		out.close();
}


登录功能实现——页面中错误提示

请求重定向redirect

  • 什么是重定向

    1. 定义：重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置（如：网页重定向、域名的重定向、路由选择的变化也是对数据报文经由路径的一种重定向）。由浏览器端进行的页面跳转。

    2. 举例说明：

      ​ 重定向是网页制作中的一个知识。假设你现在所处的位置是一个论坛的登录页面，你填写了帐号，密码，点击登陆，如果你的帐号密码正确，就自动跳转到论坛的首页，不正确就返回登录页。

      这里的自动跳转，就是重定向的意思。或者可以说，重定向就是，在网页上设置一个约束条件，条件满足，就自动转入到其它网页、网址。

    3. 网页定向

      我们在网站建设中，时常会遇到需要网页重定向的情况：

      1. 网站调整（如改变网页目录结构）；
      2. 网页被移到一个新地址；
      3. 网页扩展名改变(如应用需要把.php改成.Html或.shtml)。

      这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息，访问流量白白丧失；再者某些注册了多个域名的网站，也需要通过重定向让访问这些域名的用户自动跳转到主站点等。

    4. 重定向原理图

      以下原理图的第二步就是重定向的过程。

      ​ img

      ​ img

    5. 重定向的步骤

      ​ img

      ​ img

      ​ img

      ​ img

    6. 重定向的方法

      //属于响应对象的方法
response.sendRedirect("要跳转的地址");

    7. 重定向的特点

      1. 地址栏：显示新的地址
      2. 请求次数：2次
      3. 请求域中的数据会丢失，因为是2次请求

  • Servlet接收到浏览器端请求并处理完成后，给浏览器端一个特殊的响应，这个特殊的响应要求浏览器去请求一个新的资源，整个过程中浏览器端会发出两次请求，且浏览器地址栏会改变为新资源的地址。

  • 重定向的情况下，原Servlet和目标资源之间就不能共享请求域数据了。

  • 实现重定向的API

    //请求重定向
response.sendRedirect("要跳转的地址");

请求转发

  • 什么是转发

    1. 定义：

      由服务器端进行的页面跳转。
      请求转发：一种在服务器内部的资源跳转方式。

      访问A，A请求转发了B，访问A的同时就也访问到了B。
      带参数跳到指定的页面，比如request。
      访问A，进入A的网址，然后在A里面请求转发B，就是带着A的请求到了B。

    2. 转发的原理图

      ​ img

    3. 步骤

      1. 通过request对象获取请求转发器对象：

        Requestdispatcher.getRequestdispatcher(String path)

      2. 使用Requestdispatcher对象来进行转发：

        forward（ServletRequest request，ServletResponse Response）

    4. 转发的方法（总结上面的步骤） img

    5. 特点

      1. 浏览器地址栏路径不发生变化。

      2. 只能转发到当前服务器内部资源中。

      3. 转发是一次请求。

      4. 请求域中数据不会丢失。

        img

        img

        img

    6. 什么时候使用转发，什么时候使用重定向？

      如果要保留请求域中的数据，使用转发，否则使用重定向。

      以后访问数据库，增删改使用重定向，查询使用转发。

  • Servlet接收到浏览器端请求后，进行一定的处理，先不进行响应，而是在服务器端内部“转发”给其他Servlet程序继续处理。在这种情况下浏览器端只发出了一次请求，浏览器地址栏不会发生变化，用户也感知不到请求被转发了。

  • 转发请求的Servlet和目标Servlet共享同一个request对象。

  • 实现转发的API

    //请求转发
RequestDispatcher rd = request.getRequestDispatcher("转发的地址");
rd.forward(request, response);

重定向和转发的区别

转发 重定向
浏览器地址栏 不改变 改变
发送请求次数 1 2
能否共享request对象数据 能 否
目标资源：WEB-INF下的资源 能访问 不能访问
Request中绑定的数据是否可以传递 能 不能

Jsp页面

  • JSP全称Java Server Pages，顾名思义就是运行在java服务器中的页面，也就是在我们JavaWeb中的动态页面，其本质就是一个Servlet。

  • 其本身是一个动态网页技术标准，它的主要构成有HTML网页代码、Java代码片段、JSP标签几部分组成，后缀是.jsp。

  • 相比于Servlet，JSP更加善于处理显示页面，而Servlet更擅长处理业务逻辑，两种技术各有专长，所以一般我们会将Servlet和JSP结合使用，Servlet负责业务，JSP负责显示。

  • 一般情况下， 都是Servlet处理完的数据，转发到JSP，JSP负责显示数据的工作。

  • JSP的基本语法：

    <%@ page language="java" contentType="text/htwl; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
        
    </body>
</html>

  • JSP的脚本元素

    ​ 脚本片段是嵌入到JSP中Java代码段，格式以<%开头，%>结尾，两个%号之间就可以编写Java代码了

    <%
	System.out.println("Hello World");
%>

  • JSP的表达式

    ​ JSP表达式用来直接将Java变量输出到页面中，格式以<%=开头，以%>结尾，中间是我们要输出的内容

    <%
    String str = "abc";
%>
<%=str %>

  • JSP的隐含对象

    1. out（JspWriter）：相当于response.getWriter()获取的对象，用于在页面中显示信息。
    2. config（ServletConfig）：对应Servlet中的ServletConfig对象。
    3. page（Object）：对应当前Servlet对象，实际上就是this。
    4. pageContext（PageContext）：当前页面的上下文，也是一个域对象。
    5. exception（Throwable）：错误页面中异常对象
    6. request（HttpServletRequest）：HttpServletRequest对象
    7. response（HttpServletResponse）：HttpServletResponse对象
    8. application（ServletContext）：ServletContext对象
    9. session（HttpSession）：HttpSession对象

EL表达式

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

  2. EL表达式用于代替JSP表达式(<%= %>)在页面中做输出操作。

  3. EL表达式仅仅用来读取数据，而不能对数据进行修改。

  4. 使用EL表达式输出数据时，如果有则输出数据，如果为null则什么也不输出。

  5. EL表达式的语法:

    ${ EL表达式(可完成取值、简单的判断、简单的运算等) }

  6. EL取值的四个域：

    1. pageScope
    2. requestScope
    3. sessionScope
    4. applicationScope

页面中错误提示的功能效果

img


JavaScript

  1. 背景：在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。Netscape在最初将其脚本语言命名为LiveScript，因为Netscape与Sun合作，网景公司管理层希望它外观看起来像Java，因此取名为JavaScript。

  2. 特性：

    1. 脚本语言。JavaScript是一种解释型的脚本语言,C、C++、Java等语言先编译后执行, 而JavaScript是在程序的运行过程中逐行进行解释。

    2. 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

    3. 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言。（JS是弱类型，Java是强类型）

      弱类型：类型可变

      强类型：定义变量的时候，类型已确定，而且不可变

    4. 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。

    5. 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

  3. JavaScript和html代码的结合方式

    1. 只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码

    2. 使用script标签引入单独的JavaScript代码文件（使用src属性来引入js文件路径）

      <script type="text/javascript" src="fileName.js"></script>

      注意：script标签虽然可以用来定义js代码，也可以用来引入js文件，但是这两个功能只能二选一使用，不能同时使用两个功能。

  4. JavaScript变量

    • JavaScript的变量类型

      • 数值类型：number
      • 字符串类型：string
      • 对象类型：object
      • 布尔类型：boolean
      • 函数类型：function

    • JavaScript中特殊的值：

      • undefined：未定义，所有的js变量未赋予初始值时，默认值都是undefined
      • null：空值
      • NAN：全称是“not a number”。非数字，非数值。

    • js中定义变量的格式：

      var 变量名;
var 变量名 = 值;

  5. JavaScript中的函数

    • 函数的定义方式

      1. 使用function关键字来定义函数

        function 函数名(形参列表){
	函数体
    //如果要返回值，则直接return
}
//函数要调用才会执行

      2. 函数的第二种定义方式

        var 函数名 = function(形参列表){函数体}

    • 在Java中的函数允许重载，但是在JS中函数的重载会直接覆盖掉上一次的定义。

  6. JavaScript中的事件

    • 什么是事件：事件是电脑输入设备与页面进行交互的响应。

    • 常用的事件：

      • onload：加载完成事件。页面加载完成之后，常用于做页面js代码初始化操作。
      • onclick：单击事件。常用于按钮的点击响应操作。
      • onblur：失去焦点事件。常用于输入框失去焦点后验证其输入内容是否合法。
      • onchange：内容发生改变事件。常用于下拉列表和输入框内容发生改变后操作。
      • onsubmit：表单提交事件。常用于表单提交之前，验证所有表单项是否合法。

    • 事件的注册=静态注册+动态注册

      • 什么是事件的注册（绑定）？

        就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册/事件绑定。

      • 静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码。

      • 动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋予响应后的代码。

  7. BOM

    • BOM就是浏览器对象模型(Borwser Object Model)
    • 浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
    • 常用的对象（window的子对象）：document、history、location、screen、navigator、frames

  8. DOM

    • DOM就是文档对象模型（Document Object Model）

    • document对象: window对象的一个属性，代表当前HTML文档，包含了整个文档的树形结构。获取document对象的本质方法是：window.document，其中“window.”可以省略。

    • DOM树

      ​ img

    • 元素查询

      功能 API 返回值
      根据id值查询 document.getElementById(“id值”) 一个具体的元素节点
      根据标签名查询 document.getElementsByTagName(“标签名”) 元素节点数组
      根据name属性值查询 document.getElementsByName(“name值”) 元素节点数组


注册功能实现——异步表单校验

Ajax

  1. AJAX 是 Asynchronous JavaScript And XML 的简称。直译为异步的JS和XML。
  2. AJAX的实际意义是，不发生页面跳转、异步载入内容并改写页面内容的技术。
  3. AJAX也可以简单的理解为通过JS向服务器发送请求。

异步处理

  1. 同步处理

    AJAX出现之前，我们访问互联网时一般都是同步请求，也就是当我们通过一个页面向服务器发送一个请求时，在服务器响应结束之前，我们的整个页面是不能操作的，也就是直观上来看他是卡主不动的。
    这就带来了非常糟糕的用户体验。首先，同步请求时，用户只能等待服务器的响应，而不能做任何操作。其次，如果请求时间过长可能会给用户一个卡死的感觉。最后，同步请求的最大缺点就是即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。

  2. 异步处理

    ​ 异步处理指的是我们在浏览网页的同时，通过AJAX向服务器发送请求，发送请求的过程中我们浏览网页的行为并不会收到任何影响，甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。
    使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先，发送请求时不会影响到用户的正常访问。其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。


异步请求对象

  • XMLHttpRequest对象是AJAX中非常重要的对象，所有的AJAX操作都是基于该对象的。

  • XMLHttpRequest对象用来封装请求报文，我们向服务器发送的请求信息全部都需要封装到该对象中。

    XMLHttpRequest对象并没有成为标准，但是现在的主流浏览器都支持该对象，而一些如IE6的老版本浏览器中的创建方式有一些区别，但是问题不大。

  • XMLHttpRequest对象的获取

    <script type="text/javascript">
    //获取XMLHttpRequest的通用方法
    function getXMLHttpRequest(){
        var xhr;
        try{
            //大部分浏览器都支持
            xhr = new XMLHttpRequest();
        }catch(e){
            try{
                //如果不支持。在这里捕获异常并采用IE6支持的方式
                xhr = new ActiveXObject("Msxm12.XMLHTTP");
            }catch(e){
                //如果还不支持，在这里捕获异常并采用IE5支持的方式
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        return xhr;
    }
</script>

  • XMLHttpRequest对象的方法

    1. open(method,url,async)：用于设置请求的基本信息，接收三个参数。
      1. method
        请求的方法（get或post），接收一个字符串
      2. url
        请求的地址，接收一个字符串
      3. Assync
        发送的请求是否为异步请求，接收一个布尔值。
        • true 是异步请求
        • false 不是异步请求（同步请求）
    2. send(string)：用于将请求发送给服务器，可以接收一个参数
      1. string参数
        该参数只在发送post请求时需要。
        string参数用于设置请求体
    3. setRequestHeader(header,value)：用于设置请求头
      1. header参数
        字符串类型，要设置的请求头的名字
      2. value参数
        字符串类型，要设置的请求头的值

  • XMLHttpRequest对象的属性

    1. readyState：描述XMLHttpRequest的状态，共有5种值，分别对应xhr不同的阶段。（每次 readyState 值变化时，都会触发 xhr.onreadystatechange 事件）

      值 状态 描述
      0 UNSENT (初始状态，未打开) 此时 xhr 对象被成功构造， open() 方法还未被调用
      1 OPENED (已打开，未发送) open() 方法已被成功调用，send() 方法还未被调用。注意：只有 xhr 处于 OPENED 状态，才能调用 xhr.setRequestHeader()和 xhr.send() ,否则会报错
      2 HEADERS_RECEIVED(已获取响应头) send() 方法已经被调用, 响应头和响应状态已经返回
      3 LOADING (正在下载响应体) 响应体( response entity body )正在下载中，此状态下 xhr.response 可能已经有了响应数据
      4 DONE (整个数据传输过程结束) 整个数据传输过程结束，不管本次请求是成功还是失败

    2. status和statusText

      • status属性表示HTTP响应状态码，比如：200响应成功、404页面未找到、500服务器内部错误……

      • statusText属性表示HTTP响应状态的描述文本，比如：OK、Not Found……

        注意：在 xhr.onload 事件中，不能简单的判断 xhr.status === 200，因为 20x、304等 HTTP 状态码也被认为是请求成功。参考以下代码：

        xhr.onload = function () {
//如果请求成功
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
 //do successCallback
}
}

    3. onreadystatechange：该属性需要指向一个函数，该函数会在readyState属性发生改变时被调用。

    4. responseText：获得字符串形式的响应数据。

    5. responseXML（用的比较少）：获得 XML 形式的响应数据。

    例子：

    //发送异步请求 GET
//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("get","AjaxServllet?&t="+Math.random(),true);
//发送请求
xhr.send();
//监听请求状态
xhr.onreadystatechange = function(){
    //当响应完成
    if(xhr.readystate == 4){
        //且状态码为200时
        if(xhr.status == 200){
            //接收响应信息(文本形式)
            var text = xhr.responseText;
            //弹出消息
            alert(text);
        }
    }
}

    //发送异步请求 POST
//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("post","2.jsp", true);
//设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送请求
xhr,send("he11o=123456");
//监听请求状态
xhr.onreadystatechange = function(){
    //当响应完成
    if(xhr.readyState == 4){
        //且状态码为200时
        if(xhr.status == 200){
            //接收响应信息(文本形式)
            var text = xhr.responseText;
            //弹出消息
            alert(text);
        }
    }
}

JQuery

  • JQuery是当前比较主流的 JavaScript 库，封装了很多预定义的对象和实现函数，帮助使用者建立有高难度交互的页面，并且兼容大部分主流的浏览器。
    JQuery对同样提供了对Ajax的支持，可以更加方便快速的进行Ajax的开发，相关的方法有$.get 、$.post 、$.ajax等.
    JQuery的对象的本质就是dom对象的数组/集合。

  • JQuery的使用

    需要下载一个 jquery 第三方并引入页面,使用 npm 下载

    npm install jquery

    直接使用 cdn 地址

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    引入页面以后直接使用就可以了

  • JQuery对象与dom对象的相互转换

    • JS转JQuery

      var jObj = $(dObj);

    • JQuery转JS

      var dObj = jObj[0]
//或者
var dObj = jObj.get(0)

  • jQuery方法

    1. jQuery.get(url, [data], [callback]. [type])
      • 返回值:XMLHttpRequest
      • 概述：通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂$.ajax ，请求成功时可调用回调色数。如果需要在出错时执行色数，请使用$.ajax。
      • 参数：String url, Map [data], Function [callback], String [type]
        • String url:待载入页面的URL地址
        • Map [data]:待发送 Key/value 参数
        • Function [callback]:载入成功时回调函数
        • String [type]:返回内容格式,xml, html, script, json, text, _defaut
    2. jQuery.post(url, [data], [callback], [type])
      • 返回值：XMLHttpRequest
      • 概述：通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂 $.ajax ，请求成功时可调用回调函数。如果需要在出错时执行因数，请使用$.ajax。
      • 参数：String url, Map [data], Function [callback], String [type]
        • String url:发送请求地址。
        • Map [data]:待发送 Key/value 参数
        • Function [callback]:发送成功功时回调函数
        • String [type]:返回内容格式 ,xml, html, script, json, text, _default
    3. jQuery.ajax(url, settings)
      • 返回值：XMLHttpRequest
      • 参数
        • url：一个用来包含发送请求的URL字符串。
        • seltings：AJAX 请求设置，所有选项都是可选的。，详见jQuery手册。
      • 大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$.ajax()可以不带任何参数直接使用。

  • 使用JQuery框架来发送异步请求示例

    //对用户名称进行异步的校验
$(function(){
    $("#username").blur(fuction(){
    	var value = $(this).val();
    	alert(value);
    	$.ajax({
        	url:"checkUsername",
        	type:"POST",
        	data:"username="+value,
        	success:function(data){
            	$("#username_msg").html(data);
        	}
    	});
    });
});


登录功能实现——登录成功跳转主页面

HTTP

参考：https://zhuanlan.zhihu.com/p/45173862


  • HTTP是无状态协议，服务器不能记录浏览器的访问状态，也就是说服务器不能区分中两次请求是否由一个客户端发出。这样的设计严重阻碍的Web程序的设计。如：在我们进行网购时，买了一条裤子，又买了一个手机。由于http协议是无状态的，如果不通过其他手段，服务器是不能知道用户到底买了什么。而Cookie就是解决方案之一。

  • Cookie实际上就是服务器保存在浏览器上的一段信息。浏览器有了Cookie之后，每次向服务器发送请求时都会同时将该信息发送给服务器，服务器收到请求后，就可以根据该信息处理请求。

  • Cookie的用途:

    1. 会话管理：当用户访问一个网站时，Cookie可以用来跟踪用户的会话状态。通过存储会话ID等信息，网站可以识别用户，并在用户浏览不同页面时保持用户的登录状态，使用户无需每次都重新输入登录凭证。
    2. 用户个性化体验：Cookie可以记录用户的偏好和设置，以提供个性化的体验。例如，网站可以记住用户的语言选择、字体大小偏好、购物车中的商品等，使用户在不同访问时能够享受一致的个性化服务。
    3. 浏览行为追踪：Cookie可以追踪用户在网站上的行为和交互，包括浏览历史、点击链接、填写表单等。这些数据可以帮助网站分析用户的兴趣和行为模式，从而优化网站内容、推荐相关产品或服务，并进行市场营销定向投放。
    4. 广告定向投放：Cookie在广告业务中扮演着重要角色。广告商可以利用Cookie收集用户的浏览行为数据，分析用户的兴趣和偏好，然后根据这些信息投放相关的广告。这样可以提高广告的针对性和效果。
    5. 网站流量分析：网站管理员可以使用Cookie来分析网站的访问量、流量来源、页面停留时间等数据。这些数据可以帮助管理员了解网站的受欢迎程度、改进网站设计和内容，以及评估市场营销策略的效果。

  • Cookie的限制性

    • Cookie作为请求或响应报文发送，无形中增加了网络流量。
    • Cookie是明文传送的安全性差。
    • 各个浏览器对Cookie有限制，使用上有局限

  • Cookie的具体使用

    1. 创建cookie

      Cookie myCookie = new Cookie("username","Zhangsanfeng");
myCookie.setPath("设置cookie的路径");
response.addCookie(myCookie);

    2. 读取cookie

      Cookie[] cookies = request.getCookies();

Session会话

  • 使用Cookie有一个非常大的局限，就是如果Cookie很多，则无形的增加了客户端与服务端的数据传输量。而且由于浏览器对Cookie数量的限制，注定我们不能在Cookie中保存过多的信息，于是Session出现。

  • Session的作用就是在服务器端保存一些用户的数据，然后传递给用户一个名字为JSESSIONID的Cookie，这个JESSIONID对应这个服务器中的一个Session对象，通过它就可以获取到保存用户信息的Session。

  • Session的工作原理

    1. Session的创建时机是在request.getSession()方法第一次被调用时。
    2. Session被创建后，同时还会有一个名为JSESSIONID的Cookie被创建。
    3. 这个Cookie的默认时效就是当前会话。
    4. 简单来说，Session机制也是依赖于Cookie来实现的。

  • Session的具体使用

    HttpSession session = request.getSession();

  • Session的时效问题

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

    <session-config>
    <session-timeout>30</session-timeout>
</session-config>

URL重写

  1. 整个会话控制技术体系中，保持JSESSIONID的值主要通过Cookie实现。但Cookie在浏览器端可能会被禁用，所以我们还需要一些备用的技术手段，例如：URL重写。

  2. URL重写其实就是将JSESSIONID的值以固定格式附着在URL地址后面，以实现保持JSESSIONID，进而保持会话状态。这个固定格式是：URL;jsessionid=xxxxxxxxx

  3. 实现方式

    String url = "targetServlet";
String encodeURL = response.encodeURL(ur1);
response.sendRedirect(encodeURL) ;

具体功能展示

img

JSTL标签

参考：https://www.runoob.com/jsp/jsp-jstl.html



主页面访问权限控制

过滤器

  • 对于WEB应用来说，过滤器是一个驻留在服务器中的WEB组件，他可以截取客户端和WEB资源之间的请求和响应信息。WEB资源可能包括Servlet、JSP、HTML页面等。

  • 当服务器收到特定的请求后，会先将请求交给过滤器，程序员可以在过滤器中对请求信息进行读取修改等操作，然后将请求信息再发送给目标资源。目标资源作出响应后，服务器会再次将响应转交给过滤器，在过滤器中同样可以对响应信息做一些操作，然后再将响应发送给服务器。

  • 也就是说过滤器可以在WEB资源收到请求之前，浏览器收到响应之前，对请求和响应信息做一些相应的操作。

  • 在一个WEB应用中可以部署多个过滤器，多个过滤器就组成了一个过滤器链，请求和响应必须在经过多个过滤器后才能到达目标。

    img

  • 过滤器的使用

    1. 通过实现Filter接口完成过滤器的开发

      public class LoginFilter implements Filter{
    @Override
    public void destroy(){
        
    }
    @Override
    public void doFilter(ServletRequest arg0, ServletResponse agr1, FilterChain arg2) throws IOException, ServletException{
        
    }
	@Override
	public void init(FilterConfig arg0) throws ServlrtException{
        
    }
}

    2. Filter在web.xml中的配置

      <filter>
    <filter-name>loginFilter</filter-name>
    <filter-class>com.atguigu.ajax.servlet.LoginFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>loginFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

  • 主页面访问权限控制要求

    1. 在进入主页面必须进行登录状态的判断，如果未登录状态不允许进入主界面。
    2. 登录状态的判断在过滤器中实现，更为通用，而且可拔插。


在线人数统计

监听器(Listener)

  • Listener用于监听JavaWeb程序中的事件。例如：ServletContext、HttpSession、ServletRequest的创建、修改和删除。

  • 监听器可以监听就是在 application，session，request 三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件。request和session在上文已经有介绍过了， application 则是ServletContext类型的对象。ServletContext代表整个web应用，在服务器启动的时候，tomcat会自动创建该对象。在服务器关闭时会自动销毁该对象。

  • 监听容器产生的事件分类：

    1. 生命周期相关的事件。比如，对象的创建或者销毁等。
    2. 属性状态相关的事件。比如，属性的增删改。
    3. 存值状态相关的事件。比如，对象和session的绑定和解绑。

  • Listener底层原理是采用接口回调的方式实现。

  • 根据监听器类别分类：

    监听器类别 监听器类型 监听事件类型 监听器方法
    ServletContext ServletContextListener ServletContext创建和销毁事件 contextInitialized(ServletContextEvent)
    contextDestroyed(ServletContextEvent)
    ServletContextAttributeListener ServletContext中属性的添加、删除和修改事件 attributeAdded(ServletContextAttributeEvent)
    attributeRemoved(ServletContextAttributeEvent)
    attributeReplaced(ServletContextAttributeEvent)
    Session HttpSessionListener HttpSession创建和销毁事件 sessionCreated(HttpSessionEvent)
    sessionDestroyed(HttpSessionEvent)
    HttpSessionAttributeListener HttpSession中属性的添加、删除和修改事件 attributeAdded(HttpSessionBindingEvent)
    attributeRemoved(HttpSessionBindingEvent)
    attributeReplaced(HttpSessionBindingEvent)
    HttpSessionBindingListener 实现了HttpSessionBindingListener接口的对象在HttpSession中被绑定或解绑的事件 valueBound(HttpSessionBindingEvent)
    valueUnbound(HttpSessionBindingEvent)
    HttpSessionActivationListener 实现了HttpSessionActivationListener接口的对象在HttpSession中被活化或钝化的事件 sessionWillPassivate(HttpSessionEvent)
    sessionDidActivate(HttpSessionEvent)
    Request ServletRequestListener ServletRequest创建和销毁事件 requestInitialized(ServletRequestEvent)
    requestDestroyed(ServletRequestEvent)
    ServletRequestAttributeListener ServletRequest中属性的添加、删除和修改事件 attributeAdded(ServletRequestAttributeEvent)
    attributeRemoved(ServletRequestAttributeEvent)
    attributeReplaced(ServletRequestAttributeEvent)

  • 示例：

    自定义ServletRequestListener监听器：MyListener.java

    public class MyListener implements ServletRequestListener {
    @Override
    public void requestDestroyed(ServletRequestEvent servletRequestEvent) {
        System.out.println("销毁请求...");
    }

    @Override
    public void requestInitialized(ServletRequestEvent servletRequestEvent) {
        System.out.println("创建请求...");
    }
}

    web.xml配置监听器

    <?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">
  
  	<listener>
        <listener-class>com.example.MyListener</listener-class>
    </listener>
</web-app>

  • 在线人数统计功能展示

    img



xml

简介

  • XML–可扩展标记语言eXtensible Markup Language
  • 由W3C组织发布，目前推荐遵守的是W3C组织于2000年发布的XML1.0规范
  • XML的使命，就是以一个统一的格式，组织有关系的数据，为不同平台下的应用程序服务
  • XML用来传输和存储数据，HTML用来显示数据
  • XML没有预定义标签，均为自定义标签（可以通过编写XML Schema文档或DTD文档来自定义标签的名称和含义）

xml用途

  1. 配置文件。比如，JavaWeb中的web.xml，C3P0中的c3p0-config.xml
  2. 数据交换格式。比如，ajax，WebService
  3. 数据存储。比如，保存关系型数据

xml基本语法

  1. xml文档组成

    1. xml声明

      version属性指定XML版本，固定值是1.0
      encoding指定的字符集，是告诉解析器使用什么字符集进行解码，而编码是由文本 编辑器决定的

    2. CDATA区

      当XML文档中需要写一些程序代码、SQL语句或其他不希望XML解析器进行解析 的内容时，就可以写在CDATA区中
      XML解析器会将CDATA区中的内容原封不动的输出
      CDATA区的定义格式：<![CDATA[…]]>

    img

  2. 语法规则

    1. XML声明要么不写，要写就写在第一行，并且前面没有任何其他字符
    2. 只能有一个根标签
    3. 标签必须正确结束
    4. 标签不能交叉嵌
    5. 严格区分大小写
    6. 属性必须有值，且必须加引号
    7. 标签不能以数字开头
    8. 注释不能嵌套

xml解析

  1. XML解析是指通过解析器读取XML文档，解释语法，并将文档转化成对象

  2. 常用的解析方式:
    DOM（Document Object Model）

    SAX（Simple API for XML）

  3. DOM和SAX解析的对比

    DOM SAX
    速度 需要一次性加载整个XML文档，然后将文档转换为DOM树，速度较差 顺序解析XML文档，无需将整个XML都加载到内存中，速度快
    重复访问 将XML转换为DOM树之后，在解析时，DOM树将常驻内存，可以重复访问。 顺序解析XML文档，已解析过的数据，如果没有保存，将不能获得，除非重新解析。
    内存要求 内存占用较大 内存占用率低
    修改 既可读取文档内容，又可以修改 只能读取，不能修改
    复杂度 完全面向对象的解析方式，容易使用 采用事件回调机制，通过事件的回调函数来解析XML文档，略复杂

  4. Dom4j解析实例

    //1.创建解析器对象
SAXReader saxReader = new SAXReader();
//2.解析xml文件获取document对象
Document document = saxReader.read("path/to/your/xml/file.xml");
//3.得到根元素
Element root = document.getRootElement();


JSON

什么是JSON

  • JSON是JavaScript对象表示法（JavaScript Object Notation）

  • JSON 是存储和交换文本信息的语法，类似XML。

  • JSON采用完全独立于任何程序语言的文本格式，使JSON成为理想的数据交换语言S

  • JSON对象例子：{“name”:”sunwukong” , ”age”:18 , ”address”:”beijing” }，这个对象中有三个属性name、age和address

JSON和XML的对比

  • JSON比XML更小、更快、更易解析

    • javaScript原生支持JSON，解析速度会很快

    • XML解析成DOM对象的时候，浏览器【IE和fireFox】会有差异

    • 使用JSON会更简单

      img

  • 更加容易创建JavaScript对象

    var p = {'city':['北京','上海','广州','深圳']};
for(var i=0;i<p.city.length;i++){
	document.write(p.city[i]+"<br/>");
}

JSON数据类型

  • 字符串
    • 例子：“字符串”
    • 注意：不能使用单引号
  • 数字
  • 布尔值
  • null值

客户端与服务端的交互数据无非就是两种

  • 数组
  • 对象

JSON语法是javaScript语法的子集，javaScript用[]中括号来表示数组，用{}大括号来表示对象，JSON亦是如此

  • JSON数组

    var employees = [
	{ "firstName":"Bill" , "lastName":"Gates" },
	{ "firstName":"George" , "lastName":"Bush" },
	{ "firstName":"Thomas" , "lastName": "Carter" }
	];

  • JSON对象

    var obj = {

            age: 20,
            str: "zhongfucheng",
            method: function () {
                alert("我爱学习");
            }

        };

  • 数组可以包含对象，在对象中也可以包含数组

在JS中操作JSON

  1. 创建JSON对象

    var json = {“name1”:”value1”,”name2”:”value2” , “name3”:[1,”str”,true]};
var json = [{“name1”:”value1”},{“name2”:”value2”}];

  2. JSON对象转换成JSON字符串

    • JSON.stringify(JSON对象)

  3. JSON字符串转换为JSON对象

    • JSON.parse(JSON字符串)

  4. 使用eval()函数解析JSON（把JSON文本数据转换成一个JavaScript对象）

    function test() {
    //在写JOSN的时候，记得把带上逗号
    var txt = "{a:123," +
        "b:'zhongfucheng'}";

    //使用eval解析JSON字符串，需要增添()
    var aa = eval("(" + txt + ")");
    alert(aa);
}

    • 效果

      img

在Java中操作JSON

在Java中可以从文件中读取JSON字符串，也可以是客户端发送的JSON字符串，所以第一个问题，我们先来看如何将一个JSON字符串转换成一个Java对象。
首先解析JSON字符串我们需要导入第三方的工具，目前主流的解析JSON的工具大概有三种json-lib、jackson、gson。三种解析工具相比较json-lib的使用复杂，且效率较差。而Jackson和gson解析效率较高。使用简单，这里我们以gson为例讲解。

  • Gson是Google公司出品的解析JSON工具，使用简单，解析性能好。

  • Gson中解析JSON的核心是Gson的类，解析操作都是通过该类实例进行。

  • JSON字符串转换为Java对象

    String json = "{\"name\":\"张三\",\"age\":18}";
Gson gson = new Gson();
//转换为集合
Map<String,Object> stuMap = gson.fromJson(json, Map.class);
//如果编写了相应的类也可以转换为指定对象
Student fromJson = gson.fromJson(json, Student.class);

  • Java对象转换为JSON字符串

    //1、自定义类对象转化成json字符串
Student stu = new Student("李四", 23);
Gson gson = new Gson();
//{"name":"李四","age":23}
String json = gson.toJson(stu);
		
//2、Map类对象转化成json字符串
Map<String , Object> map = new HashMap<String, Object>();
map.put("name", "孙悟空");
map.put("age", 30);
//{"age":30,"name":"孙悟空"}
String json2 = gson.toJson(map);

//1、自定义类的List对象转化成json字符串
List<Student> list = new ArrayList<Student>();
list.add(new Student("八戒", 18));
list.add(new Student("沙僧", 28));
list.add(new Student("唐僧", 38));
//[{"name":"八戒","age":18},{"name":"沙僧","age":28},{"name":"唐僧","age":38}]
String json3 = gson.toJson(list);

// 如果将一个数组格式的json字符串转换成java对象需要用到
//Gson提供的一个匿名内部类： TypeToken
TypeToken tk= new TypeToken<List<User>>(){};
List<User> list2 = gson.fromJson(json,tk.getType());
System.out.println(list2.get(0));

JQuery异步请求返回JSON数据

  1. Servlet 返回json数据

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		List<Employee> emps = new EmployeeDaoJdbcImpl().getAllEmps();
		Gson gson = new Gson();
		String jsonStr = gson.toJson(emps);
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.println(jsonStr);
		out.close();
}

  2. 页面中处理json数据

    function getJsonStr(){
	//通过JQuery发送异步请求， 将所有的员工信息通过json的格式返回
     $.ajax({
        url:"getEmpsJsonStr",
        type:"post",
        dataType:"json",
        success:function(data){  // 会直接将后台返回的json字符串转换成js对象
            var str = "<tr><th>Id</th><th>LastName</th><th>Email</th><th>Gender</th></tr>";
            for(var i= 0 ;i <data.length;i++){
                var emp = data[i];
                str+="<tr align='center'><td>"
                     +emp.id+
                     "</td><td>"
                     +emp.lastName+
                     "</td><td>"
                     +emp.email+
                     "</td><td>"
                     +emp.gender+
                     "</td></tr>"	
            }	
            $("#tb").html(str);
        }
     });
}

    <body>
	<input type="button" value="getJsonStr" onclick="getJsonStr();"/>
	<table id="tb" border="1px"  align="center" width="60%" cellspacing="0px" >	
	</table>
</body>


参考资料：https://blog.csdn.net/qq_41911570/article/details/83279327

​ https://blog.csdn.net/qq_60735796/article/details/129918553

​ https://blog.csdn.net/u012660464/article/details/109691782

​ https://blog.csdn.net/huang100qi/article/details/104125906

​ https://zhuanlan.zhihu.com/p/614537698

​ https://blog.csdn.net/m0_45899013/article/details/106928429

​ https://zhuanlan.zhihu.com/p/33792109

posted @ 2023-11-01 15:06  Enid_Lin  阅读(103)  评论(0)  编辑  收藏  举报