JavaWeb 总结

最新推荐文章于 2022-09-15 22:32:19 发布

马本不想再等了

最新推荐文章于 2022-09-15 22:32:19 发布

阅读量645

点赞数 2

文章标签： java web tomcat dom

本文链接：https://blog.csdn.net/qq_42180284/article/details/103944622

版权

文章目录

一、JavaWeb 的技术体系

在这里插入图片描述

Javaweb负责使用Java语言，开发服务器端程序的技术。

Javaweb开发的程序，一般都采用B/S架构。

浏览器端：

html: 负责构建静态页面。特点由标签组成，需要什么功能就使用什么标签。

css : 负责页面样式。

javascript：负责将静态页面变为动态页面，负责和用户进行交互。

jquery: js框架，简化js代码的开发。

ajax : 发送异步请求，局部刷新页面

服务器端：

Servlet: 服务器的小程序，最核心组件，负责处理请求，响应页面
Filter: 服务器的程序，负责拦截请求，过滤后，放行请求。
Listener: 服务器的程序，监听服务器的行为，触发指定的动作。

页面显示技术：JSP(java server page) + EL + JSTL

会话控制：

浏览器访问服务器，采用HTTP协议，这个协议无状态。
cookie: 保存在浏览器端
session: 服务端

二、HTML

基本结构

	<!DOCTYPE html>
	<html>
		<head  属性名=属性值>     // 开始标签
			声明属性信息，或其他额外信息   //标签体（标签的内容）
		</head>   // 结束标签
		<body>
			页面的主体
		</body>
	</html>

如果不需要声明标签体，可以使用自结束标签

常用标签

		<h1>-<h6>: 加粗显示字体（强调）
		<p>: 用于显示一段文字
		<span>:  用于将一部分内容组合为一个整体
		<table>: 声明表格
		<tr>:  声明一行
		<th>:  加粗声明一个单元格
		<td>:  声明一个单元格
		<br>:  换行
		<hr>:  分割线
		<a> :  超链接标签，点击后向指定目标发送请求
		<form>:  表单标签，用于提交关键的信息
		<input name="" value=""  type="">： 输入框
				name：是发送时的属性名
				value:是发送的属性值，一般是接受用户的输入
				type：是输入框的类型
					默认为text;
					password： 隐去输入的内容
					submit: 提交按钮
					radio :  单选框
		<select>: 下拉框
		<option>:  下拉框的每个下拉选项

实例代码：

<!DOCTYPE html>
<html>
	<head>
		<title>first html</title>
	
	</head>
	<body>
			<h1>hello</h1>
			<h2>hello</h2>
			<h3>hello</h3>
			<h4>hello</h4>
			<h5>hello</h5>
			<!--分割线-->
			<hr/>
			<!--显示一段内容-->
			<p>hello , hi ,nice to meet you </p>
			<hr/>
			<!--将一段内容组成一个整体-->
			<span>hello , hi ,nice to meet you </span>
			<!--表格-->
			<hr/>
			<table border="1" align="center">
				<!--第一行-->
				<tr>
					<!--标题列，加粗显示效果-->
					<th>姓名</th>
					<th>年龄</th>
				</tr>
				<tr>
					<td>tom</td>
					<td>18</td>
				</tr>
				<tr>
					<td>jack</td>
					<td>19</td>
				</tr>
			</table>
			<!--表单-->
			<hr/>
			<form>
				<!--输入框
					name: 用于输入的值的属性名
					value： 可以默认显示一个值或接收用户输入的值
					type(text):  输入框的类型
					表单中所有的信息在提交时都会以 name=value提交给指定的url	
				-->
				<input name="username"  /><br/>
				<input name="password" value="123456" type="password" /><br/>
				<input name="sex"  value="1" type="radio"/> 男
				<input name="sex"  value="0" type="radio"/> 女				<br/>
				<!--下拉框-->
				<select name="hobby">
					<option value="basketball" label="篮球">
					<option value="sing" label="唱">
					<option value="dance" label="跳">
					<option value="rap" label="喷">
				</select><br/>
				<input  value="提交按钮" type="submit" />
			</form>		
	</body>
</html>

请求

交互：用户通过浏览器，输入url，提交请求，服务器处理请求，返回响应结果的过程
每个请求都通过一个url来体现
http: //localhost:8080/0508_Day01/xxx

如果xxx是项目中的某个资源

静态资源： html,css,图片，视频，文件 xxx写资源的路径

动态资源： jsp,java程序 xxx要么写jsp的路径名，要么写请求的标识符（随便写）

http: //localhost:8080/0508_Day01/login 这里的 login 就是请求的标识符

url路径的表达：

相对路径：不以 / 开头的路径。相对路径是相对于当前页面的路径。

index.html 的绝对路径是： http: //localhost:8080/0508_Day01/index.html

在 index.html 中编写的 login 的路径是： http: //localhost:8080/0508_Day01/login

绝对路径：通常是以 / 开头的路径。

绝对路径在不同的端，解析时是不一样的。

绝对路径中的 / 在 **浏览器端 **解析，解析到 http: //localhost:8080 需要手动添加项目名

绝对路径中的 / 在 服务器端 解析，解析到 http: //localhost:8080/0508_Day01

请求方式：一共九种 GET | POST | HEAD | DELETE | UPDATE …

常用的是GET | POST

区别： GET请求在提交请求参数时，将参数附加在url的结尾。

POST请求将请求参数附加在请求体中，不会显示在url中。

报文格式：

HTTP协议（浏览器端和服务器端进行的约定），体现在报文上！

类型上分为请求报文和响应报文

格式：报文包括

报文首行（url,协议版本…）
报文头（以Key=value形式，存放属性信息）
只有post请求有报文体，get请求的报文体为空
报文体（请求参数）

查看报文：浏览器的F12

<h1>欢迎登录</h1>
		<!-- 
			表单的 action 属性，代表当前表达要提交的url地址
			表单的 method 属性，来设置请求方式
				只支持 get(默认), post
			在浏览器端，通常只需要确定请求方式，并写对请求的 url 就可以。
		 -->
		<form action="/0508_Day01/login" method="get">
			用户姓名： <input name="username" ><br>
			用户密码： <input name="password" type="password" ><br>
			<input value="提交" type="submit" >
		</form>

三、CSS

CSS 使用

①在标签头上，使用 style =""
②批量为标签设置样式，使用 css 语法
selector {属性名=属性值; xxx}
使用

