应用程序架构分为两种
C/S架构
C/S(Client/Server):客户端/服务器
B/S架构
B/S(Browser/Server):浏览器/服务器
相对于C/S应用程序而言， B/S应用程序更容易访问且部署维护时更加方便
localhost:8080/myProject/index.jsp
http:协议(Hypertext Transfer Protocol):超文本传输协议
Ip:服务器的地址
Port:端口号,让那个程序相应
myProject/index.jsp:路径/文件名
端口如果设置为80，可以不写端口
状态码 意义
200 成功处理请求
404 找不到服务器资源
500 服务器处理出错
| 目录文件 | 作用 |
|---|---|
| bin | startup.bat, shutdown.bat |
| conf | 存放Tomcat的配置文件 |
| lib | Tomcat所需要的lib文件 |
| webapps | Web应用的发布目录 |
| work | JSP运行时生成的servlet文件 |
| temp | Tomcat运行时存放临时文件 |
| logs | 存放Tomcat的日志文件 |
<!--<Connector port="8080" protocol="HTTP/1.1 " connectionTimeout="20000" redirectPort="8443 "
/>-->
//将8080端口修改为6060端口
<Connector port= "6060" protocol="HTTP/1.1 " connectionTimeout="20000" redirectPort="8443 "
/>打开conf目录中的l文件，在其中的标签中使用一个标签进行配置。
<Host name="localhost" appBase="webapps"unpackWARs="true" autoDeploy="true"xmlValidation="false" xmlNamespaceAware="false"><Context path="/myweb" docBase="E:JavaWebFirstWebProWebRoot"/><!--"/myweb"为虚拟路径"E:JavaWebFirstWebProWebRoot"为物理路径--></Host>| 目录文件 | 作用 |
|---|---|
| 应用程序文档根目录 / | 在MyEclipse中为WebRoot |
| WEB-INF目录 | 该目录存于文档根目录下，并且不能被访问 |
| 存放应用使用的各种资源，该目录及其子目录对客户端都是不可以访问，其中包括l（部署表述符） | |
| classes目录 | 存放字节码文件 |
| lib文件夹 | 它包含Web应用程序所需要的JAR包文件 |
| tld文件 | 标签库描述文件 |
配置开发环境
创建Web项目
编写项目代码
部署Web项目到服务器中
打开浏览器，运行Web项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qXcgJPEo-1635413245670)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913152916252.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ABpoRU4X-1635413245673)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913153100481.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q2y82QS8-1635413245675)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913152706550.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukZusSWR-1635413245677)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913153516784.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MmlhI9Kp-1635413245680)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913153754142.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GaSSpXDM-1635413245683)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913153828709.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pokYWKnj-1635413245686)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913153847234.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6mCKcOCk-1635413245688)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913154108659.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5uhiuXfC-1635413245690)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913154249375.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSAwVkKd-1635413245693)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913154442783.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0gojaP2P-1635413245695)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913155302567.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uk9x5I24-1635413245697)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913155623246.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XMtc2c9h-1635413245699)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913155826022.png)]
运行tomcat，此时修改index.jsp中的内容为欢迎使用jsp；ctrl+s保存后直接刷新页面，就会看到刚刚设置的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5jGxhUnU-1635413245700)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913160734906.png)]
这两个属性已经生效
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Zq61sEW-1635413245702)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913160717383.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Qyr8hV8-1635413245704)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210913160705157.png)]
使用l文件配置应用发布
l文件必须保存在/WEB-INF目录下
在 l文件中配置各种资源的发布信息
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="" xmlns:xsi="" xsi:schemaLocation=" .xsd"><welcome-file-list><welcome-file>index.jsp</welcome-file> <welcome-file>home.jsp</welcome-file> <!--假定在web应用(news)下存在一个index.jsp页面，输入localhost:8080/news地址时，web容器会默认调用index.jsp页面。可以设置多个页面，当第一个找不到时就会依次向下寻找--></welcome-file-list>
</web-app>
在HTML中嵌入Java脚本代码
由应用服务器中的JSP引擎来编译和执行嵌入的Java脚本代码
然后将生成的整个页面信息返回给客户端
Web容器处理JSP文件请求需要经过3个阶段：
翻译阶段 JSP => Servlet
编译阶段 Servlet.java=> .class
执行阶段
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bt23RAlb-1635413245705)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210914162935177.png)]
合理、详细的注释有利于代码后期的维护和阅读
*在JSP文件的编写过程中，共有三种注释方法：
HTML的注释： //缺点：不安全，加大网络传输负担
JSP注释：<%-- JSP注释–%> //不可见注释
在JSP脚本中注释：
<% //单行注释 %>
<% /*多行注释 */ %>
JSP指令元素主要用来提供整个JSP网页相关的信息，并且用来设定JSP页面的相关属性。
JSP指令的格式
<%@ 指令名 属性= “属性值” %>
JSP有3种指令元素
page指令
include指令
taglib指令
page指令
通过设置内部的多个属性来定义整个页面的属性
语法：<%@ page 属性1=“属性值” 属性2=“属性值1,属性值2”… 属性n=“属性值n”%>
| 属性 | 描述 | 默认值 |
|---|---|---|
| language | 指定JSP页面使用的脚本语言 | java |
| import | 通过该属性来引用脚本语言中使用到的类文件 | 无 |
| contentType | 用来指定JSP页面所采用的编码方式 | text/html, GBK,UTF-8 |
| errorPage | 设置该JSP页面的错误处理页面的URL，处理当前页面中引发但未捕获到的异常 | |
| isErroePage | **设置该页面是否为错误处理页面 |
如果发现out.print()、request等内置对象没有提示方法爆红，都可以找到tomcat 的lib包下的：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WdkjLqil-1635413245707)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210914172621944.png)]
这三个包进行导入，放入项目的lib文件下就可以解决。如果有些不显示其实没有影响，tomcat包中有这些，但是开发阶段的lib包中没有，所以把包从tomcat中导出来，有些方法自己拼写太麻烦还是导入lib的好。
声明就是在JSP页面中定义Java的变量和方法
语法：<%! Java代码%>
<%@ page language="java" import="java.util.*,*" contentType="text/html; charset=GBK" pageEncoding="GBK"%>
<html>
<%！
String formatDate(Date d){SimpleDateFormat formater = new SimpleDateFormat("yyyy年MM月dd日");retrun formater.format(d);
}
%>
你好，今天是
<%=formatDate(new Date()) %>
</body>
</html>什么是JSP动作？
JSP动作可以动态地插入文件、重用JavaBean组件、把用户重定向到另外的页面、为Java插件生成HTML代码。
常用标准动作
jsp:useBean:定义jsp页面使用一个JavaBean实例;
jsp:setProperty:设置一个JavaBean中的属性值;
jsp:getProperty:从JavaBean中获取一个属性值;
jsp:include:在JSP页面包含一个外在文件;
jsp:forward:把到达的请求转发另一个页面进行处理;
注意:动作中得属性区分大小写,属性中得值,必须置于双引号内.
get方式会在地址栏显示，post不会。get地址栏传值，post属于Http传值
get方式附加的参数的大小不能大于2K，而post理论上没有长度
get方式有几率出现乱码，post不会
get方式相比post提交效率高一点
表单的默认提交方式为get
Login.jsp;
<form action=“login.jsp” Method=“post”>
账号:<input type=“text” name=“userName”/>
密码:<input type=“password” name=“pwd”/>
</form><%
String username&#Parament(“userName”);
String password&#Parament(“pwd”);
If(username.equals(“admin”)&&password.equals(“admin”)){
Response.sendRedirect(“login_success.jsp”);
}else{
Response.sendRedirect(“login_success.jsp”)
}
%>
在接收数据/过滤器中的第一行插入这两个转码格式
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
查看数据库中的数据是否为乱码
查看请求头中的数据是否为乱码，如果是进行第3
<meta charset="UTF-8">
response.setContenttype("text/html;chatset=UTF-8")
可以在tomcat中的l文件修改端口中添加该代码
<Connector port="8080" protocol="HTTP/1.1"connectionTimeout="20000"URIEncoding=“UTF-8” redirectPort="8443" />
<!--在端口下添加 URIEncoding=“UTF-8-->
容器居中
跳转时出现子页面出现问题需要父页面整个页面跳转时，
如：子页面点击要执行servlet时，要验证登录操作，失败后需要父页面跳转登陆页面
//servlet中可以这样写
out.write("<script>parent.location.href='index.html'</script>");
<!--js中可以这样写-->
<script>parent.location.href='index.html'</script>
原理就是执行父页面parent 的跳转location.href
转发&#RequestDispatcher(“XXX.jsp”).forward(request,response);
重定向：response.sendRedirect(“XXX.jsp”);
1.两者都可以实现也页面的跳转
2.转发是内部控制权的转移，重定向是重新发送了一次url请求。
3.转发是服务器行为，重定向是客户端行为。
4.如果使用request.setAttribute的话，转发会将数据传递，重定向不会，因为request的作用域只在一次请求中有效
5.如果需要传数据，那么就使用转发，否则就使用重定向。
| 方 法 名 称 | 方 法 描 述 |
|---|---|
| String getParameter(String name) | 根据页面表单元素名称获取请求页面提交的数据 |
| String[] getParameterValues(String name) | 获取页面请求中有重名表单的元素用户的请求数据 |
| getRequestDispatcher(String path) | 返回一个RequestDispatcher对象该对象的forward方法可以把请求转发到指定资源. |
| Object getAttribute(String name) | 返回由name指定的属性值 |
| void setAttribute(String name,Object obj) | 设置名字为name的request参数值 |
| 名称 | 说 明 |
|---|---|
| page范围 | 在一个页面范围内有效，通过pageContext对象访问该范围内的对象 |
| request范围 | 在一个服务器请求范围内有效，与客户端请求绑定一起 |
| session范围 | 在一次会话范围内容有效，在会话期间与session绑定的对象皆属于该范围 |
| application范围 | 在一个应用服务器范围内有效，当应用服务启动后即创建该对象，并向所有用户所共享 |
| 作用域 | 说 明 | |
|---|---|---|
| pageContext | 在一个页面中有效 | 只能在创建对象的页面内访问,在服务器跳转后失效 |
| pageContext.setAttribute(“name”,value);Attribute(“name”); | ||
| request | 在一次请求中有效 | 页面跳转后,设置的内容依然被保,request.setAttribute(“name”,value);Attribute(“name”); |
| session | 在一次会话中有效 | 重定向后,也可以访问,关闭浏览器失效session.setAttribute(“name”,value);Attribute(“name”); |
| application | 在一次服务器中有效，服务器不重启不失效。 | 关闭浏览器,重新打开,也可以访问到application.setAttribute(“name”,value);Attribute(“name”); |
什么是Cookie
Cookie是由服务器生成 发送给客户端浏览器的一小段信息, 浏览器将其保存成某个目录下的文本文件中.
Cookie的作用
对特定对象(客户)的追踪,如:访问系统次数,最后访问时间,停留时间等
统计网页浏览次数
记录用户登录信息
实现个性化服务,如针对不同的用户偏好展示不同的内容等
安全性能
容易信息泄露
导入包
<%@page import="javax.servlet.http.Cookie“%>
创建Cookie
Cookie newCookie=new Cookie(“parameter”, “value”);
parameter:用于代表cookie的名称(key)
value：用于表示当前key名称所对应的值
使用cookie 必须设置一个有效期
写入Cookie
response.addCookie(newCookie)
读取Cookie
| 类型 | 方法名称 | 说 明 |
|---|---|---|
| void | setMaxAge(int expiry) | 设置Cookie的有效期，以秒为单位 |
| void | setValue(String value) | 在Cookie创建后，对Cookie进行赋值 |
| String | getName() | 获取Cookie的名称 |
| String | getValue() | 获取Cookie的值 |
| int | getMaxAge() | 获取Cookie的有效时间，以秒为单位 |
------从登录验证页面表单中获取用户名------
<%String username&#Parameter("username");
String password&#Parameter(“pwd”);
Cookie uname=new Cookie("uname", username);
Cookie upwd=new Cookie(“pwd", password);
response.addCookie(uname);
Response.addCookie(upwd);//创建Cookie,使用response的addCookie方法保存Cookie
... ...
%>
-----在显示页面显示用户名---------------
<%//获取请求中的Cookie，以数组方式保存Cookie cookies[ ]&#Cookies();//使用reqeust获取Cookie数组，通过cookie的名称获取对应的内容//循环遍历数组，得到key=uname的Cookiefor(int i=0;i<cookies.length;i++){Cookie ucookie=cookies[i];Name().equals("uname”));//判断Cookie的名称%>欢迎你：<%&#Value() %>//获取key对应的value，输出显示<% } %>javascript:kie),在网页控制台使用该代码可以看到该网页现在的Cookie值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UZUGbd2J-1635413245710)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20211018173042481.png)]
session对象用来存储有关用户会话的所有信息,这些信息保存在服务器端
| 类型 | 方法名称 | 说 明 |
|---|---|---|
| void | setAttribute(String key,Object value) | 以key/value的形式保存对象值 |
| Object | getAttribute(String key) | 通过key获取对象值 |
| String | getId() | 获取session对象的编号 |
| void | invalidate() | 设置session对象失效 |
------登录处理页面的代码片断------
<%
if (rs.next()) { //如果是已注册用户
session.setAttribute("LOGINED_USER", loginedUser);
response.sendRedirect("index.jsp");
} else {
response.sendRedirect("login.html");
}
%>------ 在新闻发布系统新闻发布页面增加登录验证------
<%
User user = (User) Attribute("LOGINED_USER");
//如果session中不存在该用户的登录信息，转入登录页面
if (user == null) {
response.sendRedirect("login.jsp");
}
%><!--success.jsp-->
欢迎<%&#UserName() %>使用本系统。
<a href="logout.jsp" >注销</a><!--logout.jsp-->
<%//3秒后跳转到登录页面response.setHeader("refresh","3;URL=index.jsp");//让当前session失效session.invalidate();
%>
注销成功，3秒后自动转到登录页面，如没有跳转，请点击
<a href="index.jsp">这里</a>| session | Cookie |
|---|---|
| 是在服务器端保存用户信息 | 是在客户端保存用户信息 |
| 保存的是对象 | 保存的是字符串 |
| 随会话结束而关闭 | 可以长期保存在客户端 |
| 重要的信息使用session保存 | 通常用于保存不重要的用户信息 |
使用SmartUpload组件需要在项目中引入jspsmartupload.jar文件
将jspsmartupload.jar 添加到WEB-INFlib目录下
需要设置表单的enctype属性
<form enctype="multipart/form-data" method="post"><!--设置了enctype属性后，表单必须以post方式提交-->
| 属性名称 | 说 明 |
|---|---|
| public final void initialize(PageContext pageContext) | 执行上传和下载的初始化工作，必须实现 |
| public void upload() | 实现文件数据的上传，在initialize方法后执行 |
| public int save(String pathName) | 将全部上传文件保存到指定的目录下，并返回保存的文件个数 |
| public void setAllowFilesList(String ExtList) | 指定允许上传的文件扩展名，接收一个扩展名列表，以逗号分隔 |
| public void setDeniedFilesList ( String fileList) | 指定了禁止上传的文件扩展名列表，每个扩展名之间以逗号分隔 |
| public void setMaxFileSize(long filesize) | 设定每个文件允许上传的最大长度 |
| public void setTotalMaxFileSIze(long totalfilesize) | 设定允许上传文件的总长度 |
封装了所有上传文件的信息集合
常用方法
| 属性名称 | 说 明 |
|---|---|
| public int getCount（） | 取得文件上传的数目 |
| public File getFile（int index） | 取得指定位置的File文件对象 |
| public long getSize（） | 取得上传文件的总长度 |
| public Files getFiles（） | 将所有上传文件对象以Collection的形式返回 |
| 方法名称 | 说 明 |
|---|---|
| saveAs(String destFilePathName) | 将文件保存，参数destFilePathName是保存的文件名 |
| isMissing( ) | 判断用户是否选择了文件，即对应表单项是否为空，返回值为boolean类型 |
| public String getFiledName( ) | 获取表单中当前上传文件所对应的表单项的名称 |
| public String getFileName( ) | 获取上传文件的文件名称，不包含路径 |
<%@ page import="com.jspsmart.upload.*"%><!--导入包-->
<%smartUpload su = new SmartUpload(); //创建smartupload对象su.initialize(pageContext); //上传初始化,初始化pageContext对象，pagecontext对象的作用域是本页面su.setCharset(“GBK”); //设置格式，一般设置为UTF-8su.upload(); //上传文件
//获取单个上传文件[如果要得到文件信息,则用file,如果不需要,则直接保存com.jspsmart.upload.file file = su.getFiles().getFile(0);//创建文件读取对象
//文件在服务器端保存file.save(filepath);
//save保存文件 //filepath指定文件保存路径
混合表单上传文件时获取不到除上传文件的其他值
所以需要通过smartupload取request对象来获取其他值
<%//实例化SmartUpload上传组件SmartUpload smart = new SmartUpload(); //创建smartupload对象//初始化上传操作smart.initialize(pageContext); //上传初始化//设置字符集smart.setCharset("gbk"); //设置编码格式//准备上传smart.upload(); //上传文件Request smartReq &#Request(); //创建request对象String username = Parameter("username");//通过创建的request获取值//将上传的文件保存到项目根路径下的uploadfile目录中smart.save("uploadfile");%><h3>姓名：<%=username %></h3> <!--通过smartupload创建的request可以获取到值--> <h3>使用request内置对象获取： <%&#Parameter("username") %> <!--该方法获取不到值-->
</h3>
<!--servlet中创建pagecontext-->final javax.servlet.jsp.PageContext pageContext;private static final javax.servlet.jsp.JspFactory _jspxFactory =javax.servlet.DefaultFactory();pageContext = _PageContext(this, request, response,null, true, 8192, true);javax.servlet.jsp.PageContext pageContext = javax.servlet.DefaultFactory().getPageContext(this, request, response,null, true, 8192, true); SmartUpload smart=new SmartUpload();Request req&#Request(); //获取Request对象smart.initialize(pageContext);smart.setCharset("UTF-8");smart.upload();smart.save("upfiles");String title&#Parameter("title");String writer=(Attribute("uname");String content&#Parameter("content");SimpleDateFormat sdf=new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");String writerDate=sdf.format(new Date());String pic&#Files().getFile(0).getFileName(); // 获取文件名SmartUpload 获取表单数据
getRequest()： 得到com.jspsmart.upload.Request对象
常用方法
| getParameter(String name) | 获取指定参数之值，等同JSP内置对象Request的getParameter方法 |
|---|---|
| getParameterValues(String name) | 获取一个页面表单组件对应多个值时的用户的请求数据，等同JSP内置对象Request的getParameterValues方法 |
<form method="post" enctype="multipart/form-data" action="control.jsp">
上传文件：<input type="file" name="nfile"><br/>
文件描述：<input type="text" name="explanation"><br/>
<input type="submit" value="上传">
</form>
<!--java代码-->
<%
com.jspsmart.upload.Request surequest = su.getRequest();
String explanation = Parameter("explanation");
out.println(explanation) ;
%><%//实例化SmartUpload上传组件SmartUpload smart = new SmartUpload();//初始化上传操作smart.initialize(pageContext);//设置字符集smart.setCharset("gbk");//准备上传smart.upload();//取得所有上传文件Files files = Files(); //获取上传文件//循环保存各个文件for(int i=0;i&Count();i++){smart.save("uploadfile"); //循环保存文件}
%>使用SmartUpload组件可以对上传文件的类型进行限制
setAllowedFilesList(): 允许上传的文件类型
setDeniedFilesList()： 禁止上传的文件类型
SmartUpload su = new SmartUpload();
//初始化SmartUpload对象
su.initialize(pageContext);try {//定义允许上传文件类型 su.setAllowedFilesList("gif,jpg,doc");//不允许上传文件类型 su.setDeniedFilesList("jsp,asp,php,aspx,html,htm,exe,bat");//执行上传su.upload();
}catch(Exception e)使用SmartUpload组件可以对上传文件的大小进行限制
setMaxFileSize(): 允许上传的单个文件大小
setTotalMaxFileSize()：允许上传的文件总容量
//定义允许上传文件类型 su.setAllowedFilesList("gif,jpg,doc");//不允许上传文件类型 su.setDeniedFilesList("jsp,asp,php,aspx,html,htm,exe,bat") ;//单个文件最大限制 su.setMaxFileSize(20000);//所有上传文件的总容量限制 su.setTotalMaxFileSize(500000); //文件上传大小单位byte
可以实现复杂的多文本输入
导入js文件：wangEditor.min.js
<div id="div1"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div><!-- 引入 wangEditor.min.js -->
<script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')// 或者 const editor = new E( ElementById('div1') )ate()
</script>
通过监控富文本的变化将文本同步更新到textarea
<div id="div1"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<textarea id="text1" style="width:100%; height:200px;"></textarea><script src=".2.1/jquery.min.js"></script>
<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')const $text1 = $('#text1')hange = function (html) {// 第二步，监控变化，同步更新到 textarea$text1.val(html)}ate()// 第一步，初始化 textarea 的值$text1.html())
</script>
HttpServlet继承于GenericServlet
处理HTTP协议的请求和响应
HttpServlet的方法
| 方法名称 | 功能描述 |
|---|---|
| void doGet(HttpServletRequest request,HttpServletRresponse response) | 以Get请求服务时调用 |
| void doPost(HttpServletRequest request,HttpServletRresponse response) | 以Post请求服务时调用 |
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HelloServletTest extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=GBK");PrintWriter out = Writer();out.println("<html>");out.println(" <head><title>Servlet</title></head>");out.println(" <body>");out.println("你好，欢迎来到Servlet世界");out.println(" </body>");out.println("</html>");out.close();}
}HttpServletRequest类常用方法
| 方法名称 | 功能描述 |
|---|---|
| String getParameter(String param) | 获取客户端请求数据 |
| void setCharacterEncoding(String encoding) | 设置输入字符集 |
HttpServletResponse类常用方法
| 方法名称 | 功能描述 |
|---|---|
| void setContentType(String contType) | 设置输出字符集 |
| void sendRedirect(String url) | 让浏览器重定向到指定的资源 |
<web-app><servlet><servlet-name> HttpServletTest </servlet-name><!--为了方便使用Servlet，取个别名--><!--servlet-name两个名称必须相同--><servlet-class>cn.jbit.servlet. HttpServletTest </servlet-class><!-- 完整的包名+类名--></servlet><servlet-mapping><servlet-name> HttpServletTest </servlet-name><url-pattern>/HttpServletTest </url-pattern><!--访问Servlet的URL--></servlet-mapping></web-app>@webServlet(name = "".displayname="")
与xml相比较
name 等价与 servlet-name
displayname 等价与 url-pattern
大部分情况下格式为
@WebServlet("/name")
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tl7l50eL-1635413245718)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210922180253558.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-obx4dLwD-1635413245720)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210922180327900.png)]
init——》service——》doget/dopost——》服务器关闭时执行destory
在Servlet初始化过程中获取配置信息
一个Servlet只有一个ServletConfig对象
ServeltConfig接口的常用方法
| 方法名称 | 功能描述 |
|---|---|
| String getInitParameter(String name) | 获取 |
| ServletContext getServletContext() | 返回Servlet的上下文对象引用 |
获取Servlet上下文
ServeltContext接口的常用方法
| 方法名称 | 功能描述 |
|---|---|
| ServletContext getContext(String path) | 返回服务器上与指定URL相对应的ServletContext对象 |
| void setAttribute(String name,Object obj) | 设置Servlet中的共享属性 |
| Object getAttribute(String name) | 获取Servlet中设置的共享属性 |
getServletConfig().getServletContext().getContext("/servlet").getServerInfo()提供了Servlet与ServletConfig接口的默认实现方法
GenericServlet的常用方法
| 方法名称 | 功能描述 |
|---|---|
| String getInitParameter(String name) | 返回服务器上与指定URL相对应的ServletContext对象，实际上是调用ServletConfig接口的同名方法 |
| ServletContext getServletContext() | 返回Servlet的上下文对象引用，实际上是调用ServletConfig接口的同名方法 |
| ** **void init() | 初始化****Servlet |
<web-app><servlet><servlet-name>HelloServlet</servlet-name><servlet-class>org.jbit.servlet.HelloServlet</servlet-class><init-param><param-name>initParam</param-name><param-value>Hello Servlet</param-value></init-param><!--init-param即为局部初始化参数，参数名为initialparam，值为Hello Servlet--></servlet><servlet-mapping><servlet-name>HelloServlet</servlet-name><url-pattern>/HelloServlet</url-pattern></servlet-mapping>
</web-app> public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println("处理请求时,doGet()方法被调用。");String initParam = getInitParameter("initParam");//局部初始化参数通过ServletConfig的getInitParameter方法//来获得xml中以“initParam”为name 的参数值System.out.println(initParam);}<web-app><context-param><param-name>contextParam</param-name><param-value>Hello Servlet</param-value></context-param><!--省略其他配置-->
</web-app>
<!--局部参数是写在servlet标签下，而全局参数是写在web—app标签下的-->
public class HelloServlet extends HttpServlet {// …省略其他代码public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println("处理请求时，doGet()方法被调用。");String initParam = getInitParameter("initParam");//此处获取HelloServlet名下的局部参数initParamString contextParam = ServletContext().getInitParameter("contextParam");//该方法获取的是全局初始化参数contextParamSystem.out.println("Servlet初始化参数" + initParam);System.out.println("系统初始化参数" + contextParam);}
}
//调用<init-param>中的参量：
//调用格式为：
String name = getInitParameter(“name”);
//或
String name = getServletConfig().getInitParameter(“name”);//局部参数是通过Servletconfig的getInitParameter方法获取参数//调用<context-param>中的参量：
//调用格式为：
String name =getServletContext(). getInitParameter(“name”);
//或
String name = getServletConfig().getServletContext().getInitParameter(“name”);
//全局参数是通过Servletconfig的getServletContext方法获取ServletContext对象
//然后通过ServletContext对象的getInitParameter方法获取参数
EL即Expression Language（表达式语言）
EL的功能
替代JSP页面中的复杂代码
EL的语法
${ EL exprission}
${ bean.name } 或 ${ bean['name'] }//${bean.name}实质是调用bean的getName()方法
//输出姓名显示
<%Map names = new HashMap();names.put("one","LiYang");names.put("two","WangHua");request.setAttribute("names",names);
%>
姓名：${}<br/>
姓名：${names["two"] }<br/>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FUFQlCLt-1635413245722)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210924143033016.png)]
//对象取值写法：
${ bean.name } 或 ${ bean['name'] }//实际上改代码的完整形式是：${requestScope.bean.name}
${ username }
//直接使用变量名获取值$，这种方法其实也可以，但是最好还是带上前边的隐式对象，不加隐式对象的话，EL会在pageScope，requstScope，sessionScope，applicationScope这些隐式对象中循环查找该参数名
//加上隐式对象的作用就是，指明该参数是从哪个方向获取的，要去哪个隐式对象中取查找
//如果该参数是从session中传过来的，那么就调用
${ sessionScope.username }
//这样就可以获取session中该参数名的值
//一般后端向前端穿参数尽量使用requstScope| 属性范围 | EL****中的名称 |
|---|---|
| page | pageScope,例如${pageScope.username}，表示在page范围内查找username变量，找不到返回Null |
| request | requstScope |
| session | sessionScope |
| application | applicationScope |
${param.参数}
//param是用来接受页面传来的参数值${paramValues.参数}
//param是用来接受页面传来的集合对象值。如：list等//Param:
${param.name}
//等价于
Parameter("name");//paramValues :
${params.name}
//等价于
ParameterValues（"name"）;
//如：${paramValues.habit[0]} ${paramValues.habit[1]}
注意：
/*
注意param
p a r a m . n a m e 等 价 于 r e q u e s t . ∗ ∗ g e t P a r a m t e r ∗ ∗ ( " n a m e " ) ， 这 两 种 方 法 一 般 用 于 服 务 器 从 页 面 或 者 客 户 端 获 取 的 内 容 。 ∗ ∗ {param.name} 等价于 request.**getParamter**("name")，这两种方法一般用于服务器从页面或者客户端获取的内容。 * * param.name等价于request.∗∗getParamter∗∗("name")，这两种方法一般用于服务器从页面或者客户端获取的内容。∗∗{requestScope.name} 等价于 request.getAttribute**(“name”)，一般是从服务器传递结果到页面，在页面中取出服务器保存的值。
*/
| 对象名称 | 说 明 |
|---|---|
| pageScope | 返回页面范围的变量名，这些名称已映射至相应的值 |
| requestScope | 返回请求范围的变量名，这些名称已映射至相应的值 |
| sessionScope | 返回会话范围的变量名，这些名称已映射至相应的值 |
| applicationScope | 返回应用范围内的变量，并将变量名映射至相应的值 |
| param | 返回客户端的请求参数的字符串值 |
| paramValues | 返回映射至客户端的请求参数的一组值 |
| pageContext | 提供对用户请求和页面信息的访问 |
得到请求的url但是不包含参数 ：
/${questURL}：
<c:out value=“${questURL}”/></br>
得到web应用的名称：
/${tPath}：
<c:out value="${tPath}"/></br>
得到请求方法：
/${hod}：
<c:out value=“${hod}”/></br>
得到用户：
/${User}：
<c:out value=“${User}”/></br>
得到用户的IP地址：
/${Addr }：
<c:out value=“${Addr}”/></br>
得到sessionID
/${pageContext.session.id}：
<c:out value="${pageContext.session.id}"/></br>empty 运算符:${empty 对象}
判断对象是否为空
| 算数操作符 | 说 明 |
|---|---|
| 加法 | + |
| 减法 | _ |
| 乘法 | ***** |
| 除法 | / 和 div |
| 取余 | % 和 mod |
| 逻辑操作符 | 说 明 |
|---|---|
| 与 | && 和 and |
| 或 | || 和 or |
| 非 | ! 和 not |
| 关系操作符 | 说 明 |
|---|---|
| 等于 | == 和 eq |
| 不等于 | != 和 ne |
| 小于 | < 和 lt |
| 大于 | > 和 gt |
| 小于等于 | <= 和 le |
| 大于等于 | >= 和 ge |
| 操作符 | 描述 |
|---|---|
| . | 访问一个Bean属性或者一个映射条目 |
| [] | 访问一个数组或者链表的元素 |
| ( ) | 组织一个子表达式以改变优先级 |
| + | 加 |
| - | 减或负 |
| * | 乘 |
| / or div | 除 |
| % or mod | 取模 |
| == or eq | 测试是否相等 |
| != or ne | 测试是否不等 |
| < or lt | 测试是否小于 |
| > or gt | 测试是否大于 |
| <= or le | 测试是否小于等于 |
| >= or ge | 测试是否大于等于 |
| && or and | 测试逻辑与 |
| || or or | 测试逻辑或 |
| ! or not | 测试取反 |
| empty | 测试是否空值 |
JSTL（JavaServerPages Standard Tag Library）JSP标准标签库
使用JSTL实现JSP页面中逻辑处理
JSTL通常会与EL表达式合作实现JSP页面的编码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y7h2kqF1-1635413245724)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210924145547381.png)]
项目中如果要使用JSTL和EL表达式,就必须导入jstl.jar和standard.jar文件
……
<%@ taglib uri="" prefix="c"%>
……
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ERgH3x85-1635413245726)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210924161427368.png)]
set：设置指定范围内的变量值
<c:set var= "example" value="${100+1}" scope="session" />
<!--向session中，存入一个名为 example 的参数，值为101-->
out：计算表达式并将结果输出显示
<c:out value="${example}"/>
<!--在页面上输入 名字为example的参数-->
remove：删除指定范围内的变量
<c:remove var= "example" scope="session"/>
<!--在session中删除名为example 的参数-->
<c:out>标签有如下属性：
| 属性 | 描述 | 是否必要 | 默认值 |
|---|---|---|---|
| value | 要输出的内容 | 是 | 无 |
| default | 输出的默认值 | 否 | 主体中的内容 |
| escapeXml | 是否忽略XML特殊字符 | 否 | true |
<body>
<!-- 设置之前应该是空值 -->
设置变量之前的值是：msg=<c:out value="${msg}" default="null"/>
<!-- 给变量msg设值 -->
<c:set var="msg" value="Hello ACCP!" scope="page"></c:set>
<!-- 此时msg的值应该是上面设置的"已经不是空值了" -->
设置新值以后：msg=<c:out value="${msg}"></c:out><br>
<!-- 把 msg变量从page范围内移除-->
<c:remove var="msg" scope="page"/>
<!-- 此时msg的值应该显示null -->
移除变量msg以后：msg=<c:outvalue="${msg}“ default="null"/>
</body> if：if标签用于判断条件是否成，与Java中的If语句做用用相同
语法
<%@ taglib uri="" prefix="c"%><c:if test="codition" var="name" scope="applicationArea" >
<!--test="codition" 判断条件表达式返回true/false var="name" 变量名用于保存返回的true/falsescope="applicationArea" 指定var变量的作用域
--></c:if> <c:choose>：choose用于多重选择执行代码，与Java中的If—else结构;该标签没有任何属性,但必须结合<c:when>和<c:otherwise>标签.
<c:choose><c:when test="${测试条件}"><!--满足测试条件,则执行改段代码--></c:when>......<c:otherwise><!--不满足以上条件,则执行该段代码--></c:otherwise>
</c:choose><body>
<c:set var="isLogin" value="${not empty sessionScope.userId}"/>
<c:if test="${not islogin}">
<!--登录表单使用条件标签判断是否已登录
--></form>
</c:if>
<c:if test="${isLogin}">
已经登录！
</c:if>
</body>| 属性名 | 类型 | 描述 |
|---|---|---|
| items | 数值,集合等 | 将要迭代的集合对象 |
| var | String | 是迭代到的元素的引用 |
| varStatus | String | 保存当前迭代状态 |
| begin | int | 指定开始的索引 |
| end | int | 指定迭代结束的索引 |
| step | int | 表示循环的步长 |
迭代标签
实现对集合中对象的遍历
语法:
<c:forEach items=${list} var=name begin=start end=end step=count>
<!--
items指定要遍历的集合对象
var指定集合内数据的变量名称,即迭代时集合内当前的变量名称
begin指定从集合的第几位开始 start从头开始迭代
end指定迭代到集合的第几位结束 end迭代到最后
Step指定迭代的增量 count迭代增量时下一个forEach是for循环语句的变体，实现 。集合对象(可以是list、数组等)的处理
-->…循环体代码…
</forEach>
index.jsp
<c:choose> <!--choose标签多条件标签 相当于if...else..--><c:when test="${empty userList}"><!--空判断，如果userList为空，则返回true-->没有你想要的数据<br></c:when><c:otherwise><!--上边条件都不成立，则执行该标签下的代码，即userList不为空--><c:forEach items="${userList}" var="u" varStatus="s"><!--循环迭代userList，迭代过程中使用u来代userlist中的变量varStatus为s，即用s来获取当前迭代的状态--><c:choose><c:when test="${s.count % 2 == 0}"><!--求余判断，如果当前迭代的s的行数能整除2时，则返回true--><font color=red>编号：${u.id} 用户名 ：${u.username } 年龄：${u.age }<br></font></c:when><c:otherwise><!--当前行数除2求余不为0-->编号：${u.id} 用户名 ：${u.username } 年龄：${u.age }<br/></c:otherwise></c:choose></c:forEach></c:otherwise>
</c:choose>EL（Expression Language）即表达式语言，是一种简单的数据访问语言。
J a v a B e a n . p r o p e r t y N a m e ∗ ∗ 或 ∗ ∗ {JavaBean.propertyName}**或** JavaBean.propertyName∗∗或∗∗ {JavaBean[“propertyName”]}
pageScope、requestScope、sessionScope、applicationScope来访问作用域范围内容的数据。
JSTL (JavaServer Pages Standard Tag Library)即JSP标准标签库，包含用于编写和开发 JSP页面的一组标准标签，它可以为用户提供一个无脚本环境。
JSTL常用标签有如下3类：
通用标签：<c:out>、<c:set>和<c:remove>
条件标签：<c:if>、<c:choose>、<c:when>和<c:otherwise>
迭代标签：<c:forEach>
什么是Filter？
依据字面上的中文意思为过滤器。
Filter的作用
当用户的请求到达指定的URL之前，可以借助Filter来改变这些请求的内容；同样地，当响应结果到达客户端之前，可以使用Filter修改输出的内容。
什么是FilterChain（过滤器链）？
一个FilterChain包含多个Filter。
Filter生命周期
实例化——》初始化——》过滤——》销毁
FilterChain过滤链
一个过滤器链（FilterChain），在请求到达请求资源前会依次经过链中的所有过滤器，配置在前的Filter先执行，而请求处理完成后，会按照相反的顺序再次经过链中的所有过滤器。
| Filter接口方法 | 作用 |
|---|---|
| Init(FilterConfig) | 初始化 |
| doFilter(ServletRequest,ServletRespone, | |
| FilterChain) | 过滤 |
| destory() | 销毁 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SIJfbK1y-1635413245728)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210927141809261.png)]
import javax.servlet.*;
import java.io.IOException;public class Encodingfilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {//注意ServletResponse，ServletRequest是//HttpServletRequest和HttpServletResponse的父接口//使用时需要强转}@Overridepublic void destroy() {}
}
XML配置
<filter><filter-name>Logger</filter-name><filter-class>com.util.LoggerFilter</filter-class>
</filter><filter-mapping><filter-name>Logger</filter-name><url-pattern>/*</url-pattern>
</filter-mapping>
<!--与Servlet配置相似-->
注解
@WebFilter(urlpatterns = "/*")//fileName是类名
@WebFilter(urlpatterns = "/*" filterName = "Encodingfilter")加载:对于到达系统的所有请求,过滤器收集诸如浏览器类型,一天中的时间等相关信息,并对它们进行日志记录
性能:过滤器在内容通过线路传来并在到达Servlet和JSP页面之前解压缩该内容,然后再取得响应内容,并在响应内容发送到客户机器之前将它转换为压缩格式
安全:过滤器处理身份验证令牌的管理,并适当地限制安全资源的访问,提示用户进行身份验证或将它们指引到第三方进行身份验证.
会话管理:将Servlet和JSP页面与会话处理代码混杂在一起可能带来相当大的麻烦.使用过滤器来管理会话可以让WEB页面集中精力考虑内容显示和委托处理,而不必担心会话管理的细节.
Listener是Servlet规范的另一个高级特性，用于监听Java Web程序中的事件，例如创建、销毁session、request、context等，并触发相应的事件，事件发生的时候会自动触发该事件对应的Listener。
Java Web程序也一样，使用Listener和Event完成相应事件的处理。
②监听器配置l
<!--application监听器配置-->
<listener>
<listener-class>com.javaweb.listener.ApplicationListener</listener-class>
</listener>application监听器的作用
监听的Web应用的生命周期。
用于处理应用程序启动初始化和关闭释放资源的问题
实现
实现ServletContextListener接口
**
注：此处是很好的实体类创建的地方，spring框架也是在这里进行了类的管理创建
**
public class ApplicationListener implements ServletContextListener {//监听服务器关闭时执行@Overridepublic void contextDestroyed(ServletContextEvent sct) {System.out.println("应用关闭-->"+new Date().toLocaleString());}//监听服务器开启时执行@Overridepublic void contextInitialized(ServletContextEvent sct) {System.out.println("应用启动-->"+new Date().toLocaleString());//得到应用路径String path = ServletContext().getContextPath();System.out.println("应用是："+path);}
}
| 方法 | 描述 |
|---|---|
| public void sessionCreated(HttpSessionEvent hse) | session创建时调用 |
| public void sessionDestroyed(HttpSessionEvent hse) | session销毁时调用 |
public class MySessionListener implements HttpSessionListener {@Overridepublic void sessionCreated(HttpSessionEvent hse) {String dateTime = new Date().toLocaleString();HttpSession session = Session();System.out.println(dateTime+" 创建 sessiom,ID："&#Id());}@Overridepublic void sessionDestroyed(HttpSessionEvent hse) {String dateTime = new Date().toLocaleString();HttpSession session = Session();System.out.println(dateTime+" 销毁session,ID："&#Id());}
| 方法 | 描述 |
|---|---|
| public void attributeAdded(HttpSessionBindingEvent hsb) | 增加属性时调用 |
| public void attributeRemoved(HttpSessionBindingEvent hsb) | 删除属性时调用 |
| public void attributeReplaced(HttpSessionBindingEvent hsb) | 替换属性时调用 |
public class MySessionAttrListener implements HttpSessionAttributeListener {@Overridepublic void attributeAdded(HttpSessionBindingEvent hsb) {//得到当前sessionSystem.out.print("session ID："&#Session().getId());//获取属性名和属性值System.out.println(" 增加属性："&#Name()+",属性值是："&#Value());
}
public void attributeRemoved(HttpSessionBindingEvent hsb) {System.out.print("session ID："&#Session().getId());System.out.println(" 删除属性："&#Name()+",属性值是："&#Value());}
public void attributeReplaced(HttpSessionBindingEvent hsb) {System.out.print("session ID："&#Session().getId());System.out.println(" 替换属性："&#Name()+",属性值是："&#Value());}
}
public void doFilter(ServletRequest request, ServletResponse response,FilterChain chain) throws IOException, ServletException {//设置请求字符集request.setCharacterEncoding("GBK");//请求向下传递chain.doFilter(request, response);
}
要完成在线用户统计功能的监听器，需要实现如下3个接口。
ServletContextListener接口
使用此接口的作用是：在应用初始化的时候向application中添加一个空的Set集合用来保存在线用户。
HttpSessionAttributeListener接口
使用此接口的作用是：当用户登陆成功后，会向session中添加一个属性用来保存用户信息，这样就表示新用户登陆，之后把用户保存在在线用户列表中。
HttpSessionListener接口
使用此接口的作用是：当用户注销后将用户信息从用户列表中删除。
d.Filter;d.entity.User;import javax.servlet.*;
import javax.servlet.http.*;
import java.util.Date;
import java.util.HashSet;
import java.util.Set;public class Encodingfilter implements ServletContextListener, HttpSessionListener, HttpSessionAttributeListener {javax.servlet.ServletContext Application;//Application监听器@Overridepublic void contextInitialized(ServletContextEvent sce) {String path = ServletContext().getContextPath();System.out.println("应用开启：时间："+new Date().toLocaleString());System.out.println("应用开启：路径："+path);Application = ServletContext();Set<User> onLineUsers = new HashSet<>();//开启服务器添加在线用户集合Application.setAttribute("onLineUsers",onLineUsers);}@Overridepublic void contextDestroyed(ServletContextEvent sce) {String path = ServletContext().getContextPath();System.out.println("应用关闭：时间："+new Date().toLocaleString());System.out.println("应用关闭：路径："+path);Application = ServletContext();//关闭服务器后删除在线用户集合veAttribute("onLineUsers");}//Session监听器@Overridepublic void sessionCreated(HttpSessionEvent se) {
// User user = (User) se.getSession().getAttribute("user");System.out.println("创建Session：");
// //将session添加如onLineUsers
// Set<User> onLineUsers = (Set<User>) Attribute("onLineUsers");
// onLineUsers.add(user);}@Overridepublic void sessionDestroyed(HttpSessionEvent se) {HttpSession session &#Session();User user = (User) Attribute("user");System.out.println("删除Session："&#String());//将session从onLineUsers中删除Set<User> onLineUsers = (Set<User>) Attribute("onLineUsers");ve(user);}//session属性监听@Overridepublic void attributeAdded(HttpSessionBindingEvent se) {System.out.println("添加Session属性：");User user = (User) se.getSession().getAttribute("user");//将session添加如onLineUsersSet<User> onLineUsers = (Set<User>) Attribute("onLineUsers");onLineUsers.add(user);}@Overridepublic void attributeRemoved(HttpSessionBindingEvent se) {System.out.println("移除Session属性：");User user = (User) se.getSession().getAttribute("user");//将session添加如onLineUsersSet<User> onLineUsers = (Set<User>) Attribute("onLineUsers");ve(user);}@Overridepublic void attributeReplaced(HttpSessionBindingEvent se) {System.out.println("替换Session属性：");User user = (User) se.getSession().getAttribute("user");//将session添加如onLineUsersSet<User> onLineUsers = (Set<User>) Attribute("onLineUsers");onLineUsers.add(user);}
}发送方式不同
服务器响应不同
客户端处理响应的方式不同
Ajax：只刷新局部页面的技术
Asynchr onous JavaScript And Xml
异步的
JavaScript：更新局部的网页
XML：一般用于请求数据和响应数据的封装
XMLHttpRequest对象：发送请求到服务器并获得返回结果 //Ajax技术的核心
CSS：美化页面样式
异步：发送请求后不等返回结果，由回调函数处理结果
| 方法名 | 说 明 |
|---|---|
| open(method,URL,async) | 建立与服务器的连接 method参数指定请求的HTTP方法,值是GET或POST URL参数指定请求的地址， async参数指定是否使用异步请求，其值为true或false |
| send(content) | 发送请求 content参数指定请求的参数， 格式为String：“name1=”+value1+"&name2="+value2 |
| setRequestHeader(header,value) | 设置请求的头信息 ,使用post提交时使用，防止传递中出现错误、乱码等问题， |
onreadystatechange：指定回调函数
readystate: XMLHttpRequest的状态信息 即就绪状态码
status：HTTP的状态码
responseText：获得响应的文本内容
responseXML：获得响应的XML文档对象
| 就绪状态码 | 说 明 |
|---|---|
| 0 | XMLHttpRequest对象没有完成初始化 |
| 1 | XMLHttpRequest对象开始发送请求 |
| 2 | XMLHttpRequest对象的请求发送完成 |
| 3 | XMLHttpRequest对象开始读取响应，还没有结束 |
| 4 | XMLHttpRequest对象读取响应结束 |
| HTTP的状态码 | 说明 |
|---|---|
| 200 | 服务器响应正常 |
| 400 | 无法找到请求的资源 |
| 403 | 没有访问权限 |
| 404 | 访问的资源不存在 |
| 500 | 服务器内部错误 |
在使用时一般判断的是是否读取响应结束的状态：4，和服务器响应正常的Http状态码：200；
在回调函数中，如果两个状态都匹配即就绪状态是4而且状态码是200，才可以处理服务器数据。
var xhr;//初始化XMLHttpRequestfunction createXHR(){try{return new XMLHttpRequest(); //初始化ie7版本之后,火狐,谷歌//正常状态返回的都是这个}catch(e){return new ActiveXObject("Microsoft.XMLHTTP"); //ie7以前的版本//这个是要兼容之前版本的IE}}GET方式：
function checkName(){//XmlHttpRequest对象初始化xhr=createXHR();//获取需要传递的参数var name&#ElementById("username").value;//设置回调函数adystatechange=callback; //此时使用的是GET方式提交，所以参数的设置直接跟在URL后边，设置使用异步truexhr.open("GET","CheckUserNameServlet?username="+name,true);//使用GET方式提交后不需要在send中设置参数了，传递值设置为nullxhr.send(null); }function callback(){//回调函数adyState==4 && xhr.status==200){var msg&#ElementById("msg");var result&#sponseText;//使用responseText来获取返回值if(result=="true"){msg.innerHTML="用户名已经存在";}else{msg.innerHTML="用户名可以使用";}}}
POST
function searchSuggest(){//XmlHttpRequest对象初始化xhr=createXHR();//获取需要传递的参数var keyword&#ElementById("txtSearch").value;//设置回调函数adystatechange=callback;//打开链接，传递方式为POST，POST提交时只需要写名地址不需要加参数xhr.open("POST","SuggestServlet",true);//post提交时防止发生错误设置请求头参数。。。。。固定格式xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//POST提交时添加参数xhr.send("keyword="+keyword);
}
Ajax（Asynchronous JavaScript And XML）。
Ajax并不是一种新技术，而是整合几种现有技术：JavaScript、XML和CSS，其中主要是JavaScript。
| XMLHttpRequest对象的属性、方法 | 说明 |
|---|---|
| onreadystatechange 属性 | 设置传递后需要调用的回调参数//只写参数名即可 |
| open( ) 方法 | 建立连接，参数有method：提交方式、URL：地址、async：是否使用异步传递（true/false） |
| send( ) 方法 | 传递参数 POST传递时需要传递参数 GET传递时不需要设置为null |
| readyState 属性 | 就绪状态码，读取响应完成的值为4 |
| status 属性 | HTTP状态码，服务器响应正常为200 |
| responseText 属性 | 获取响应返回的文本内容 |
| responseXML 属性 | 获得响应返回的XML文档对象 |
| setRequestHeader（） 方法 | 使用POST方式提交时需要设置请求头 |
get:
<(url, [data], [callback], [type])post:
Query.post(url, [data], [callback], [type])
| 参数名称 | 类型 | 说明 |
|---|---|---|
| url | String | 请求的URL地址 |
| data（可选） | Map | 要发送到服务器的key/value数据 |
| callback（可选） | Function | 响应成功时的回调函数 |
| type（可选） | String | 返回内容格式，可以是：xml, html, script, json, text, _default |
$("#test").click(function () {$.get("testServlet",{type:"test"},function (data) {console.log(data.name);});},"text")
//注意，返回类型是String，说明时需要加上"";
返回类型补充说明
如果前端返回类型type没有选的话，默认为text，如果想要使用json格式则需要在后端加上设置格式
String type= Parameter("type");PrintWriter out= Writer();resp.setContentType("application/json");//设置响应response的格式为jsonif(type!=null){if(type.equals("test")){out.write("{"name":"小明"}");}else{out.write("2");}}else{out.write("0");}
$.ajax()
格式：
$.ajax({type:"POST",url:"xxxxxxxxx",data:{name:$("name").val(),password:$("password").val()},datatype:"text",success:function (data){ //成功后触发if(data=="true"){alter("成功");}else{alter("失败");}},error:function(jqxhr,textstatus,errorThrown){ //发生错误时触发console.log("错误");}})
格式为key：value，使用时key要加上"“号，value为int时不需要加”“号，value为String时需要加”"号，
当value为数组时需要加[ ]号，json格式整体加{ }号。
{
“int”：value,
“String”:“value”
“list”:[
value,
value
]
}
{"key1":1,//此时key1的值为int类型：1"key2":"1",//此时key2的值为String类型："1""key3": [1, 2, 3, 4]//此时key3的值为int[]数组
}
lib中已收录，下载过H-ui框架，无需单独下载，但页面需要单独引入。单独下载地址 layer_v3.1.1.js
layer.js是由前端大牛贤心编写的web弹窗插件。
1、layer.js依赖jquery或者zepto.js。
<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
js调用
layer.open({ title: '在线调试' ,content: '可以填写任意的layer代码'});
打开弹窗
| 属性 | 默认值 | 描述 | 备注 |
|---|---|---|---|
| type | 0 | 类型 | 0 信息框，默认 | 1 页面层 | 2 iframe层 | 3 加载层 | 4 tips层 |
| title | “信息” | 标题 | 支持三种类型的值。字符串："我是标题"数组：[‘文本’, ‘font-size:18px;’]布尔值：false |
| content | “” | 内容 | 支持：String、html、DOM、URL、数组 |
| skin | “” | 样式类名 | 可以定制layer皮肤。 |
| area | “auto” | 宽高 | 数组 [‘500px’, ‘300px’] |
| offset | 垂直水平居中 | 坐标 | String/Array。[‘100px’, ‘50px’] |
| icon | -1 | 图标 | -1（信息框）/0（加载层） |
| btn | “确认” | 按钮 | btn: [‘按钮一’, ‘按钮二’, ‘按钮三’] //可以无限个按钮。,yes: function(index, layero){ //按钮【按钮一】的回调},btn2: function(index, layero){ //按钮【按钮二】的回调 //return false 开启该代码可禁止点击该按钮关闭},btn3: function(index, layero){ //按钮【按钮三】的回调 //return false 开启该代码可禁止点击该按钮关闭},cancel: function(){ //右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭} |
| btnAlign | r | 按钮排列 | “l” 左对齐 | “c” 居中对齐 | “r” 右对齐 |
| closeBtn | 1 | 关闭按钮 | 两种风格：1 | 2 | 0 不显示 |
| shade | 0.3 透明度的黑色背景（’#000’） | 遮罩 | String/Array/Boolean[0.8, ‘#393D49’]0 不显示遮罩。 |
| shadeClose | false | 是否点击遮罩关闭 | |
| time | 0 不自动关闭 | 自动关闭所需毫秒 | 5000 5秒后自动关闭 |
| id | 用于控制弹层唯一标识 | String | |
| anim | 0 | 弹出动画 | 0 平滑放大 | 1 从上掉落 | 2 从最底部往上滑入 | 3 从左滑入 | 4 从左翻滚 | 5 渐显 | 6 抖动 |
| isOutAnim | true | 关闭动画 | |
| maxmin | false | 最大最小化 | |
| fixed | true | 固定 | |
| resize | true | 是否允许拉伸 | |
| resizing | null | 监听窗口拉伸动作 | 回调函数。 |
| scrollbar | true | 是否允许浏览器出现滚动条 | |
| maxWidth | 360 | 最大宽度 | 只有当area: 'auto’时，maxWidth的设定才有效。 |
| maxHeight | 最大高度 | 只有当高度自适应时，maxHeight的设定才有效。 | |
| zIndex | 19891014 贤心生日 | 层叠顺序 | 用于解决和其它组件的层叠冲突。 |
| move | ‘.layui-layer-title’ | 触发拖动的元素 | String/DOM/Boolean。默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: ‘.mine-move’。你还配置设定move: false |
| moveOut | false | 是否允许拖拽到窗口外 | 默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定moveOut: true即可。 |
| moveEnd | null | 拖动完毕后的回调方法 | 回调函数。 |
| tips | 2 | 方向和颜色 | Number/Array。tips层的私有参数。支持上右下左四个方向 |
| tipsMore | false | 是否允许多个tips | 允许多个意味着不会销毁之前的tips层。 |
| success | null | 层弹出后的成功回调方法 | 回调函数 |
| yes | null | 确定按钮回调方法 | 回调函数 |
| cancel | null | 右上角关闭按钮触发的回调 | 回调函数，携带两个参数。当前层索引参数（index）、当前层的DOM对象（layero）。如果不想关闭，return false即可。 |
| end | null | 层销毁后触发的回调 | 回调函数 |
| full/min/restore | null | 分别代表最大化、最小化、还原 后触发的回调 | 回调函数 |
| fig(options) | 初始化全局配置 | ||
| layer.open(options) | 核心方法 | ||
| layer.alert(content, options, yes) | 普通信息框 | ||
| firm(content, options, yes, cancel) | 询问框 | ||
| layer.msg(content, options, end) | 提示框 | ||
| layer.load(icon, options) | 加载层 | ||
| layer.tips(content, follow, options) | tips层 | ||
| layer.close(index) | 关闭特定层 | ||
| layer.closeAll(type) | 关闭所有层 | “dialog” 关闭信息框 | “page” 关闭所有页面层 | “iframe” 关闭所有的iframe层 | “loading” 关闭加载层 | “tips” 关闭所有的tips层 | |
| layer.style(index, cssStyle) | 重新定义层的样式 | ||
| layer.title(title, index) | 改变层的标题 | ||
| ChildFrame(selector, index) | 获取iframe页的DOM | ||
| FrameIndex(windowName) | 获取特定iframe层的索引 | ||
| layer.iframeAuto(index) | 指定iframe层自适应 | ||
| layer.iframeSrc(index, url) | 重置特定iframe url | ||
| layer.setTop(layero) | 置顶当前窗口 | ||
| layer.full()、layer.min()、store() | 手工执行最大小化 | ||
| layer.prompt(options, yes) | 输入层 | ||
| layer.tab(options) | tab层 | ||
| layer.photos(options) | 相册层 |
12.富文本编辑器
<script src="@latest/dist/wangEditor.min.js"></script>
<div id="div1"><p>新闻内容</p>
</div>
<textarea name="context" id="text1" style="width:100%; height:200px;display: none"></textarea>
<script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')const $text1 = $('#text1')hange = function (html) {// 第二步，监控变化，同步更新到 textarea$text1.val(html)}ate()// 第一步，初始化 textarea 的值$text1.html());
</script>
本文发布于:2024-01-29 08:30:43，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170648824814002.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
