JavaEE(2):前后端项目之间的交互

现在,在网页中通过超链接,表单就可以向后端发送请求,后端也可以正常响应内容。

以前通过表单访问后端的请求方式称为同步请求

同步请求

当网页与后端交互时,前端不能再进行其他操作

服务器端响应回来的内容,会把整个浏览器的内容覆盖掉

这种请求方式在前后端交互时,就不太友好了

现在的前后端交互请求,都是使用的是异步请求

举例说明:

前端注册网页(实现同步请求):

javascript 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function checkAccount(account){
				//同步请求,已经被抛弃了
				location.href = "http://127.0.0.1:8088/dormServer/register?account="+account;
			}
			
			function relogin(){
				location.href = "http://127.0.0.1:8848/webtest/login.html";
			}
		</script>
	</head>
	<body>
		<form method="post">
			账号:<input type="text" name="account" value="" onblur="checkAccount(this.value)"/> 
			<span id="msgid"></span>
			<br/>
			密码:<input type="password" name="password" value=""/> <br/>
			<input type="button" value="提交" onclick="relogin()"/>
		</form>
	</body>
</html>

在注册界面输入好账号(已存在)后:

当鼠标焦点不在账号栏时:

页面直接被响应到的信息覆盖了,后续操作无法进行。所以同步请求就被无情抛弃了~

异步请求

同时可以做多件事情(前端与服务器交互时,不影响前端网页其他操作)

使用js中提供的XMLHttpRequest对象实现发送异步请求,和接收服务器响应

异步请求时,会出现跨域访问问题:浏览器默认不允许js对象接收来自其他服务器响应的内容。

举例说明:

将前端网页的方法中将异步代码实现:

javascript 复制代码
function checkAccount(account){
				//异步请求,使用js对象发送请求
				var httpobj = new XMLHttpRequest();
				//封装请求地址和数据
					httpobj.open("get","http://127.0.0.1:8088/dormServer/register?account="+account,true);
				//发送请求
					httpobj.send();
				//接收响应
					httpobj.onreadystatechange = function(){
						//httpobj.responseText;  获得到响应的内容
						document.getElementById("msgid").innerHTML = httpobj.responseText;
					}
			}

在注册界面输入好账号(已存在)后:

当鼠标焦点不在账号栏时,从后端响应回来的信息就会立刻附在账号栏后反馈给用户。

但如果有很多种需要实时为用户反馈信息的话,这种异步请求的实现代码就非常繁琐,在多个前端网页也显得非常冗余。

所以就有了axios框架去封装异步请求的代码,减少了代码的冗余。

axios

axios 是一个HTTP 的网络请求库.

<!-- 导入axios框架 -->

<script src="js/axios.min.js"></script>

然后注册网页的前端方法中的异步请求就会变成

javascript 复制代码
function checkAccount(account){
				//axios框架对异步请求进行封装
				axios.get("http://127.0.0.1:8088/dormServer/register?account="+account).then((resp)=>{
					console.log(resp);
					document.getElementById("msgid").innerHTML = resp.data;//resp.data取出后端响应的内容
				});
			}

极大减少了代码的数量,增加了代码的观赏性。

跨域问题

不同服务之间进行访问

只要请求协议,域名,端口其中一项不同,就属于跨域访问

在后端过滤器中响应时,告知前端本次响应是安全的,允许跨域访问

跨域问题是一个前端问题,也可以在后端解决,也可以在前端解决

配置跨域过滤器

java 复制代码
public class CorsFilter implements Filter {
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
        //允许携带Cookie时不能设置为* 否则前端报错
        httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//"origin"允许所有请求跨域,前期都是自己的浏览器访问自己的服务器,也可以使用回环地址
        httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
        httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie
 
        filterChain.doFilter(servletRequest, servletResponse);
    }
}

在web.xml文件中配置注册跨域过滤器

XML 复制代码
<!--配置允许跨域过滤器-->
    <filter>
        <filter-name>corsfilter</filter-name>
        <filter-class>com.ffyc.dormServer.filter.CorsFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>corsfilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

json

json javaScript object Notation javaScript对象表示法

两种不同的语言之间如何进行数据交互(例如C语言程序 与 java程序之间要进行数据交互)

json是一种公认的js识别的对象表示法,对于java而言就是一种特定格式的字符串

对象:{键:值,键:值} 例如:{name:jim,age:20} 集合:[{键:值,键:值},{键:值,键:值}]

模拟json转换数据格式

1、写一个SearchServlet类

java 复制代码
public class SearchServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        //模拟从数据库根据名字查询学生所有信息,然后叫数据封装到一个学生对象中
        Student student = new Student();
                student.setNum(101);
                student.setName(name);
                student.setGender("男");
                student.setAge(20);
        PrintWriter printWriter = resp.getWriter();
        ObjectMapper objectMapper = new ObjectMapper();
        String jsonstr = objectMapper.writeValueAsString(student);
        printWriter.print(jsonstr);//打印响应一个学生对象
    }

2、在web.xml文件中配置 SearchServlet

XML 复制代码
<servlet>
        <servlet-name>search</servlet-name>
        <servlet-class>com.ffyc.dormServer.web.SearchServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>search</servlet-name>
        <url-pattern>/search</url-pattern>
    </servlet-mapping>

在前端写一个search.html

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入axios框架 -->
		<script src="js/axios.min.js"></script>
		<script>
			function search(){
				var name = document.getElementById("nameid").value;
				axios.get("http://127.0.0.1:8088/dormServer/search?name="+name).then((resp)=>{
					if(resp.data.code == 200){
						console.log(resp.data);
						alert(resp.data.massage);
						document.getElementById("numid").innerHTML = resp.data.data.num;
						document.getElementById("nameid1").innerHTML = resp.data.data.name;
						document.getElementById("genderid").innerHTML = resp.data.data.gender;
						document.getElementById("ageid").innerHTML = resp.data.data.age;
					}else if(resp.data.code == 500){
						alert(resp.data.massage);
					}
				});
			}
		</script>
	</head>
	<body>
		<input type="text" id="nameid"/>
		<input type="button" value="搜索" onclick="search()"/>
		<div>
			学号:<span id="numid"></span>
			姓名:<span id="nameid1"></span>
			性别:<span id="genderid"></span>
			年龄:<span id="ageid"></span>
		</div>
	</body>
</html>

测试json:

打开search网页

输入张三后,后端的json就将从数据库得到的信息,转换成json的数据格式响应回前端并显示上去

相关推荐
Theodore_10222 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
dot.Net安全矩阵10 小时前
.NET 通过模块和驱动收集本地EDR的工具
windows·安全·web安全·.net·交互
梓贤Vigo14 小时前
【Axure视频教程】自制上传按钮
交互·产品经理·axure·原型·教程
好开心3317 小时前
javaScript交互案例2
开发语言·前端·javascript·html·ecmascript·交互
xChive17 小时前
优化表单交互:在 el-select 组件中嵌入表格显示选项
前端·vue.js·交互·element-plus
LIT-涛18 小时前
JavaEE初学07
数据库·oracle·java-ee
&梧桐树夏18 小时前
JavaEE 线程安全
java-ee·多线程
界面开发小八哥18 小时前
「Java EE开发指南」如何使用Visual JSF编辑器设计JSP?(一)
java·ide·java-ee·编辑器·myeclipse
先睡18 小时前
javaEE
java·java-ee
冷心笑看丽美人18 小时前
Spring 框架七大模块(Java EE 学习笔记03)
学习·spring·架构·java-ee