<!DOCTYPE html>
<html>
	<head>
		<title>third html</title>
		<!--
		<style type="text/css">
		   /*
			  注释
		   */
			h1{color: red; font-size: 20px;}
		</style>-->
		<link rel="stylesheet" type="text/css" href="mystyle.css" />
	</head>
	<body>
			<!-- 在标签上使用style属性，指定样式-->
			<h1 style="color:red">hello</h1>
			<h1>hi</h1>
			<h1>nice</h1>
			<h1 class="cls1">to</h1>
			<h1>meet</h1>
			<span class="cls1">你好 </span><br>
			<span id="span01">你好1 </span><br>
			<span class="cls2">你好2</span><br>
			<span id="span02">你好3 </span><br>
			
	</body>
</html>

CSS 选择器

元素（标签）选择器：标签名，所有匹配到的标签，都会被选中
id选择器： #id，匹配指定id的标签（最精确）
类选择器： .类名，匹配指定class属性值的标签
组合选择器：选择器1，选择器2，… {属性名=属性值; xxx}

span{color: green; font-size: 20px;} /*元素选择器*/
#span02{color: red; font-size: 20px;} /*id选择器*/
.cls2{color: green; font-size:20px;} /*类名选择器*/
#span01,.cls1{color: orange; font-size: 20px;} /*组合选择器*/

四、Web 服务器与 Tomcat

服务器介绍

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

请求：浏览器（客户端）向服务器发送信息

响应：服务器向（客户端）浏览器返回信息

一个 JavaWeb 程序需要有 Servlet 容器，容器的主要作用就是调用java程序处理用户发送的请求

常见的Web服务器：

Tomcat（Apache）：当前应用最广的JavaWeb服务器；

JBoss（Redhat红帽）：支持JavaEE，应用比较广EJB容器；

Resin（Caucho）：支持JavaEE，应用越来越广；

Weblogic（Orcale）：要钱的！支持JavaEE，适合大型项目；

Websphere（IBM）：要钱的！支持JavaEE，适合大型项目。–> SSH轻量级的框架代替

Tomcat 介绍

Tomcat是一个服务器软件，由java代码编写，运行必须有 JAVA_HOME 环境变量。

Tomcat的目录结构：

bin：常用的工具目录和脚本文件

conf：配置文件目录

lib：存放 Tomcat 服务器的 jar 包

logs：存放 Tomcat 服务的日志文件

temps：存放 Tomcat 的临时文件

webapps: 放已经打好的 war（web工程）包

work：Tomcat 工作目录

启动：在 Tomcat 安装目录下的bin目录，双击 startup.bat
停止：在 Tomcat 安装目录下的bin目录，双击 shutdown.bat

启动 Tomcat后，访问 http: //localhost:8080 后，看到如下页面即 tomcat 启动成功：

在这里插入图片描述

在 eclipse 中配置 Tomcat

在 Eclipse 中配置运行环境

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AN85OClK-1578803458504)(C:\Users\maben\AppData\Roaming\Typora\typora-user-images\1561533690102.png)]$

Window----show view----Server:在Eclipse中创建新的Server

在这里插入图片描述

配置Tomcat的工程部署目录：

在这里插入图片描述

创建动态的web工程

注意：

Target runtime选择自己配置的Tomcat服务器版本；

在这里插入图片描述
Dynamic web module version选择2.5版本；

在这里插入图片描述

五、Servlet

Servlet 意为服务端的小程序，是sun公司制定的一个标准。具体由服务器厂商实现。
Servlet 的实例由 tomcat 自动创建，其中的方法也由 tomcat 自动调用
Servlet 是单例多线程，注意线程安全问题。

Servlet 的生命周期

接受第一个请求时，创建 Servlet 对象 ——> init() ——> service(N次) ——> destroy()

Servlet 是单例的

Servlet 类的相关方法

第一种：实现 Serlvet 接口，重写 Service 方法，其中 ServletRequest 代表请求报文，ServletResponse 代表响应报文

public class LoginServlet implements Servlet{
	// 初始化
    @Override
	public void init(ServletConfig arg0) throws ServletException {
	}
    
	
	// 处理请求
	@Override
	public void service(ServletRequest arg0, ServletResponse arg1) throws ServletException, IOException {
	}
    
    @Override
	public ServletConfig getServletConfig() {
		return null;
	}
	@Override
	public String getServletInfo() {
		return null;
	}
    // 销毁
    @Override
	public void destroy() {
	}
}

第二种：原生的 Servlet 接口中，有很多我们不需要使用的方法，因此我们通产使用 Servlet 继承 HttpServlet抽象类，重写doGet () 和 doPost () 方法

public class LoginServlet extends HttpServlet{
	//处理get请求
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	}
	//处理post请求
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
	}
}

doGet Servlet 中用于处理get请求的方法

doPost Servlet 中用于处理post请求的方法

doGet、doPost方法的重要参数：

HttpServletRequest：代表请求报文对象

  				**HttpServletResponse**：代表响应报文对象

接收请求

哪些 Servlet 可以处理哪些请求，需要在工程的 web.xml 中配置！

<servlet>
  		<servlet-name>LoginServlet</servlet-name>
  		<servlet-class>com.atguigu.web.servlet.LoginServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
  		<servlet-name>LoginServlet</servlet-name>
  		<url-pattern>/login</url-pattern>
  </servlet-mapping>

三个属性：

: Servlet 的全类名，服务器使用全类名来创建 Servlet 的实例。

:Servlet 的别名

: Servlet 可以处理的请求

处理请求：HttpServletRequest 类

HttpServletRequest 类的对象代表浏览器发送给服务器的请求报文

Servlet 继承了 HttpServlet 抽象类，要处理哪些请求，只需要重写哪些方法即可。

HttpServletRequest 的常用方法：

String getParameter(String paramName)：获取指定请求参数的值；

String getMethod()：获取请求方法，例如 GET 或 POST；

String getHeader(String name)：获取指定请求头的值；

String getContextPath()：获取项目名

String getRequestURI()：返回从协议(http、https)到查询字符串的此请求 URL 的部分

void setCharacterEncoding(String encoding)：设置请求体的编码

完成响应：HttpServletResponse 类

HttpServletResponse 类的对象代表服务器发送给浏览器的响应报文

常用方法：

PrintWriter getWriter()：获取一个字符响应流对象，该对象可以调用 writer() 方法向浏览器写入响应结果。

void sendRedirect(String location)：在响应报文中添加一个重定向的 URL。

其他方法：

void addCookie(Cookie cookie)：在响应报文中添加一个 Cookie 对象。

void setCharacterEncoding(String encoding)：用来设置字符响应流的编码。

void setContentType(String contentType)：该方法是setHeader(“content-type”, “xxx”)的简便方法。

[^setContentType ( String contentType )]: 例如 setContentType (“text/html;chartset=utf-8”) 表示响应数据类型为文本类型中的html 类型，并且该方法会调用 setCharacterEncoding(“utf-8”) 方法。

void setHeader(String name, String value)：向客户端添加响应头信息。

代码示例：

