Web前端与JAVAEE的交互

最新推荐文章于 2024-04-09 17:42:12 发布

高手敏smart_sheep

最新推荐文章于 2024-04-09 17:42:12 发布

阅读量666

点赞数

文章标签：服务器运维

本文链接：https://blog.csdn.net/W2810741612/article/details/130796080

版权

一、思想概述

1.servlet搭建
搭建服务器（tomcat）
为什么要用服务器：为了别人能够远程的访问到，需要把开发的java项目部署到服务器中；
服务器的搭建：宏观上来说，可分为四点前端发送请求---->后端接受--->处理响应--->前端显示
2.创建web项目
在idea中继承tomcat，并将项目部署到tomcat中。
创建servlet程序，继承HttpServlet。（init service destory）
doGet doPost
servler作用：接收请求数据（请求行，请求头，请求中自己提交的数据）
处理
响应 200 404 500
3.发送http请求
请求行，请求头，请求体...
4.过滤器
5.前端发送请求
5.1表单向后端发送请求，属于同步请求
5.2异步请求

6. Ajax 阿贾克斯异步技术

二、http请求和响应

http请求

http协议

http协议(HyperText Transfer Protocol超文本传输协议)是网络模型中应用层协议,用来规定浏览器和服务器之间如何传输超文本内容.也基于 tcp/ip协议 ,客户端与服务器之间交互必须是建立连接。http请求

1.当浏览器连接到服务器后,向服务器发送的请求,称为http请求。

一个http请求包含3个部分:

请求行: 请求的地址,http版本,状态码都是由浏览器自动处理；
请求头: 客户端的一些信息,都是由浏览器自动处理，以键值对方式向后端发送，键都是固定的；
请求体:表单post方式提交的数据区域,请求体中参数以键值形式传递；

http请求又分为get请求方式和post请求两种方式

get

超链接请求是get;
地址栏直接访问是get;
get主要用来从服务器端获取数据；
向服务器端传输数据量小,并且在地址栏会显示;
后端地址?键=值&键=值.

post

表单提交post方式提交数据;
主要用于从前端向后端传输大量数据(可以上传文件)；
不在(url)地址栏显示，数据存放在请求体中,相对安全.

2.在Servlet中，HttpServletRequest表示请求

由于前端发送的http请求有get和post两种，故后端提供doGet()和doPost()进行对应的处理。
虽然调用doGet()和doPost()，但构造方法，init,service,gestroy方法仍然正常执行。
当servlet中无需初始化的内容时，可不重写init()，但服务器依然会调用父类中的重写的init().
父类中已经重写了service()，并会根据请求方式进行判断【get-->doGet(),post-->doPost()】
当servlet中无需最终执行的操作时，可不重写destroy()，但服务器依然会调用父类中的重写的destroy()。当一次http请求发送到服务器时，tomcat会将请求中所有的数据，都封装到一个实现HttpServletRequest类的对象中.使用此对象,就可以获取所有的请求数据.
req.getMethod();//得到客户端请求方式
req.getScheme();//请求协议
req.getLocalAddr();//获取远端的IP和端口
tomcat8之后post (数据在请求体中)，如果有中文，乱码；get 有中文，正常输出；

故：post数据接收前，需设置一个解码规则：req.setCharacterEncoding("utf-8");
但为了避免多次反复写解码代码，造成代码冗余，我们可以通过过滤器实现解码效果。

前端发送请求

表单向后端发送请求，属于同步请求;
同步：你发一个请求，给你一个回应，会用回应的内容覆盖掉浏览器中原来的内容;
       这样会打断前端其他正常的操作，在现在的前端中，显得不太友好;
异步请求
   异步：不同步前端正常输入时，可以同时与后端进行交互，后端响应的数据不会影响前端正常操作;
可以使用以一个js提供的对象，向后端发送请求;
      然后在js中，用接收到的内容，局部更新网页，这样整个过程不会出现刷新，覆盖操作;
      不会打断网页的正常操作。

跨域

协议，域名，端口有一个不相同就是属于跨域问题；
跨域问题解决：前端解决；后端解决：在响应头中设置一个说明，告知浏览器此次响应是可靠的；

http响应

服务器向客户端回送的数据称为响应；

可以在service方法中响应，但太单一，使得响应方式只有一种，而使用doPost方法和doGet方法更加灵活。

用getWriter()获得一个PrintWriter字符输出流输出数据；

response.setContetnType("text/html;charset=utf-8");方法可以同时设定response所使用的字符集编码和浏览器打开所用的字符集编码。

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setHeader("Content-Type","text/html;charset=utf-8");
        PrintWriter pt = resp.getWriter();
        pt.write("<h1>你好客户端</h1>");
        System.out.println("service");
    }

状态码：

200：请求成功
302：请求重定向
400：语义有误，当前请求无法被服务器理解或请求参数有误
404：请求资源不存在，通常是路径写错了或者服务器资源删除了
500：服务内部错误（代码异常）

三、过滤器

Filter也称之为过滤器，它是Servlet技术中最实用的技术，WEB开发人员通过Filter技术，对web服务器管理的所有web资源：例如Servlet, 从而实现一些特殊的功能。例如实现URL级别的权限访问控制、过滤敏感词汇、压缩响应信息等一些高级功能。

