WEB基础总结

JavaWeb的技术体系

在这里插入图片描述

HTML

  1. HTML指的超文本标记语言(Hyper Text Markup Language),是一种用来描述网页的语言。超文本指的是除了可以包含文字之外,还可以包含图片、链接、音乐、视频、程序等内容。
    在这里插入图片描述4)	一个基本结构的HTML页面

Serlvet

Servlet就是用来处理客户端的请求的

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

Servlet 的 HelloWorld
1). 创建一个 Servlet接口的实现类.

public class HelloServlet extends HttpServlet{ }

2). 在 web.xml文件中配置和映射这个 Servlet

<!-- 配置和映射 Servlet -->
	<servlet>
		<!-- Servlet 注册的名字+全类名 -->
		<servlet-name>helloServlet</servlet-name>
		<servlet-class>com.atguigu.javaweb.HelloServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<!-- 需与某一个 serlvet-name 一致 -->
		<servlet-name>helloServlet</servlet-name>
		<!-- 映射具体的访问路径:即访问时的路径(eg:localhost:8080)
	(/ 代表当前 WEB 应用的根目录(http://localhost:8080/FirstWeb/)). -->
		<url-pattern>/hello</url-pattern><!-- 和提表单提交的 action 一致 -->
	</servlet-mapping>

不配置会出现404 路径没映射
HttpServlet

GET 请求和 POST请求:
1). 使用GET方式传递参数:
①.在浏览器地址栏中输入某个URL地址或单击网页上的一个超链接时,浏览器发出的HTTP请求消息的请求方式为GET。

②.如果网页中的表单元素的 method属性被设置为了“GET”,浏览器提交这个FORM表单时生成的HTTP请求消息的请求方式也为GET。

③ . 使用GET请求方式给WEB服务器传递参数的格式:http://www.baidu.com/index.jsp?name=hangge
④.使用GET方式传送的数据量一般限制在 1KB以下。
2). 使用 POST方式传递参数:
①. POST请求方式主要用于向 WEB服务器端程序提交 FORM表单中的数据: form表单的 method置为 POST
②. POST方式将各个表单字段元素及其数据作为 HTTP消息的实体内容发送给 WEB服务器,传送的数据量要比使用GET方式传送的数据量大得多。

<form action="login" method="post">
         user:<input type="text" name="username"/>
         password:<input type="password" name="password"/>  
         <input type="submit" value="submit"/>
</form>

如何在 Serlvet中获取请求信息:
1). Service()方法:用于应答请求
因为每次请求都会调用 service()方法

public void service(ServletRequestrequest,ServletResponseresponse)
throws ServletException, IOException

2). ServletRequest: 封装了请求信息.可以从中获取到任何的请求信息.

String getParameter(String name)

3). HttpServletRequest: 是 SerlvetRequest的子接口.针对于 HTTP请求所定义.里边包含了大量获取HTTP请求相关的方法.
4). ServletResponse:封装了响应信息,如果想给用户什么响应,具体可以使用该接口的方法实现.

实际开发中, 直接继承 HttpServlet,并根据请求方式复写 doXxx()方法即可.

public class LoginServlet extends HttpServlet {
	//连接Service层  实例化一个接口对象
	UserService us = new UserServiceImpl();
	private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	         //4步操作
		//1.设置编码格式(请求和响应的编码格式)
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//2.获取页面传过来的参数值  name属性值
		String username = request.getParameter("username");//获取用户名
		String password = request.getParameter("password");//获取密码
		//3.处理具体业务逻辑   业务逻辑层在service
		//  连接数据库 调用Service层方法
		User user  = new User();
		    user.setU_name(username);
		    user.setU_pwd(password);
		    
		boolean result = us.login(user);
		 //4.跳转页面
		  if (result) {
			//重定向跳转
			  //采用会话机制  Session  Cookie
			  //创建session对象  实例化对象  new
			HttpSession session = request.getSession();//创建session对象
			  session.setAttribute("login_user", user);
			  
			 response.sendRedirect(request.getContextPath()+"/admin.jsp"); 
		}else{
			//内部转发
			 request.getRequestDispatcher("/index.jsp").forward(request, response);
			
		}

请求的转发和重定向:

1). 本质区别:
请求的转发只发出了一次请求,

request.getRequestDispatcher("/index.jsp").forward(request,response);

而重定向则发出了两次请求.
在这里插入图片描述

response.sendRedirect("/attr_2.jsp");