public class LoginServlet extends HttpServlet {
	private UserDao userDao;
	public LoginServlet() {
		userDao = new UserDaoImpl();
	}
    //处理get请求
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
    }
	//处理post请求
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //使用 HttpServletRequest req 接收请求参数
        // .getParameter()方法获取参数
        String username = req.getParameter("username"); 
        String password = req.getParameter("password");
        PrintWriter writer = resp.getWriter();
        try {
            //使用连接数据库查询，账户信息，若存在将信息封装成User对象返回，若不存在返回null。
			User user = userDao.findUserByNameAndPassword(username, password);
			// 验证参数是否合法
			if (user==null) {
                  // 方式一：在浏览器打印信息
                  // writer.print("登陆失败！");
                
				// 方式二：让用户重新连接到登录页面，继续输入
				// 重新定向的url，也是由浏览器再次发送，由浏览器解析，需要加上项目名/0508_Day02/index.html
				//resp.sendRedirect("/0508_Day02/index2.html");
                
                  // 方式三：转发
				// 将一个请求，继续转交给另外一个servlet继续处理，称为转发
				// 转发是在服务器内部实现的，由服务器解析路径
				req.setAttribute("errorInfo", "用户名或密码错误！"); // 将错误信息放入请求域中。
				//  /0508_Day02/index.jsp
				req.getRequestDispatcher("/index.jsp").forward(req, resp);;
			} else {	
				writer.print(true);
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
}

六、乱码问题

请求乱码

GET请求乱码：

原因：get请求，参数是附加在url后，先被tomcat进行解析，tomcat默认使用的是ISO-8859-1编码。

解决：在tomcat的server.xml中的8080端口中添加URIEncoding="UTF-8"如下：

<Connector URIEncoding="UTF-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>

POST请求乱码：

原因：post请求的参数是在请求体中，请求体默认使用的是ISO-8859-1编码。

解决：在第一次获取请求参数前，设置：

request.setCharacterEncoding("utf-8");

响应乱码

服务器端响应的内容，在浏览器端接收到后，无法使用正确的字符集显示出来。

解决思路：在响应时，告诉浏览器，请使用一个正确的字符集来显示响应的内容。

获取字符流之前，设置响应报文的编码：

resp.setContentType("text/html;charset=UTF-8");

七、重定向

原理：用户一共发两次请求。

用户主动发第一次请求，服务端处理后，响应给浏览器302状态码。

浏览器收到302状态码，继续自动向响应头中的Location属性中的 url 再次发送请求。

浏览器继续处理，给出最终响应。

重定向的实现方法

response.sendRedirect("/day02/index.html");

注意：重新定向的 url 是由浏览器解析，需要加上项目名。

八、JSP ( Java Server Page )

JSP 的本质：

本质是一个Servlet程序，会执行Servlet中的service()方法，自动根据程序的运行结果相应不同的页面给浏览器。

浏览器 ——> xxx.jsp (Servlet) ——> service() ——> 向浏览器写回一个html页面

JSP 的标签类型：

① JSP 声明：<%@ xxxxx %> ，一般用来导包和声明页面的属性。

② JSP 脚本：<% java代码 %>

// 示例： 获取当前 JSP 页面所在项目的名称, path="/项目名"
<% request.setAttribute("path", request.getContentType()); %>

③ JSP 注释：<%-- 注释 --%>

④ JSP 表达式：<%= 变量 %> ，将这个变量的值输出到页面。

⑤ JSP 中可以编写 html 中的所有标签。

JSP 主要还是作为一种显示的技术，一般由 servlet 负责流程控制(业务逻辑) + JSP (页面显示)

在这里插入图片描述

JSP 原理

编写 xxx.jsp 页面时，页面被加载到 tomcat 之后，会生成一个 xxx_jsp.java 文件，

xxx_jsp.java 文件被编译为 xxx_jsp.class 文件，被虚拟机加载，执行 service() 方法。

查看tomcat的部署路径：

右键单击tomcat选择Browse Deployment Location 查看路径如下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-phXEiVYn-1578803458508)(C:\Users\maben\AppData\Roaming\Typora\typora-user-images\1561375395282.png)]$

jsp 文件被编译文件：以上的目录返回tmp0在进入work目录…，被编译的xxx_jsp.java文件在下面的目录中：

在这里插入图片描述

JSP 的内置对象和四大域对象

JSP 本质是一个 Servlet 类，在 xxx._jsp.class.java 文件_的 _jspService() 方法中，内置了九大对象。

常用的对象：

javax.servlet.http.HttpServletResponse response：响应对象

四大域（范围）对象：
javax.servlet.jsp.PageContext pageContext：当前页面对象

javax.servlet.http.HttpServletRequest request: 当前请求对象

javax.servlet.http.HttpSession session：当前会话对象

从浏览器打开后第一次访问day02项目开始，到关闭了浏览器这期间，称之为一次会话
javax.servlet.ServletContext application：当前项目对象

从项目被加载到tomcat起，到项目被tomcat销毁，这个对象一直存在！

注：pageContext 可以使用 pageContext.getxxx()方法，获取九大对象里的所有对象。

四大对象最主要的功能就是想它们的域(Map)中存放数据。
作用：

四大域对象，都有一个属性，是Map类型，这个Map也称为这个域对象的域。可以向这个域(Map)中存放数据，这些数据可以传递。

存放数据：域对象.setAttribute(String key, String value);

取出数据：域对象.getAttribute(String key);
作用域

从小到大： pageContext ——> request ——> session ——> application

保存数据的原则：能用小的，不用大的。一般使用 requset
建议：Servlet 负责逻辑控制；JSP 负责页面显示。

九、转发

转发的定义

转发指的是当前 Servlet 不去处理用户的请求，而是在服务器内部调用其他的资源替他处理请求。

转发的实现方法

HttpServletRequset.getRequestDispatcher("url").forward(requset, response);

转发的 url 被服务器解析，不需要加项目名。

转发的流程分析

在这里插入图片描述

转发的特点

发送一次请求，经过多个 Servlet 处理，最终由最后一个 Servlet 响应页面。

转发和重定向的区别

在这里插入图片描述

总结：

① 能用重定向就不用转发

② 当需要传递请求中的数据的时候，只能使用转发！

十、JS ( JavaScript )

JavaScript 的特点

JavaScript 是解释型的脚本语言，是在程序的运行过程中逐行进行解释。

面向对象、采用弱类型变量类型、采用事件驱动有很好的的动态性、由于多数浏览器的支持跨平台性很好。

JavaScript 的使用方法

① 在 head 标签中，或者在 body 标签中，使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
		// 数值型
		var num = 1;
</script>
<title>测试js</title>
</head>
<body>
		<h1>内容</h1>
</body>
</html>

② 将 js 代码写在一个独立的文件中，使用

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

JavaScript 的变量类型

五种数据类型

数值型：Number(int short long double float) 字符串类型：String

