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">  <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>    <typeAliases> <package name="com.kuang.pojo"/> </typeAliases>  <mappers> <mapper class="com.kuang.dao.BookMapper" /> </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">   <context:property-placeholder location="classpath:database.properties"/>   <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}"/>  <property name="maxPoolSize" value="30"/> <property name="minPoolSize" value="10"/>  <property name="autoCommitOnClose" value="false"/>  <property name="checkoutTimeout" value="10000"/>  <property name="acquireRetryAttempts" value="2"/> </bean>  <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">  <property name="dataSource" ref="dataSource"/>  <property name="configLocation" value="classpath:mybatis-config.xml"/> </bean>      <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">  <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>  <property name="basePackage" value="com.kuang.dao"/> </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">     <mvc:annotation-driven />  <mvc:default-servlet-handler/>  <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>  <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">    <context:component-scan base-package="com.kuang.service" />   <bean id="BookServiceImpl" class="com.kuang.service.BookServiceImpl"> <property name="bookMapper" ref="bookMapper"/> </bean>  <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">  <property name="dataSource" ref="dataSource" /> </bean>  </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">  <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>  <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>DispatcherServlet</servlet-name>  <url-pattern>/</url-pattern> </servlet-mapping>  <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>  <session-config> <session-timeout>15</session-timeout> </session-config>          </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>  <dependencies>  <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>  <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>  <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>  <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.2</version> </dependency>  <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.2</version> </dependency>  <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>  <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