请求的转发: /代表的是当前 WEB 应用的根目录
请求的重定向: /代表的是当前 WEB 站点的根目录.

注释:当前WEB应用的根目录:http://localhost:8080/TestJsp/
站点的根目录:http/localhost:8080/

什么时候转发,什么时候重定向?若目标的响应页面不需要从request中读
取任何值。则可以使用重定向。( 还可以防止表单的重复提交)

对于 Tomcat 服务器而言,WEB-INF下的文件是不能通过在浏览器中直接输入地址的方式来访问的. 但通过请求的转发是可以的!

还可以在 web.xml 文件中配置错误页面:

JSP

新建一个 JSP 页面, 在 body 节点内的 <% %> 即可编写 Java 代码.

<body>
	<%
	 Date date = new Date();
	 System.out.print(date);
 	%>
</body>

<a href="attr_2.jsp">To Attr2 Page</a>        //超链接
  1. JSP的表达式
    ① JSP表达式用来直接将Java变量输出到页面中,格式以<%=开头,以%>结尾,中间是我们要输出的内容
    在这里插入图片描述
    3).JSP 可以放置在 WEB 应用程序中的除了 WEB-INF 及其子目录外的其他任何目录中,JSP 页面的访问路径与普通 HTML 页面的访问路径形式也完全一样。

4). JSP的运行原理: JSP 本质上是一个 Servlet

每个JSP 页面在第一次被访问时, JSP 引擎将它翻译成一个 Servlet 源程序, 接着再把这个 Servlet 源程序编译成 Servlet 的 class 类文件.然后再由WEB容器(Servlet引擎)像调用普通Servlet程序一样的方式来装载和解释执行这个由JSP页面翻译成的Servlet程序。

5). JSP 页面的隐含变量: 没有声明就可以使用的对象. JSP页面一共有 9 个隐含对象.
①.request:HttpServletRequest 的一个对象.

String name = request.getParameter(“name”);

System.out.println(name);

(用GET方法测试)http://localhost:8080/JspTest/hello.jsp?name=HelloJsp
②. response:HttpServletResponse 的一个对象
(在 JSP 页面中几乎不会调用 response 的任何方法.)
③. pageContext:页面的上下文, 是 PageContext 的一个对象. 可以从该对象中获取到其他 8 个隐含对象. 也可以从中获取到当前页面的其他信息. (学习自定义标签时使用它)
④. session:代表浏览器和服务器的一次会话, 是 HttpSession 的一个对象.
⑤. application:代表当前 WEB 应用. 是ServletContext 对象.
⑥. config:当前 JSP 对应的 Servlet 的ServletConfig 对象(几乎不使用). 若需要访问当前 JSP 配置的初始化参数,需要通过映射的地址才可以。

<servlet>

    <servlet-name>hellojsp</servlet-name>

    <jsp-file>/hello.jsp</jsp-file>

    <init-param>

           <param-name>test</param-name>

           <param-value>testValue</param-value>

    </init-param>

  </servlet>

  <servlet-mapping>

    <servlet-name>hellojsp</servlet-name>

      <url-pattern>/hellojsp</url-pattern>        

  </servlet-mapping>

⑦. out:JspWriter 对象. 调用out.println() 可以直接把字符串打印到浏览器上.

换行方式:加
或者out.println(“

”);

⑧. page:指向当前 JSP 对应的 Servlet 对象的引用, 但为 Object 类型, 只能调用 Object 类的方法(几乎不使用)

⑨. exception:在声明了 page 指令的 isErrorPage=“true” 时, 才可以使用

JSP注释的格式:

<%-- JSP 注释 --%>

  1. EL表达式
    ① EL是JSP内置的表达式语言,用以访问页面的上下文以及不同作用域中的对象 ,取得对象属性的值,或执行简单的运算或判断操作。EL在得到某个数据时,会自动进行数据类型的转换。
    ② EL表达式用于代替JSP表达式(<%= %>)在页面中做输出操作。
    ③ EL表达式仅仅用来读取数据,而不能对数据进行修改。
    ④ 使用EL表达式输出数据时,如果有则输出数据,如果为null则什么也不输出。
    ⑤ EL表达式的语法:
    在这里插入图片描述
    ⑥ EL取值的四个域:
    pageScope
    requestScope
    sessionScope
    applicationScope