对象类型：object 布尔类型：Boolean

函数类型：function

三个特殊值

Null 空值

Undefined 未定义(所有变量为初始化的值都是undefined)

NaN Not a number 非数值

<script>
    var a = null; // Null
	var b; // underfined
	var c = str - num; // NaN
</script>

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
	//onload 事件，在整个文档全部加载完之后再会触发执行
	// window 是 js 中内置的一个对象，代表整个浏览器窗口
	window.onload = function(){
		alert("文档已经加载完成了！");
	}
		// 声明常用的五种数据类型
		var str = "hello";
		// 数值型
		var num = 1;
		// boolean
		var flag = true;
		// object,一个 js 对象使用{属性名：属性值,xxx}表示
		var person = {"name":"jack","age":18,"gender":"男"};
		// function
		// 方式①
		function  sayHello(name){
			// alert 弹出一个警告框查看name
			alert(name);
		}
		// 方式②，定义一个匿名函数
		var func=function(name){
			alert(name);
		}
		// 测试
		// 使用 typeof 可以查看变量的类型
		alert(typeof str);
		alert(typeof num);
		alert(typeof flag);
		alert(typeof person);
		alert(typeof func);
		// 调用函数
		sayHello("jack");
		func("tom");
</script>
<title>测试js</title>
</head>
<body>
		<h1>内容</h1>
</body>
</html>

JavaScript 的事件

浏览器自动监听某些行为，一旦行为发生，将触发一个事件。可以为事件绑定一个函数，在事件触发时执行该函数。

事件分为：用户事件和系统事件

常见的事件：

Onload：这是一个系统事件，指浏览器在内存中加载完页面内容后，会做一些初始化准备工作。

Onclick：单击事件，常用于按钮点击后的响应。

Onblur：常用于当输入框失去焦点后，可以验证输入框中的内容是否合法，或有效。

Onfocus：聚焦后触发。

Onchange：对比value属性是否不同，一旦不同，就触发事件。

为事件绑定事件：

1.原生的 dom 方式，document.getElementById(“id”).οnclick=funcion() {};

2.使用Jquery:

$("#id").click(functioni() {});

以上两种方法使用代码为事件绑定函数，这部分代码要卸载 onload() 函数中！

3.直接在 html 标签的属性上绑定函数：

BOM 和 DOM

BOM（Browser Object Model）浏览器对象模型，提前封装了若干对象，使用这些对象来描述整个浏览器。

常用的对象（window 的子对象）：document、history 、location 、screen、navigator 、frames

DOM（Document Object Model）文档对象模型，采用一个树形结构，描述浏览器加载的页面文档中所有标签。

获取document对象的方法是：window.document，而“window.”可以省略。document对象，就代表整个DOM。

注：window 是 js 中内置的一个对象，代表整个浏览器窗口。

DOM元素的查询

根据 id 值来查询：document.getElementById( "id值’’ ) 返回一个具体的元素节点

根据标签名查询：document.getElementsByTagName(“标签名”) 返回元素阶节点数组

根据 name 属性值查询：document.getElementsByName(“name值”) 返回元素节点数组

所有DOM对象都有一个 innerHTML 属性，它代表标签体中的内容。可以通过这个属性获取或设置标签中的内容！

document.getElementById("id"); 					//使用原生JS选取节点 返回 dom 对象
window.onload=function(){	} 					//使用原生JS为onload事件绑定函数
document.getElementById("id").innerHTML; 		//使用原生JS获取某个标签的内容innerHTML属性  
document.getElementById("id").innerHTML=xxx 	//使用原生JS设置某个标签的内容innerHTML属性 
document.getElementById("id").value		 	//使用原生JS获取某个标签的value值
document.getElementById("id").value=xxx; 	//使用原生JS设置某个标签的value值
document.getElementById("id").xxx;			//使用原生JS获取某个标签的xxx属性
document.getElementById("id").xxx=xxx; 		//使用原生JS设置某个标签的xxx属性
										//使用原生JS发送JAXA请求代码见下文

EL (expression language) 表达式

EL的作用

EL是JSP内置的表达式语言，用以获取四大域对象的数据，向页面输出，目的是消除 java 代码。

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

使用EL表达式输出数据时，如果为null则什么也不输出。
EL的语法

${ expression }
EL的使用

获取某个对象的属性： ${ 对象名.属性名 }

本质是调用对象属性的get()方法

获取某个 Map 中的 key： ${ map 对象名.key }

使用 EL 计算： ${ 2+3 }
对比（使用 EL 可以消除 JSP 中的 Java 代码）

使用 JSP 脚本片段获取某个对象的属性：
```
//获取
<% String name = request.getAttribute("key").getName() %>
//显示
<%=name %>
```
使用 EL 获取某个对象的属性
```
${对象名.属性名}
```

EL中的内置对象（核心用法）

EL中共有11大内置对象，这里只介绍四个域对象和两个常用对象

pageScope	代表 JSP 中内置的 pageContext 对象的 Map (域)
requestScope	代表 JSP 中内置的 request 对象的 Map (域)
sessionScope	代表 JSP 中内置的 session 对象的 Map (域)
applicationScope	代表 JSP 中内置的 application 对象的 Map (域)
param	对应请求一个参数
cookie	获取某个 cookie 对象

从四大域对象中取值： ${ xxxScope.key }

简洁写法：可以直接写 key 值，省去域对象

${key} 依次从 pageScope 到 applicationScope 中取 key 的对应的 value，直到取出的值不为null。

JSTL (JSP standard tag library)

JSP 的标准标签库：指可以在JSP页面中以类似于HTML标签的形式调用Java中的方法（比如循环结构）。

JSTL由5个标签库组成，但是最常用的是核心标签库（http: //java.sun.com/jsp/jstl/core）。

JSTL 的使用

① 使用 JSTL 必须在项目中导入两个 jar 包：

taglibs-standard-impl-1.2.1.jar 和 taglibs-standard-spec-1.2.5.jar

② 然后还需要在 JSP 页面中通过 taglib 标签引入标签库：
```
<%@ taglibprefix="c" uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
```
prefix 用来指定前缀名(库名)，我们通过该名来使用 JSTL ，uri 相当于库的唯一标识。

③ 使用 JSTL ：
```
<c:out value="hello"></c:out> // 表示调用前缀为c的标签的 out 方法，向页面中输出 value 属性中的字符串。
<c:foreach var="e" item="${emps}"></c:foreach> // 	var：集合中的元素	items:要遍历的集合。
```

JSTL一般结合EL表达式才能发挥最大的作用。

显示所有员工的 list.jsp 示例代码：

  <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  <%@ page import="java.util.List" %>
  <%@ page import="com.atguigu.web.bean.Employee" %>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  <% request.setAttribute("path", request.getContentType()); %>
  <!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>
  	<h1 align="center">显示所有员工</h1>
  	<table border="1" align="center">
  		<tr>
  			<th>ID</th>			
  			<th>LASTNAME</th>			
  			<th>GENDER</th>			
  			<th>EMAIL</th>			
  		</tr>
  		<!-- var：集合中的元素	items:要遍历的集合 -->
  		<c:forEach var="e" items="${emps }"> 
  			<tr>
  				<td>${e.id }</td>			
  				<td>${e.lastName }</td>
  				<td>${e.gender }</td>
  				<td>${e.email }</td>
  			</tr>
  		</c:forEach>
  	</table>
  </body>
  </html>

十一、AJAX

AJAX : Asynchronous JavaScript And XML 的简称。直译为，异步的 JS 和 XML。

AJAX 是与服务器交换数据并更新部分网页的技术，也可以简单的理解为通过 JS 向服务器发送请求。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nYdAA9zI-1578803458510)(C:\Users\maben\AppData\Roaming\Typora\typora-user-images\1561460173069.png)]