作用

在请求进入到servlet之前，可以配置那些请求进入到指定的过滤器，完成一些公共处理。

Filter接口是过滤器类必须实现的接口；

实现Filter接口中的三个方法

init(FilterConfig filterConfig)：对filter对象进行初始化，只在容器初始化filter对象结束后被调用一次。参数 FilterConfig可以获得filter的初始化参数。
doFilter(ServletRequest request, ServletResponse response, FilterChain chain)：filter进行过滤操作的方法。过滤器实现类必须实现该方法。方法体中可以对request 和response进行预处理。其中FilterChain可以将处理后的request 和response对象传递到过滤链上的下一个资源。
destroy()：该方法在容器销毁过滤器对象前被调用。

实现接口

import javax.servlet.*;
import java.io.IOException;
 
/*
    编码过滤器
*/
public class EncodFilter implements Filter {
/*可不重写init()和destroy(),会调用父类中的*/
 
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
 
        //System.out.println("编码过滤器");
        servletRequest.setCharacterEncoding("utf-8");
        servletResponse.setContentType("text/html;charset=utf-8");
        //filterChain过滤链，处理完后让请求继续向下执行，下一个可能是目标servlet，也可能是下一个过滤器
        filterChain.doFilter(servletRequest,servletResponse);
 
    }
}

配置过滤器

<!--配置编码过滤器-->
    <filter>
        <filter-name>encodFilter</filter-name>
        <filter-class>com.ffyc.webback.filter.EncodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>encodFilter</filter-name>
        <url-pattern>/*</url-pattern><!--配置哪些请求地址进入到过滤器-->
    </filter-mapping>

四、 Ajax

Ajax 阿贾克斯异步技术

Ajax简介

Ajax 全称为: “Asynchronous JavaScript and XML"JavaScript 和 XML)使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
Ajax其实质是利用浏览器提供的一个特殊的对象 (XMLHttpRequest)异步地向服务器发送请求；
服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新整个过程，页面无刷新，不打断用户的操作。

创建 XMLHttpRequest 对象

XMLHttpRequest对象：发送请求到服务器并获得返回结果
所有现代浏览器都内建了 XMLHttpRequest 对象，通过一行简单的
JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。
new XMLHttpRequest();

常用方法和属性

JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力；

方法

属性

Get方式

Get方式提交

xmlhttp.open("GET,"testServlet?name="+userName,true)；

xmlhttp.send()；

Ajax框架

下载axios文件

https://unpkg.com/axios/dist/axios.min.js

导入项目

get请求

axios.get('/user?ID=12345').then(function (response) {

console.log(response);

})

post请求

axios.post('/user', “name1=value1&name2=value2”)

.then(function (response) {

console.log(response);

})

响应结果格式

axios.get('/user')

.then(function(response) {

console.log(response.data);//后端返回数据,默认为json格式

console.log(response.status);

console.log(response.statusText);

console.log(response.headers);

console.log(response.config);

});

向服务器发送cookie数据设置

axios.defaults.withCredentials=true;

<script src="js/axios.min.js"></script>
		<script type="text/javascript">
			function checkAccount(account){
				/* axios.get("http://127.0.0.1:8080/webBack/reg?account="+account).then(function(resp){
					//console.log(resp.data);//获取后端响应的数据，默认为json格式
					document.getElementById("msgId").innerHTML=resp.data;
				})	 */	
				
				axios.post("http://127.0.0.1:8080/webBack/reg","account="+account).then(function(resp){
					document.getElementById("msgId").innerHTML=resp.data;
				})
			}
		</script>

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式；

● 数据在键值对中

● 数据由逗号分隔

● 大括号保存对象

● 方括号保存数组

语法：

JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对

组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值：

{"firstName": "John"}

{“name”:”value”,”sex”:”男”}

案例展示

idea

 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String num=req.getParameter("num");
        Student student=new Student(num,"tom","女");
        //resp.getWriter().print(student);打印的是哈希值
        /*涉及了两种不同语言间进行数据交互，以前的Java将数据写到了一个xml文件中，把xml文件传给前端，前端解析，这很复杂；
        现在的交互中，产生了一种轻量级的数据格式{num:"num",name:tom,gender:女}*/
 
        ObjectMapper objectMapper=new ObjectMapper();
        String s=objectMapper.writeValueAsString(student);
        System.out.println(s);
        resp.getWriter().print(s);
    }

Hbuilder

<script src="js/axios.min.js"></script>
		<script type="text/javascript">
			function checkAccount(num){
 
				axios.post("http://127.0.0.1:8089/webBack/reg","num="+num).then(function(resp){
					console.log(resp.data.num);
					console.log(resp.data.name);
					console.log(resp.data.gender);
				})
			}
		</script>

高手敏smart_sheep

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端与JAVAEE的交互

Ajax 全称为: “Asynchronous JavaScript and XML"JavaScript 和 XML)使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。Ajax其实质是利用浏览器提供的一个特殊的对象 (XMLHttpRequest)异步地向服务器发送请求；服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新整个过程，页面无刷新，不打断用户的操作。创建对象XMLHttpRequest对象：发送请求到服务器并获得返回结果。
复制链接

扫一扫