导图社区 Javaweb流程
javase基础学习之后,下一步就是进入网页的编写,javaweb是过渡,从java基础到SSM框架或是小程序等等。
编辑于2020-11-02 19:51:05Java是一门面向对象的编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程
用多线程只有一个目的,那就是更好的利用cpu的资源,因为所有的多线程代码都可以用单线程来实现。说这个话其实只有一半对,因为反应“多角色”的程序代码,最起码每个角色要给他一个线程吧,否则连实际场景都无法模拟,当然也没法说能用单线程来实现:比如最常见的“生产者,消费者模型”。
平和保存和搜索的一些好用的网站,分享一波,好用拿走。
社区模板帮助中心,点此进入>>
Java是一门面向对象的编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程
用多线程只有一个目的,那就是更好的利用cpu的资源,因为所有的多线程代码都可以用单线程来实现。说这个话其实只有一半对,因为反应“多角色”的程序代码,最起码每个角色要给他一个线程吧,否则连实际场景都无法模拟,当然也没法说能用单线程来实现:比如最常见的“生产者,消费者模型”。
平和保存和搜索的一些好用的网站,分享一波,好用拿走。
Javaweb流程
第一阶段:Servlet
1.JSP+JDBC 2.JSP+JavaBean+JDBC 3.JSP+Servlet+JavaBean+JDBC 4.JSP+Struts2+JavaBean+JDBC 5.Hibernate代替JDBC 6.MVC-DAO 整合Hibernate+Struts2 7.Spring 8.AJAX
web.xml
<servlet> <servlet-name>HelloWorld</servlet-name> <servlet-class>com.demo.Servlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>HelloWorld</servlet-name> <url-pattern>/hello</url-pattern> </servlet-mapping>
maven
<dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency>
Servlet.class
public class HelloWorld extends HttpServlet { @Override public void doPost(HttpServletRequest request, HttpServletResponse response) {}//doPost
获取参数和属性
request.getParameter(""); request.getAttribute("");
转发
response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<!DOCTYPE HTML>");
out.flush(); out.close();
request.setAttribute("list",bList);//list和jsp中一致${list} request.getRequestDispatcher("/list.jsp").forward(request,response)
添加JDBC操作,并将结果放在out.print中直接返回给页面
Tomcat
过滤器:Filter
public class HelloFilter implements Filter { @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { System.out.println("1.请求的时候运行一次过滤器"); servletRequest.setAttribute("2.phone", "1111");//将请求的2.phone的对应值修改为1111 chain.doFilter(request, response);//过滤之后继续向下执行. System.out.println("3.响应的时候运行一次过滤器"); } }
监听器:Listener
postman
apiman
封装JDBC
创建类,封装驱动和连接,以及关闭
使用集合List处理结果集
*使用构造方法
List<Blog> blogs = new ArrayList<>(); while(rs.next()){ Blog blog = new Blog(rs.getString(""),rs.getInt()); //blog.setA(rs.getString(""));blog.setB(rs.getInt()); blogs.add(blog); }
封装数据操作Dao
增删改查
MVC设计模式
前端获取数据参数,调用视图层中的接口
视图层调用service层处理逻辑
service层调用dao层执行SQL语句
model层与数据表对应
第二阶段JSP
动态输出HTML
就是在HTML中编写java代码<%java代码%>
语法:<%out.print(request.getParameter(""))%>
表单提交流程
web.xml中的Servlet映射:form--formServlet.class--转发到form.jsp--form标签中的action属性="请求后端的地址:hello"--2.映射Servlet到helloServlet.class--作判断:是否转发到list.jsp
Form action="请求后台的地址"
/绝对路径
jSP内置对象(9)
request/response/session/out/page/config/pageContext/application/exception
https://blog.csdn.net/pan_junbiao/article/details/87916435
EL表达式
EL:Expression Language-使JSP书写更加方便
代替JSP的<%=java表达式%>
语法:${属性/参数}
${param.username}
作用
用于查询数据,并在页面上输出数据.可以输出常量/变量,以及简单运算
JSTL
JSP标准标签函式库(JavaServer Pages Standard Tag Library)
用于替代JSP中所有的Java代码
代替<%%>
语法:<c:if test="true/false">
1.导入jar包
2.引入库
3.使用标签
MVC模式
MVC是Model-View-Controller的简称,即模型-视图-控制器。
MVC思想
Controller层
Controller层负责请求和转发,接受页面传来的参数,传递给Service处理, 接收到返回值再传递给页面.
service层
service层叫服务层,粗略的理解就是对dao进一步封装,封装为一个服务, 需要事物控制,逻辑处理.
dao层
dao层叫数据访问层,全称data access object,属于一种较底层, 比较基础的SQL操作,具体到对于某个表的增删改查,dao与表相对应, 建议dao只做原子操作.
entity层
entity层叫实体层,entity包中的类必须与数据库表一一对应
AJAX
1.什么是AJAX
AJAX: Asynchronous JavaScript And XML AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 它不是一个新技术 是几个技术的综合 以JavaScript 作为主要操作语言 以HTML 为骨架 以CSS作为渲染手段 以XML作为传输载体(以JSON) 以异步请求对象(XMLHttpRequest) 作为发送请求和接收响应的对象 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
2.AJAX特点和作用
特点: AJAX是基于现有的Internet标准,并且联合使用它们: XMLHttpRequest 对象 (异步的与服务器交换数据) JavaScript/DOM (信息显示/交互) CSS (给数据定义样式) XML (作为转换数据的格式) 作用: 异步请求 和 响应 局部刷新
3.创建AJXA对象
AJAX - 创建 XMLHttpRequest 对象: XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 语法:variable=new XMLHttpRequest(); 实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//替换方式 } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);//请求后端的地址 xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html>
js默认封装的原生态AJAX
*一般不会使用:JQuery封装/axios封装
4.XHR服务器请求
XMLHttpRequest向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); open(method,url,async); 规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步) send(String); 将请求发送到服务器.
用于和服务器交换数据。
post/get
GET 还是 POST? 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。 然而,在以下情况中,请使用 POST 请求: 无法使用缓存文件(更新服务器上的文件或数据库) 向服务器发送大量数据(POST 没有数据量限制) 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠. get 缓存:增加唯一ID 原:xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send(); 改:xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true); xmlhttp.send(); post 如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据: 实例 xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford"); -- setRequestHeader(header,value) 向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值
5.XHR响应
responseText:获得字符串形式的响应数据。
responseText 属性: 如果来自服务器的响应并非 XML,请使用 responseText 属性。 responseText 属性返回字符串形式的响应,因此您可以这样使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html>
responseXML:获得 XML 形式的响应数据。
responseXML 属性: 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; var txt,x,i; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt; } } xmlhttp.open("GET","cd_catalog.xml",true); xmlhttp.send(); } </script> </head> <body> <h2>我收藏的 CD :</h2> <div id="myDiv"></div> <button type="button" onclick="loadXMLDoc()">获取我的 CD</button> </body> </html>
XMLHttpRequest 的API
var xhr = getXHR(); 准备发送请求 xhr.open(type,url,asyn); type就是请求的类型 有 get post put delete url 请求的路径 asyn 是否异步 默认是 true 注册数据处理函数 xhr.onreadystatechange=函数; 函数可以是一个函数的名字 或者 匿名函数 xhr.onreadystatechange=function(){ // readyState 请求的状态 status http的状态码 if(xhr.readyState==4 && xhr.status == 200){ // 获取返回的数据 var text = xhr.responseText; } }; 发送请求 xhr.send(null);
6.XHR readyState
AJAX - onreadystatechange 事件: 当请求被发送到服务器时,需要执行一些基于响应的任务。 每当 readyState 改变时,就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性: onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 status: 200: "OK" 404: 未找到页面 在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。 当 readyState 等于 4 且状态为 200 时,表示响应已就绪. 注意: onreadystatechange 事件被触发 4 次(0 - 4), 分别是: 0-1、1-2、2-3、3-4,对应着 readyState 的每个变化。
页面存在多个AJAX:使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。 如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同): RUNOOB.COM <!DOCTYPE html> <html><head> <script> var xmlhttp; function loadXMLDoc(url,cfunc){ if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 代码 xmlhttp=new XMLHttpRequest(); }else{ // IE6, IE5 代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction(){ loadXMLDoc("/try/ajax/ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div> <button type="button" onclick="myFunction()">修改内容</button> </body> </html>
服务器状态码
0:请求未初始化(还没有调用 open())。 1:请求已经建立,但是还没有发送(还没有调用 send())。 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 4:响应已完成;您可以获取并使用服务器的响应了。 xmlhttp.status的值及解释: 100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本 200——交易成功 201——提示知道新文件的URL 202——接受和处理、但处理未完成 203——返回信息不确定或不完整 204——请求收到,但返回信息为空 205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件 206——服务器已经完成了部分用户的GET请求 300——请求的资源可在多处得到 301——删除请求数据 302——在其他地址发现了请求数据 303——建议客户访问其他URL或访问方式 304——客户端已经执行了GET,但文件未变化 305——请求的资源必须从服务器指定的地址得到 306——前一版本HTTP中使用的代码,现行版本中不再使用 307——申明请求的资源临时性删除 400——错误请求,如语法错误 401——请求授权失败 402——保留有效ChargeTo头响应 403——请求不允许 404——没有发现文件、查询或URl 405——用户在Request-Line字段定义的方法不允许 406——根据用户发送的Accept拖,请求资源不可访问 407——类似401,用户必须首先在代理服务器上得到授权 408——客户端没有在用户指定的饿时间内完成请求 409——对当前资源状态,请求不能完成 410——服务器上不再有此资源且无进一步的参考地址 411——服务器拒绝用户定义的Content-Length属性请求 412——一个或多个请求头字段在当前请求中错误 413——请求的资源大于服务器允许的大小 414——请求的资源URL长于服务器允许的长度 415——请求资源不支持请求项目格式 416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段 417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求 合起来 500——服务器产生内部错误 501——服务器不支持请求的函数 502——服务器暂时不可用,有时是为了防止发生系统过载 503——服务器过载或暂停维修 504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长 505——服务器不支持或拒绝支请求头中指定的HTTP版本 1xx:信息响应类,表示接收到请求并且继续处理 2xx:处理成功响应类,表示动作被成功接收、理解和接受 3xx:重定向响应类,为了完成指定的动作,必须接受进一步处理 4xx:客户端错误,客户请求包含语法错误或者是不能正确执行 5xx:服务端错误,服务器不能正确执行一个正确的请求
7.AJAX应用
7.1AJAX ASP/PHP
AJAX ASP/PHP 实例 下面的例子将为您演示当用户在输入框中键入字符时,网页如何与 web 服务器进行通信: 请在下面的输入框中键入字母(A - Z): p
源码解析
实例解析 - showHint() 函数 当用户在上面的输入框中键入字符时,会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function showHint(str) { var xmlhttp; if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <h3>在输入框中尝试输入字母 a:</h3> <form action=""> 输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" /> </form> <p>提示信息: <span id="txtHint"></span></p> </body> </html> 如果输入框为空 str.length==0,则该函数清空 txtHint 占位符的内容,并退出函数。 如果输入框不为空,showHint() 函数执行以下任务: 1.创建 XMLHttpRequest 对象 2.当服务器响应就绪时执行函数 3.把请求发送到服务器上的文件 4.请注意我们向 URL 添加了一个参数 q (带有输入框的内容)
ASP 文件
"gethint.asp" 中的源代码会检查一个名字数组,然后向浏览器返回相应的名字: <% response.expires=-1 dim a(30) 'Fill up array with names a(1)="Anna" a(2)="Brittany" a(3)="Cinderella" a(4)="Diana" a(5)="Eva" a(6)="Fiona" a(7)="Gunda" a(8)="Hege" a(9)="Inga" a(10)="Johanna" a(11)="Kitty" a(12)="Linda" a(13)="Nina" a(14)="Ophelia" a(15)="Petunia" a(16)="Amanda" a(17)="Raquel" a(18)="Cindy" a(19)="Doris" a(20)="Eve" a(21)="Evita" a(22)="Sunniva" a(23)="Tove" a(24)="Unni" a(25)="Violet" a(26)="Liza" a(27)="Elizabeth" a(28)="Ellen" a(29)="Wenche" a(30)="Vicky" 'get the q parameter from URL q=ucase(request.querystring("q")) 'lookup all hints from array if length of q>0 if len(q)>0 then hint="" for i=1 to 30 if q=ucase(mid(a(i),1,len(q))) then if hint="" then hint=a(i) else hint=hint & " , " & a(i) end if end if next end if 'Output "no suggestion" if no hint were found 'or output the correct values if hint="" then response.write("no suggestion") else response.write(hint) end if %>
PHP文件
<?php // Fill up array with names $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona"; $a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //get the q parameter from URL $q=$_GET["q"]; //lookup all hints from array if length of q>0 if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } } // Set output to "no suggestion" if no hint were found // or to the correct values if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?>
7.2AJAX数据库
AJAX Database 实例: AJAX 可用来与数据库进行动态通信。 下面的例子将演示网页如何通过 AJAX 从数据库读取信息: 请在下面的下拉列表中选择一个客户: p
源码解析
实例解释 - showCustomer() 函数: 当用户在上面的下拉列表中选择某个客户时,会执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function showCustomer(str) { var xmlhttp; if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;"> <option value="APPLE">Apple Computer, Inc.</option> <option value="BAIDU ">BAIDU, Inc</option> <option value="Canon">Canon USA, Inc.</option> <option value="Google">Google, Inc.</option> <option value="Nokia">Nokia Corporation</option> <option value="SONY">Sony Corporation of America</option> </select> </form> <br> <div id="txtHint">客户信息将显示在这...</div> </body> </html> showCustomer() 函数执行以下任务: 1.检查是否已选择某个客户 2.创建 XMLHttpRequest 对象 3.当服务器响应就绪时执行所创建的函数 4.把请求发送到服务器上的文件 5.请注意我们向 URL 添加了一个参数 q (带有输入域中的内容)
AJAX 服务器页面
AJAX 服务器页面: 由上面的 JavaScript 调用的服务器页面是 PHP 文件,名为 "getcustomer.php"。 "getcustomer.php" 中的源代码负责对数据库进行查询,然后用 HTML 表格返回结果: <% response.expires=-1 sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID=" sql=sql & "'" & request.querystring("q") & "'" set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open(Server.Mappath("/db/northwind.mdb")) set rs=Server.CreateObject("ADODB.recordset") rs.Open sql,conn response.write("<table>") do until rs.EOF for each x in rs.Fields response.write("<tr><td><b>" & x.name & "</b></td>") response.write("<td>" & x.value & "</td></tr>") next rs.MoveNext loop response.write("</table>") %>
7.3AJAX XML
AJAX XML 实例 AJAX 可用来与 XML 文件进行交互式通信。异步加载 XML 文档. 下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息: p
源码解析
实例解析 - loadXMLDoc() 函数 当用户点击上面的"获取我收藏的 CD"这个按钮,就会执行 loadXMLDoc() 函数。 loadXMLDoc() 函数创建 XMLHttpRequest 对象,添加当服务器响应就绪时执行的函数,并将请求发送到服务器。 当服务器响应就绪时,会构建一个 HTML 表格,从 XML 文件中提取节点(元素),最后使用 XML 数据的 填充 id="demo" 的表格元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> table,th,td { border : 1px solid black; border-collapse: collapse; } th,td { padding: 5px; } </style> </head> <body> <h1>XMLHttpRequest 对象</h1> <button type="button" onclick="loadXMLDoc()">获取我收藏的 CD</button> <br><br> <table id="demo"></table> <script> function loadXMLDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "cd_catalog.xml", true); xhttp.send(); } function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>Artist</th><th>Title</th></tr>"; var x = xmlDoc.getElementsByTagName("CD"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; } </script> </body> </html>
使用JQuery封装AJAX
$.ajax({ url:"www.baidu.com",//请求的url地址 type:"GET/POST",//请求方式 dataType:"json",//返回格式为json/HTML async:true,//是否异步请求 data:{"param","value"},//参数值:属性值--前端的值传给后端:id=1 beforeSend:function(){ //请求前处理 }, success:function(res){//获取响应的数据 //请求成功时处理 //document.getElementById("myDiv").innerHTML=res; //document.getElementById("myDiv").innerHTML=JSON.stringify(res); console.log(res); }, complete:function(){ //请求完成时处理 }, error:function(){ //请求出错处理 }, })
需要先加载JQuery:搜索JQuery dns
前后端数据交互的方式
http请求
JSON
支付宝的接口
轻量级的数据交换格式,编程语言的文本格式
结构有两种
对象
{"param":"value"}
包含对象的数组
[{"param1":"value1"},{"param2":"value2"}]
Servlet返回JSON格式
maven配置
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.36</version> </dependency>
对象转换
将字符串转换为JSON对象 String code = "0"; String msg = "新增失败"; String rs = "{'code':'" + code + "','msg':'" + msg + "'}"; JSONObject jsonObject = JSON.parseObject(rs); //JSON.parse(rs);字符串转JSON 将json字符串转换为对象 List list = JSON.parseArray(string2, User.class); for (User user2 : list) { System.out.println(user2); } 实例: String code = "0"; String msg = "删除失败"; if (result == 1){ code = "1"; msg="删除成功"; } String rs= "{'code':'"+code+"','msg':'"+msg+"'}"; JSONObject jsonObject = JSON.parseObject(rs);
JSON.toJSONString(object);
XML
微信的接口
XML可扩展标记语言(标准通用标记语言的子集)是一种简单的数据存储语言,不是 HTML的替代。
XML和HTML 为不同的目的而设计: XML 被设计为传输和存储数据,其重点是数据的内容.HTML为了标记文档结构
使用方式
<book> <name>gus</name> <author> <name>metsp</name> <age>13</age> </author> <year>2020</year> </book>
转换为JSON
{"name":"name","author":{"name":"authorname","age":23}}
Session-cookie
互联网的发展
无状态
是指服务端对于客户端每次发送的请求都认为它是一个新的请求,上一次会话和下一次会话没有联系;
无连接
每次连接只处理一个请求,服务端处理完客户端一次请求,等到客户端作出回应之后便断开连接;
通过session cookie保存状态
cookie机制
客户端请求服务器时,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。而客户端浏览器会把Cookie保存起来。
当浏览器再请求 服务器时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器通过检查该Cookie来获取用户状态
cookie机制
针对浏览器而言:保存在浏览器端的
sessio机制
当客户端发送请求(请求url),创建一个session(会话)包含sessionId,服务器会先检查这个客户端的请求里是否已包含了一个session标识 - sessionId,
如果已包含这个sessionId,则说明以前已经为此客户端创建过session,服务器就按照sessionId把这个session检索出来使用(如果检索不到,可能会新建一个)
sessionId的值一般是一个既不会重复,又不容易被仿造的字符串,这个sessionId将被在本次响应中返回给客户端保存。保存sessionId的方式大多情况下用的是cookie。服务器将保存sessionid的cookie发送给客户端,以便下次使用.
session是保存在服务器端的
session和cookie交互机制
登陆验证session
Servlet中编写session: //PrintWriter out = res.getWriter(); HTTPSession session = request.getSession(true);//获取session信息,若session信息不存在自动创建 session.setAttribute(""user,user);//在session中加入user属性,使用户信息和sessionid关联,并放到cookie中 out.println("登陆成功"); 在拦截器中验证session是否存在: String url=((HTTPServletRequest)req).getServletPath(); if("/main".equals(url){//防止获取为空,/main:登陆成功之后可以访问的页面 HTTPSession session = request.getSession();//从cookie中获取sessionid User user = (User)session.getAttribute("user");//在session中获取用户的对象 if(user==null){//判断是否为空 PrintWriter out = res.getWriter(); HTTPSession session = request.getSession(true); session.setAttribute(""user,user);//在session中加入user属性 out.println("用户未登陆"); } }
简易博客系统
系统概述
1. 系统介绍
1. 用户发表博客
2. 管理员管理用户和博客
2. 使用角色
2.1. 1.用户
2.2. 2.管理员
3. 开发技术及场景
3.1. 技术
3.1.1. 前端
3.1.1.1. jsp
3.1.1.2. Vue
3.1.1.3. Ajax
3.1.2. 后台
3.1.2.1. Java语言
3.1.2.2. Maven工具
3.1.2.3. idea
3.1.3. Tomcat服务器
3.1.4. MySQL数据库
3.2. 使用场景
3.2.1. window7/10
4. 用户功能
1. 用户(注册用户权限)
1.1. 注册
1.2. 登录
1.3. 发表博客
1.4. 浏览
1.4.1. 浏览主页
1.4.2. 查看博客详情
1.5. 删除博客
1.6. 扩展功能(略)
2. 管理员
2.1. 用户
2.1.1. 查询
2.1.2. 删除
2.2. 博客
2.2.1. 详情
2.2.2. 删除
5. 系统功能
5.1. 前台
5.1.1. 用户详情
5.1.2. 博客详情展示
5.1.3. 博客列表
5.2. 后台
5.2.1. 用户管理
5.2.1.1. 查询
5.2.1.2. 列表
5.2.1.3. 删除
5.2.2. 博客管理
5.2.2.1. 详情
5.2.2.2. 列表
5.2.2.3. 删除
系统架构(MVC)
前端:View层
1. 默认页面index.jsp
2. 登录注册页面Login.jsp
3. 主页面main.jsp
3.1. 用户管理
3.1.1. 用户添加user-add.jsp
3.1.2. 用户列表:查询、删除、用户详情user-list.jsp
3.2. 博客管理
3.2.1. 博客发表art-add.jsp
3.2.2. 博客列表art-list.jsp
3.2.3. 博客详情detail.jsp
后端
controller层
user
注册:RegisterController
登录:LoginController
新增用户:AddUserController
删除用户:DeleteUserController
用户列表:UserListController
blog
新增博客:AddBlogController
删除博客:DeleteBlogController
博客列表:BlogListController
博客详情:BlogDetailController
model层
数据库操作dao
UserDao
BlogDao
实体层entity
User
Blog
service
utils
JDBC数据库连接
雪花算法:唯一id
filter拦截
session
数据库
用户表meet_user:字段列表
id、name、password、sex、avatar、create_time
博客表meet_blog:字段列表
id、title、content、create_time、author、bg_img
通过Servlet层调取Dao层方法对数据库操纵获取数据; 用Ajax或 jquery实现交互:Json进行数据交换
系统配置
1.新建项目
1. Maven-webapp
2. 打包:package
2.配置Tomcat服务器
3.Maven管理jar包
pom.xml
junit
fastjson
mysql
servlet
jstl
4.XML
jstl
问题及解决方案
问题1:代码复制
解决方案:细心
问题2:系统状态码:
200成功
300系统重定向
400请求(路径)错误
500服务器出错
问题3:路径配置
问题4:编码格式
前台
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
Tomcat
conf\server.xml
---URIEncoding="utf-8"
bin\catalina.bat
set "JAVA_OPTS=%JAVA_OPTS% %JSSE_OPTS% -D"
SSM框架整合
1. applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd"> <!--spring核心配置文件--> <import resource="classpath:spring-dao.xml"/> <import resource="classpath:spring-service.xml"/> <import resource="classpath:spring-mvc.xml"/> </beans>
1.1. Spring核心配置文件
1.2. 将dao/service/mvc合并
2. datebase.properties
jdbc.driver=com.mysql.jdbc.Driver # 如果使用的MySQL 8.0+,还需要添加一个时区的配置&serverTimezone=Asia/Shanghai jdbc.url=jdbc:mysql://localhost:3306/ssmbuild?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai jdbc.username=root jdbc.password=123456
2.1. 数据库连接
2.2. mysql8.0+时区
3. mybatis-config.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <!--mybatis核心配置文件--> <!--1.配置数据源,交给Spring去做--> <!--1.1取别名,为sql映射文件中的输入/输出参数设置类型别名:mapper.xml文件中resultType="Books"--> <typeAliases> <package name="com.kuang.pojo"/> </typeAliases> <!--2.映射mappers配置文件--> <mappers> <mapper class="com.kuang.dao.BookMapper" /> </mappers> <!--dao和mapper不一样就用resource定位--> <!--<mappers> <mapper resource="com/kuang/dao/BookMapper.xml"/> </mappers>--> </configuration>
1. mybatis核心配置文件
2. 设置别名、映射mapper
4. spring-dao.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd"> <!-- Spring配置整合mybatis --> <!-- 1.关联数据库文件:导入数据库配合文件,将读取数据库操作从mybatis到spring--> <context:property-placeholder location="classpath:database.properties"/> <!-- 2.数据库连接池 --> <!--数据库连接池 dbcp 半自动化操作 不能自动连接 c3p0 自动化操作(自动的加载配置文件 并且设置到对象里面) druid:日志监控 --> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"> <!-- 配置连接池属性 --> <property name="driverClass" value="${jdbc.driver}"/> <property name="jdbcUrl" value="${jdbc.url}"/> <property name="user" value="${jdbc.username}"/> <property name="password" value="${jdbc.password}"/> <!-- c3p0连接池的私有属性 --> <property name="maxPoolSize" value="30"/> <property name="minPoolSize" value="10"/> <!-- 关闭连接后不自动commit --> <property name="autoCommitOnClose" value="false"/> <!-- 获取连接超时时间 --> <property name="checkoutTimeout" value="10000"/> <!-- 当获取连接失败重试次数 --> <property name="acquireRetryAttempts" value="2"/> </bean> <!-- 3.配置SqlSessionFactory对象 --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 注入数据连接池 ref:引用上面的连接池--> <property name="dataSource" ref="dataSource"/> <!-- 绑定MyBaties配置文件,配置MyBaties全局配置文件:mybatis-config.xml --> <property name="configLocation" value="classpath:mybatis-config.xml"/> </bean> <!--3.1配置SqlSessionFactoryBean用于创建SqlSessionFactory:此配置可以省略mybatis-config.xml--> <!--<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!– 注入数据源–> <property name="dataSource" ref="dataSource"/> <!–配置实体包位置–> <property name="typeAliasesPackage" value="com.kuang.pojo.Books"/> <!–配置Mapper文件位置–> <property name="mapperLocations" value="classpath*:mapper/*.xml"/> </bean>--> <!-- 4.配置扫描Dao接口包,动态实现Dao接口注入到spring容器中(反射) --> <!--解释 :https://www.cnblogs.com/jpfss/p/7799806.html--> <!--简单理解:将dao注入Spring,使得service可以使用。可以使用set/构造/注解--> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <!-- 注入sqlSessionFactory,动态加载到sqlSessionFactoryBeanName --> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/> <!-- 给出需要扫描Dao接口包 --> <property name="basePackage" value="com.kuang.dao"/> </bean> <!--4.1配置接口扫描bean用于扫描DAO接口产生代理注入到Spring--> <!--<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="sqlSessionFactoryBeanName" value="sessionFactory"/> <property name="basePackage" value="me.meet.blog.model.dao"/> </bean>--> <!--4.2配置spring-service.xml,在此配置可以省略spring-service.xml:可以使用set/构造/注解代替--> <!--<bean id="userService" class="me.meet.blog.model.service.impl.UserService"> <property name="userDao" ref="userDao"/> </bean> <bean id="blogService" class="me.meet.blog.model.service.impl.BlogService"> <property name="blogDao" ref="blogDao"/> </bean>--> </beans>
4.1. spring整合mybatis
5. spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!--注解替代: 映射器、适配器、视图解析器--> <!--注意将cache改成mvc--> <!-- 配置SpringMVC --> <!-- 1.开启SpringMVC注解驱动 --> <mvc:annotation-driven /> <!-- 2.静态资源默认servlet配置--> <mvc:default-servlet-handler/> <!-- 3.配置jsp 显示ViewResolver视图解析器 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> <property name="prefix" value="/WEB-INF/jsp/" /> <property name="suffix" value=".jsp" /> </bean> <!-- 4.扫描controller包:web相关的bean --> <context:component-scan base-package="com.kuang.controller" /> </beans>
6. spring-service.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <!--若不在同一个上下文中,使用import导入--> <!--<import resource="classpath:spring-dao.xml" />--> <!-- 1.扫描service相关的包/bean --> <context:component-scan base-package="com.kuang.service" /> <!--2.将我们的所有业务类,注入到Spring,可以通过配置,或注解实现--> <!--BookServiceImpl注入到IOC容器中--> <bean id="BookServiceImpl" class="com.kuang.service.BookServiceImpl"> <property name="bookMapper" ref="bookMapper"/> </bean> <!--3.声明式事务配置:配置事务管理器--> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <!-- 注入数据库连接池 --> <property name="dataSource" ref="dataSource" /> </bean> <!--4.aop事务支持--> </beans>
6.1. set/构造/注解
7. 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"> <!--1.DispatcherServlet:核心分发器--> <servlet> <servlet-name>DispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <!--一定要注意:我们这里加载的是总的配置文件,之前被这里坑了!--> <param-value>classpath:applicationContext.xml</param-value> </init-param> <!--初始化容器:和tomcat同时启动--> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>DispatcherServlet</servlet-name> <!--/:只会过滤请求--> <url-pattern>/</url-pattern> </servlet-mapping> <!--2.乱码过滤--> <filter> <filter-name>encodingFilter</filter-name> <filter-class> org.springframework.web.filter.CharacterEncodingFilter </filter-class> <!--设置编码--> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <!--只有/,页面的乱码解决不了--> <url-pattern>/*</url-pattern> </filter-mapping> <!--3.Session过期时间:15分钟--> <session-config> <session-timeout>15</session-timeout> </session-config> <!--0.首先跳转的页面--> <!--<welcome-file-list> <welcome-file>/</welcome-file> </welcome-file-list>--> <!--0.监听器,监听容器的加载--> <!--<listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener>--> <!--1.配置容器的属性,也就是spring的加载路径--> <!--<context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-beans.xml</param-value> </context-param>--> <!--2.配置前端控制器 :所有的请求都会经过此控制器,让后通过此控制器分发到 各个控制器(总控),总控其实就是Servlet,SpringMVC底层就是使用Servlet编写的 --> <!--<servlet> <servlet-name>springMVC</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!– 读取SpringMVC的配置文件 –> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mvc.xml</param-value> </init-param> <!– 初始化容器 –> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springMVC</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>--> <!--3.乱码过滤:同上--> </web-app>
8. pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.example</groupId> <artifactId>ssmbuild</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <!--依赖:Junit,数据库驱动,连接池,servlet,mybatis,mybatis-spring,spring--> <dependencies> <!--Junit--> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> </dependency> <!--数据库驱动--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.11</version> </dependency> <!-- 数据库连接池 c3p0 dbcp--> <dependency> <groupId>com.mchange</groupId> <artifactId>c3p0</artifactId> <version>0.9.5.2</version> </dependency> <dependency> <groupId>com.mchange</groupId> <artifactId>mchange-commons-java</artifactId> <version>0.2.12</version> </dependency> <!--Servlet - JSP - jstl--> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.2</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!--Mybatis/Mybatis-Spring--> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.2</version> </dependency> <!--:Mybatis3.5以上,Spring2.0以上,mybatis-spring使用2.0--> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.2</version> </dependency> <!--Spring--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.1.9.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>5.1.9.RELEASE</version> </dependency> <!--Lombok--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.16.10</version> </dependency> </dependencies> <!--静态资源导入问题--> <build> <resources> <resource> <directory>src/main/java</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> </includes> <filtering>false</filtering> </resource> <resource> <directory>src/main/resources</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> </includes> <filtering>false</filtering> </resource> </resources> </build> </project>
9. 出现的问题
9.1. 打成war包
9.2. Web Resource Directories地址
9.3. c3p0连接池使用MySQL8.0.11--jar包
SpringBoot