异步请求对象 XMLHttpRequest

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

使用 AJAX 的流程

① 创建 XMLHttpRequest 对象：

var xmlhttp = new XMLHRequest();

② 向服务器发送请求：两个方法 open() 和 send()

open(method, url, async)

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

send(string) string：仅用于 POST 请求

xmlhttp.open("GET", "/index.jsp", true);
xmlhttp.send();

③ 服务器响应

在这里插入图片描述

④ onreadystatechange

在这里插入图片描述

使用 AJAX 判断用户名是否存在

前段处理

//在用户输入用户名时，发送 ajax 请求，校验用户名是否合法（存在）
	function sendAjax() {
		var xmlhttp = new XMLHttpRequest();
		//获取用户在表单中填入的用户名信息
		var unInput = document.getElementById("username");
		//获取输入框的 name 属性和 value 属性
		var name = unInput.name;
		var value = unInput.value;
		//拼接 ajax 发送的 url
		var url = "/day03/verifyUsername?" + name + "=" + value;
		//准备发送的请求
		xmlhttp.open("GET", url, true);
		//正式发送请求
		xmlhttp.send();
		//使用onreadystatechange事件，监听服务端是否已经成功响应
		xmlhttp.onreadystatechange = function() {
			//响应就绪的判断
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//完成自定义的逻辑处理
				document.getElementById("error").innerHTML = xmlhttp.responseText;
			}
		}

页面处理

<form action="/day03/login" method="post">
		账号：<input id="username" name="username" οnchange="clearSpan()" value ="${username}" onblur = "sendAjax()">
		<span id="error">${errorInfo}</span><br>
		密码：<input name="password" type="password"><br>
		<input value="提交" type="submit">
</form>

服务器端 DAO

@Override
	public boolean ifUsernameExists(String username) throws Exception {
		//获取连接
		Connection connection = DaoUtils.getConnection();
		//SQL语句
		String sql = "select * from tbl_user where username = ?";
		PreparedStatement pstmt = connection.prepareStatement(sql);
		//将用户名传入SQL
		pstmt.setString(1, username);
		//获取查询结果
		ResultSet resultSet = pstmt.executeQuery();
		//判断结果是否存在
		if(resultSet.next()) {
			return true;
		}
		return false;
	}

Servlet