include 指令:——静态引入-<%@ include file=“b.jsp”%>
jsp:incluce 标签:——动态引入–并不是像 include 指令生成一个 Servlet 源文件, 而是生成两个 Servlet 源文件, 然后通过一个方法的方式把目标页面包含进来

JavaScript

  1. 编写位置
    ① 编写到HTML中

在这里插入图片描述

② 写在外部的.js文件中。然后通过script标签引入。
在这里插入图片描述

  1. JavaScript的事件驱动
    ① 用户事件:用户操作,例如单击、鼠标移入、鼠标移出等
    ② 系统事件:由系统触发的事件,例如文档加载完成。
    ③ 常用的事件:
    onload
    onclick
    onblur
    onfocus
    onmouseover
    onmouseout

  2. BOM

  3. DOM

Ajax

  1. AJAX 是 Asynchronous JavaScript And XML 的简称。直译为,异步的JS和XML
  2. AJAX的实际意义是,不发生页面跳转、异步载入内容并改写页面内容的技术。
  3. AJAX也可以简单的理解为通过JS向服务器发送请求。
    异步请求对象
  4. XMLHttpRequest对象是AJAX中非常重要的对象,所有的AJAX操作都是基于该对象的。
    在这里插入图片描述
  • json&ajax
    1…在JS中操作JSON
  1. 创建JSON对象
     var json = {“name1”:”value1”,”name2”:”value2” , “name3”:[1,”str”,true]};
     var json = [{“name1”:”value1”},{“name2”:”value2”}];
  2. JSON对象转换为JSON字符串
     JSON.stringify(JSON对象)
  3. JSON字符串转换为JSON对象
     JSON.parse(JSON字符串)

2.在java中

  1. JSON字符串转换为对象
String json = "{\"name\":\"张三\",\"age\":18}";
Gson gson = new Gson();

//转换为集合
Map<String,Object> stuMap = gson.fromJson(json, Map.class);
//如果编写了相应的类也可以转换为指定对象
Student fromJson = gson.fromJson(json, Student.class);
2) 对象转换为JSON字符串

Student stu = new Student("李四", 23);
Gson gson = new Gson();
//{"name":"李四","age":23}
String json = gson.toJson(stu);
		
Map<String , Object> map = new HashMap<String, Object>();
map.put("name", "孙悟空");
map.put("age", 30);
//{"age":30,"name":"孙悟空"}
String json2 = gson.toJson(map);
		
List<Student> list = new ArrayList<Student>();
list.add(new Student("八戒", 18));
list.add(new Student("沙僧", 28));
list.add(new Student("唐僧", 38));
//[{"name":"八戒","age":18},{"name":"沙僧","age":28},
{"name":"唐僧","age":38}]
String json3 = gson.toJson(list);		
     // 如果将一个数组格式的json字符串转换成java对象需要用到
     //Gson提供的一个匿名内部类: TypeToken
	TypeToken tk= new TypeToken<List<User>>(){};
	List<User> list2 = gson.fromJson(json,tk.getType());
	System.out.println(list2.get(0));

使用jQuery框架来发送异步请求

在这里插入图片描述1) Servlet 返回json数据


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

  1. 页面中处理 json数据

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

会话:Session&Cookie

  1. Cookie的用途:用户登录状态的保持
    在这里插入图片描述
  2. Session的工作原理
    ① Session的创建时机是在request.getSession()方法第一次被调用时。
    ② Session被创建后,同时还会有一个名为JSESSIONID的Cookie被创建。
    ③ 这个Cookie的默认时效就是当前会话。
    ④ 简单来说,Session机制也是依赖于Cookie来实现的
    在这里插入图片描述
  3. Session的时效问题
    Session默认有效时间为30分钟,可以在服务器的web.xml配置中修改.
    在这里插入图片描述

过滤器

  1. 通过实现Filter接口完成过滤器的开发
    在这里插入图片描述2) Filter在web.xml中的配置
    在这里插入图片描述

xml

  1. XML–可扩展标记语言eXtensible Markup Language
    XML用来传输和存储数据,HTML用来显示数据
    XML没有预定义标签,均为自定义标签
    xml用途
  2. 配置文件
    JavaWeb中的web.xml
    C3P0中的c3p0-config.xml
  3. 数据交换格式
    Ajax
    WebService
  4. 数据存储
    保存关系型数据

mvc

在这里插入图片描述

发布了13 篇原创文章 · 获赞 6 · 访问量 1690

猜你喜欢

转载自blog.csdn.net/chenhangx/article/details/104092328
今日推荐