public class VerifyServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private UserDao userDao;
    public VerifyServlet() {
    	userDao=new UserDaoImpl();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String username = request.getParameter("username");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter writer = response.getWriter();
		try {
			if (userDao.ifUsernameExists(username)) {
				writer.print("");
			}else {
				writer.print("用户名非法，请检查！");
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

十二、JQuery

本质是一个 JS 框架。目的简化 js 的页面开发。

JQuery 中定义了一个核心对象，叫做 JQuery 或者 $。

JQuery 包的导入和引入

在项目目录 ( WebContent ) 下新建一个文件夹命名为 script ，将 jquery 的包导入其中。

在这里插入图片描述

在 JSP 中引入 jquery 资源

这里的资源由浏览器解析，在使用绝对路径时要添加项目名。

<script type="text/javascript" src="/day03/script/jquery-1.9.1.min.js"></script>

JQuery 的方法

通式：$("CSS 选择器").html/test/val 

$('p').html(); //返回p元素的内容。
$('p').html("xxx"); //设置p元素的内容。

$('p').text(); //返回p元素的文本内容。
$('p').text("xxx"); //返回p元素的文本内容。

$("input").val(); //返回文本框中的值。
$("input").val("xxx"); //返回文本框中的值。


$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
}); //发送ajax求请求，接收返回的数据。

举例：

   
$("#id");   //使用JQuery选取节点 返回 jquery 对象
$(function(){	}); //使用JQuery为onload事件绑定函数
$("#id").html() //使用JQuery获取某个标签的内容innerHTML属性
$("#id").html(xxx);	//使用JQuery设置某个标签的内容属性
$("#id").val(); //使用JQuery获取某个标签的value值
$("#id").val("xxx"); //使用JQuery设置某个标签的value值
$("#id").attr("xxx"); //使用JQuery获取某个标签的xxx属性
$("#id").attr("name"="value","name1"="value1"); //使用JQuery设置某个标签的xxx属性
$.ajax({}); //对比使用JQuery发送ajax:

使用 JQuery 发送 AJAX 请求

jquery 直接在 script 中编写，获取标签，并帮绑定事件，所以在原标签中不必再使用onblur = "sendAjax()"的形式绑定事件了。

// 在用户输入用户名时，使用 jquery 发送 ajax 请求，校验用户名是否合法（存在）
	// 1.第一步，先写一个 $() 代表加载完成以后执行
	// 2.第二步，写一个 function() {} 代表要执行的匿名函数 
	// 3.第三步，$("xxx").事件(function() {$.ajax({js对象})})  js 对象的形式有很多种，参见
	 $(function(){
		$("#username").blur(function(){
			var data = $("#username").attr("name") + "=" + $("#username").val();
			var url = "/day03/verifyUsername"; 
			$.ajax({
				type:"POST",
				url:url,
                  //当使用 post 请求时要添加 data 属性，表示请求参数
                  //当使用 get 请求时不用添加 data 属性，但是在 url 后添加请求参数
				data:data,
				//成功之后的回调函数
				success:function(msg){
					//msg是服务端响应的内容
					$("#error").html(msg);
				}
			});
		});
	});

十三、Cookie

Cookie 原理

作用：Cookie 用来保存一个 key-value 信息。
创建：Cookie 在服务器端生成。

在 Servlet 中，使用 Cookie cookie = new Cookie(“key”, “value”);

保存：在浏览器中保存。

在 Servlet 中，使用 response.addCookie(cookie) 的方式将 cookie 添加到响应报文中

获取：在 Servlet 中获取，由浏览器发送的 Cookie，

使用 Cookie[ ] cookies = request.getCookies();
属性：
- Cookie 的 path 属性
  
  浏览器访问的 path 与浏览器中保存的某一个 Cookie 的 path 属性匹配时，该 Cookie 的信息就会附加在本次请求的请求头上。
  
  指定 Cookie 的 path属性： cookie.setPath(“xxx”);
- Cookie 的 age （有效期）属性
  
  默认情况下 Cookie 存活的时间是一次会话（当前 Session ）。也可以自行设定！
  
  cookie.setMaxAge(int expiry); 以秒为单位

使用 Cookie 携带数据登录

实现用户7天免输入用户名和密码
实现思路：

① 用户第一次登录，发送/login请求，
被LoginServlet处理，接收用户传入的用户名和密码
在LoginServlet创建两个cookie，分别存储用户传入的用户名和密码，将cookie响应浏览器
② 在创建cookie时，指定其存活时间为7天
在创建 cookie 时，指定其 path 为项目路径/index.jsp，默认也可以
③ 用户下一次登录，访问 /index.jsp 页面
在这个页面使用 EL 内置的 cookie 对象取出cookie，在页面进行回显

Servlet 中创建并设置 Cookie

User user = userDao.findUserByNameAndPassword(username, password);
			//验证参数是否合法
			if (user == null) {
				req.setAttribute("errorInfo", "用户名或密码错误！ ");
				req.setAttribute("username", username);
				req.getRequestDispatcher("/index.jsp").forward(req, resp);
			} else {
				// 创建  Cookie 并加入 账户密码信息
				Cookie cookie1 = new Cookie("username", username);
				Cookie cookie2 = new Cookie("password", password);
				// 设置 Cookie 的存活时间为7天
				cookie1.setMaxAge(60 * 60 * 24 * 7);
				cookie2.setMaxAge(60 * 60 * 24 * 7);
				// 设置 Cookie 的 path 属性
				cookie1.setPath(req.getContextPath() + "/index.jsp");
				cookie2.setPath(req.getContextPath() + "/index.jsp");
				// 将 Cookie 加入响应
				resp.addCookie(cookie1);
				resp.addCookie(cookie2);
				List<Employee> emps = userDao.getEmps();
				req.setAttribute("emps", emps);
				req.getRequestDispatcher("/WEB-INF/pages/list.jsp").forward(req, resp);

在 index.jsp 页面取出 Cookie 并会写到表单中

<form action="${path }/login" method="post">
		账号：<input id="username" name="username" οnchange="clearSpan()" value ="${cookie.username.value }">	//	这里使用${cookie } 取出 Cookie 对象（是一个Map），
    						//	.username 根据键"username" 取出 username 对象
    						//	.value 调用getvalue() 方法 取出 value的值
		<span id="error">${errorInfo}</span>
		<br>
		密码：<input name="password" type="text" value=${cookie.password.value }><br>
		<input value="提交" type="submit">
</form>

十四、Session

Session 是 JSP 中九大内置对象之一，是一个域对象。

Session 是服务器端用来保存用户数据的一种技术，且基于 Cookie 实现。

Session 代表客户端和服务器的一次会话。服务端通过 request.getSession() 创建或获取当前的 Session 对象。

Session 的创建与 JSESSIONID

1. 当第一次访问浏览器时，服务器会自动创建 Session，同时会创建一个名为 JSESSIONID 的 Cookie ；

2. 将该 Session 的 id 属性（通常是一串字符）放入到 Cookie 中做为其 value 值；

3. 最后将这个名为 JSESSIONID 的 Cookie 响应到客户端。

服务器端自动调用 request.getSession() 方法创建 Session。通常情况下，只要 Session 被创建了，且这个 Session 没有过期（默认30分钟过期），那么之后再调用 getSession() 方法，回直接返回之前已创建的 Session。

HttpSession session = request.getSession();
// 首先检查是否携带了 JSESSIONID 的 cookie，如果没有，那么就 new 一个 Session
// 如果携带了 JSESSIONID 的 Cookie，以 JSESSIONID 的值作为 id ，从 Tomcat 之前已创建的 Session 中进行匹配
// 匹配到就返回，匹配不到还是 new 一个 Session

服务器会在自身的 Seesion 池中对比当前请求的名为 JSESSIONID 的 cookie 的 value 值是否存在，用来判断当前的 Session 对象是否已经被创建。

当不同请求携带名为 JSESSIONID 的 Cookie 的 value 值相同时，那么这些请求就被判定拥有同一个 Seesion 对象，即在同一个会话（Session）中，那么这些请求可以共享这个 Seesion 域对象中的数据。

使用 Session 共享

使用 Session 实现全局登录机制

在服务端将用户名放入 Seesion 域中

//将用户名放到 Session 域中
req.getSession().setAttribute("welcome", username);

在 index.jsp 页面取出 Seeion 域中的值并显示

<body bgcolor = "pink">
	<c:if test="${empty welcome }">		<!-- 使用 Jquery 标签库 来编写 if 逻辑-->
		<h1 align="center">欢迎登录</h1>
		<form align="center" action="${path }/login" method="post">
			账号：<input id="username" name="username" onchange="clearSpan()" value="${cookie.username.value }"> 
			<span id="error">${errorInfo}</span>
			<br>
			密码：<input name="password" type="text" value="${cookie.password.value }"><br>
			<input value="提交" type="submit">
		</form>
	</c:if>
	<c:if test="${!empty welcome }">	<!-- 使用 Jquery 标签库 来编写 if 逻辑-->
		<h1 align="center">欢迎${welcome }登录</h1>	<!-- 使用 EL 语法来获取 Session 域中的 用户名-->
		<a href="${path }/login?username=${cookie.username.value }&password=${cookie.password.value }">显示所有员工</a>	<!-- 使用 a 标签发送 GET 请求到 list.jsp 页面 -->
	</c:if>
</body>

十五、Filter

Filter 介绍

Filter 由 Tomcat 创建和调用其方法

Filter 是服务器端负责拦截和过滤请求的组件，根据一定的预设的条件，将请求放行到目标资源，或重新派发到其他位置。

Filter 使用

创建Filter

自定义类，实现 Filter 接口

public class MyFirstFilter implements Filter {
    public MyFirstFilter() {
    	
    }
    // 初始化
    @Override
	public void init(FilterConfig fConfig) throws ServletException {
		
	}
    // 拦截请求后调用处理逻辑
    @Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        // put your code in here
        
        //放行请求，将请求传递到 Servlet 处理
        chain.doFilter(request, response);
	}
	// 销毁
    @Override
	public void destroy() {
		
	}
}

配置拦截：在 web.xml 中配置

<filter>
  		<filter-name>LoginFilter</filter-name>
  		<filter-class>com.atguigu.web.filter.LoginFilter</filter-class>
  </filter>
  <filter-mapping>
  		<filter-name>LoginFilter</filter-name>
  		<url-pattern>/login</url-pattern>  <!-- 这里放入的请求地址都将进入Filter中 -->
  </filter-mapping>

预设条件：在 doFilter 中，自己设定判定条件
符合条件放行：chain.doFilter(request, response);

Filter 的生命周期

① 创建对象：Web 应用加载时就创建对象 —— 这一点和 Servlet 不同

② 初始化：创建对象之后，立即执行 —— inint()

③ 拦截到浏览器请求：调用 doFilter() 方法

每一次拦截请求都没有重新创建对象，说明 Filter 也是单例，多线程运行的。

④ 销毁对象：在卸载 Web 之前，释放 Filter 对象 —— destory()

Filter 运行流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9zHXUSSu-1578803458512)(C:\Users\maben\AppData\Roaming\Typora\typora-user-images\1561554415260.png)]

Filter 链

① 当多个 Filter 拦截同一个资源时，参与的所有 Filter 就会形成一个 Filter 链

② Filter 链中每个 Filter 调用的顺序是根据 filter-mapping 元素配置的顺序决定的。

③ FilterChain 接口
```
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		chain.doFilter(request, response);
}
```
[1] 代表：Filter 链中，当前 Filter 对象所在的位置

[2] 对象获取：Servlet 容器创建，通过 doFilter() 方法以参数的形式传入进来

[3] 功能：调用 chain.doFilter() 方法实现

(1) 调用当前 Filter 链中的下一个 Filter

(2) 如果当前 Filter 就是 Filter 链中的最后一个，那么就会将请求放行到目标资源

Filter 链流程图

在这里插入图片描述

十六、Listener

Listener (监听器)和 Servlet 和 Filter 一样，都是javaweb的三大组件之一。

Listener 对象在 Web 应用记载时被 Tomcat （服务器）创建，Listener 也是单例，多线程运行的。

Listener 的分类

JavaEE 中的检测器按作用分为三大类：

生命周期监听器
javax.servlet.ServletContextListener	监听 Aaplication 生命周期
javax.servlet.ServletRequestListener	监听 Requset 的生命周期
javax.servlet.http.HttpSessionListener	监听 Session 的生命周期
属性监听器
javax.servlet.ServletContextAttributeListener	监听 ServletContext 属性
javax.servlet.http.HttpSessionAttributeListener	监听 Session 属性
javax.servlet.ServletRequestAttributeListener	监听 Request 属性
对象监听器
javax.servlet.http.HttpSessionActivationListener	保存到 Session 域中的对象，活化和钝化的监听器
javax.servlet.http.HttpSessionBindingListener	对象被绑定到 Session 域中的监听器

根据要实现的功能选择对应的监听器。

Listener 的创建

方式一：使用向导创建

勾选对应的监听器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DtHHXcRr-1578803458513)(C:\Users\maben\AppData\Roaming\Typora\typora-user-images\1561599501946.png)]

方式二：手动创建

创建一个监听 Seesion 生命周期的 Listener —— HttpSessionListener

public class MyListener implements HttpSessionListener {
    public  MyListener() {
		
	}
    // 监测到新的 Seesion 被创建时，该方法会自动执行一次
	@Override
	public void sessionCreated(HttpSessionEvent se) {
		 
	}
	// 监测到新的 Seesion 被销毁时，该方法会自动执行一次
	@Override
	public void sessionDestroyed(HttpSessionEvent se) {
		
    }
 }

在 web.xml 中注册

<listener>
    <listener-class>xxx.xxx.xxx</listener-class> <!-- 监听器的全类名 -->
</listener>

监听 Seesion 的声明周期

创建 Listener

public class MyListener implements HttpSessionListener {
	public  MyListener() {
	}
	// 监测到新的 Seesion 被创建时，该方法会自动执行一次
	@Override
	public void sessionCreated(HttpSessionEvent se) {
		// 在线人数必须存放在 Application 域中
		// 从 Application 域中取出在线人数
		ServletContext servletContext = se.getSession().getServletContext();
		Integer countValue = (Integer) servletContext.getAttribute("count");
		// 如果为 null 那么当前 Session 为第一个 Session 设置 count 的值为1
		if (countValue == null) {
			servletContext.setAttribute("count", 1);
		} else {//如果不为 null 则给给 Application 中的值加1，再重新设置到 Application 域中
			countValue++;
			servletContext.setAttribute("count", countValue);
		}
	}
	// 监测到新的 Seesion 被销毁时，该方法会自动执行一次
	@Override
	public void sessionDestroyed(HttpSessionEvent se) {
		ServletContext servletContext = se.getSession().getServletContext();
		Integer countValue = (Integer) servletContext.getAttribute("count");
		//当监听到有 Seesion 销毁时 给 Application 中的值 减1 ，再重新设置到 Application 域中
		countValue--;
		servletContext.setAttribute("count", countValue);
	}
}

配置 web.xml

<listener>
  	<listener-class>com.atguigu.web.listener.MyListener</listener-class>
</listener>

在页面取出 count 值

<h1 align="center">当前${count }人在线</h1>

十七、XML

XML（Extensible Markup Language）可扩展性标记语言。

XML 的功能

1. 用来保存数据，并且这些数据内容具有自我描述性。

2. xml用作工程或者框架的配置文件，例如：web.xml

3. 作为数据传输的一种数据格式。

XML 的语法

文档声名

<?xml version="1.0" encoding="UTF-8"?>

文档声明是一个XML文件必不可少的部分，主要声明文档的版本和编码。

注释：
标签的语法规则

<?xml version="1.0" encoding="UTF-8"?>
<!-- xml声明，其中version为版本号，encoding为编码 -->
<books> <!-- 标签名大小写敏感，且其中不能有空格,不能以数字和标点符号开头; 标签不能嵌套 -->
	<!-- 在标签头上可以声明属性，属性必须使用""引起来 -->
	<book id="001">
		<name>《西游记》</name>
		<!-- XML中如果出现特殊字符需要使用转义或使用CDATA文本区进行包装
			使用转义字符: 
						< : &lt; 
						> : &gt;
			使用CDATA：<![CDATA[XXXX]]>
		 -->
		<author><![CDATA[<吴承恩>]]></author>
		<price>88.88</price>
	</book>
</books>

XML 文档的解析

使用 DOM（Document Object Model）或SAX（Simple API for XML）这两种技术，将XML文件中的内容转换为Java对象。

十八、JSON

JSON 定义

JSON 是一种轻量级的数据交换格式。
JSON 的格式

var json1 = {"key1":value, 	// Number 类型
			"key2":"value", 	// 字符串类型
			"key3":[], 		// 数组类型
			"key4":{}, 		// json 对象类型
			"key5":[{}, {}		// json 数组
};

JSON 对象和 JSON 字符串的转换

<script type="text/javascript">
		var person = {"name":"jack", "age":18};
		// 将 JSON 对象转为 JSON 字符串
		var personStr = JSON.stringify(person);
		alert(typeof personStr); // string
		// 将 JSON 字符串转为 JSON d对象
		var personObj = JSON.parse(personStr);
		alert(typeof personObj); //object
</script>

JSON 字符串和 Java 对象的转换

将 json 字符串和 Java 对象互转有很多框架例如：Gson，Jackson，FastJson

import com.google.gson.Gson; // 使用 Gson 需要导入 gson-2.2.4.jar

public void testJavaObejctToJsonString() throws SQLException {
		Gson gson = new Gson();
		// 将一个java 对象转换为一个 json 字符串
		User user = userDao.findUserByNameAndPassword("maben", "123456");
		String json = gson.toJson(user);
		System.out.println(json);
		//{"id":1,"username":"maben","password":"123456"}
		
		// 将一个java list中的所有对象转换为一个 json 字符串
		List<Employee> emps = userDao.getEmps();
		String json2 = gson.toJson(emps);
		System.out.println(json2);
		/*[{"id":1,"lastName":"Tom","gender":"male","email":"Tom@163.com"},
		{"id":2,"lastName":"Jack","gender":"male","email":"Jack@163.com"},
		{"id":3,"lastName":"Marry","gender":"female","email":"Tom@163.com"}]*/
}

public void JsonStringToJavaObject() {
		String user ="{\"id\":1,\"username\":\"maben\",\"password\":\"123456\"}";
		String userList = "[{\"id\":1,\"lastName\":\"Tom\",\"gender\":\"male\",\"email\":\"Tom@163.com\"},{\"id\":2,\"lastName\":\"Jack\",\"gender\":\"male\",\"email\":\"Jack@163.com\"},{\"id\":3,\"lastName\":\"Marry\",\"gender\":\"female\",\"email\":\"Tom@163.com\"}]";
		Gson gson = new Gson();
		// 将 json 字符串转换为单个 java 对象
		User userObj = gson.fromJson(user, User.class);
		System.out.println(userObj);
		// 将 json 字符串转换为 List 集合, Type 必须是 java.lang.reflect.Type 类型
		Object userObjList = gson.fromJson(userList, new TypeToken<ArrayList<Employee>>() {}.getType());
		System.out.println(userObjList);
}

使用 AJAX 请求 JSON 字符串

页面处理

<a id="a1" href="/day04/HandleAjaxServlet">发送AJAX请求</a>
<table id="mytable"></table>

服务端处理

@WebServlet("/HandleAjaxServlet")
public class HandleAjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private UserDao userDao;
    public HandleAjaxServlet() {
    	userDao = new UserDaoImpl();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			// 获取 emps 对象
			List<Employee> emps = userDao.getEmps();
			// 将 list 的对象转换为 json 串
			String json = new Gson().toJson(emps);
			// 设置编码格式
			response.setContentType("text/html;charset=UTF-8");
			// 写回到浏览器
			response.getWriter().write(json);
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

浏览器端处理

		$(function(){
			$("#a1").click(function(){
				var url = $("#a1").attr("href");
				// 发送 ajax 请求
				$.ajax({
					url:url,
					type:"GET",
					// 设置dataType 为 json，属性转换为 JSON 对象
					dataType:"json",
					success:function(msg) {
						var headerTr="<tr><th>ID</th><th>LASTNAME</th><th>GENDER</th><th>EMAIL</th></tr>"
						// 拼接表格内容
						for (var i = 0; i < msg.length; i++) {
							headerTr = headerTr +"<tr><td>"+ msg[i].id+"</td><td>"+msg[i].lastName+
							"</td><td>"+msg[i].gender+"</td><td>"+msg[i].email+"</td></tr>";
						}
						//设置表格内容
						$("#mytable").html(headerTr);
					}
				});
				// 点击<a> 标签后，取消标签的自动跳转
				return false;
			})
		});

十九、补充

web.xml

web.xml 是整个项目的核心配置文件，每个项目都有自己的web.xml。

tomcat 服务器在 config 文件目录下也有自己的 web.xml

每个工程的 web.xml 会继承 tomcat 中的 config/web.xml ，继承之后就会拥有其中的信息。

如果有同名的信息，工程的 web.xml 中的配置会覆盖 tomcat 中的 config/web.xml 的配置

javaweb 中，处理请求中能是 seervlet 和 filter

访问 /xxx/index.html 资源时，服务端在处理后，将页面的内容写给浏览器。

静态资源： html,css,图片，视频，文件 xxx写资源的路径

动态资源： jsp,java程序 xxx要么写jsp的路径名，要么写请求的标识符（随便写）

原因：在 config/web.xml，内置了一个 Servlet ，这个 Servlet 专门负责处理静态资源。

	<servlet>
        <servlet-name>default</servlet-name>
        <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>0</param-value>
        </init-param>
        <init-param>
            <param-name>listings</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
	<servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>/</url-pattern>   //  匹配当前项目下的所有url
    </servlet-mapping>

假若发送的 url 为 /abc.1234，优先在工程的 web.xml 进行匹配

如果有 Servlet 匹配上了，就交给这个 Servlet处理。

如果没 Servlet 匹配上，则交给 DefaultServlet。 DefaultServlet尝试从当前项目下，找abc.1234文件

如果找到，将文件的内容读到流中，响应浏览器

如果找不到，报错 404。

访问 /xxxx.jsp 时，在 config/web.xml ,内置了一个 Servlet ，这个 Servlet 专门负责处理 jsp 请求。

	<servlet-mapping>
        <servlet-name>jsp</servlet-name>
        <url-pattern>*.jsp</url-pattern>
        <url-pattern>*.jspx</url-pattern>
    </servlet-mapping>
	<servlet>
        <servlet-name>jsp</servlet-name>
        <servlet-class>org.apache.jasper.servlet.JspServlet</servlet-class>
        <init-param>
            <param-name>fork</param-name>
            <param-value>false</param-value>
        </init-param>
        <init-param>
            <param-name>xpoweredBy</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>3</load-on-startup>
    </servlet>

JspServlet 负责匹配结尾为 jsp 的请求，根据路径找到 jsp 文件，翻译为 java 程序。

马本不想再等了

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb 总结

一、JavaWeb 的技术体系Javaweb负责使用Java语言，开发服务器端程序的技术。Javaweb开发的程序，一般都采用B/S架构。浏览器端： html: 负责构建静态页面。特点由标签组成，需要什么功能就使用什么标签。 css : 负责页面样式。 javascript：负责将静态页面变为动态页面，负责和用户进行交互。 jquery: j...
复制链接

扫一扫