浅谈SpringMVC(二)

回顾

上回书说到了SpringMVC强大的作用,大大提高了我们前后端交互的开发效率,通过一些注解即可实现交互,但是我们只是演示了同步交互,直接在地址栏输入想要的参数,name如何真正的通过前端代码访问后端,并且让后端传回相应的参数呢?接下来我们通过一些简单的前后端程序演示一下.

同步与异步

我们先来搞清楚关于同步请求与异步请求的区别.

**同步:**就是字面意思.同步就是请求发送出去之后,服务器开始进行响应,这个响应是同步的,当把后端所有的业务全部加载完毕,一股脑全部响应给用户,这就出现一个问题,在服务器没有加载完的这段时间前端页面是什么状态的?就是一个空白页的状态,好一点的给用户来个提示~~不好意思哦,页面正在加载中…大家脑补一下画面,用户像一只呆头鹅等着页面加载,这样的效果极差,所以现在一般都采用的是异步请求的方式.

**异步:**一个请求发出去,服务器并不会把所有信息加载完毕才响应,而是一块一块的响应,就不会让页面一直是空白的,比如说浏览京东或者淘宝,进去网站,虽然不会把所有信息加载完毕,但是绝大部分已经做出了响应,我们是可以进行后去操作的,这样就很人性化,不至于让用户一直等等等.

总结:

同步请求用户只能等待服务器全部加载完毕,不能做其他操作.

异步请求用户无需等待,可以做其他操作.

关于Ajax

在我们介绍完同步与异步之后,再来聊一聊实现异步访问的核心Ajax~~

###Ajax介绍

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。

使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作

关于Ajax的特点:大家记住八个字即可,局部刷新,异步访问.

Ajax实现异步的原理

为什么Ajax可以实现异步请求呢?是因为有一个非常重要的叫做Ajax引擎,我们可以把它当做是用户和服务器之间的第三方,用户发出请求,服务器将加载好的数据传给Ajax引擎,然后再传给用户,这样在等的就变成了Ajax引擎而不是用户了.我们通过图片展示一下~~
在这里插入图片描述

前后端基础交互

接下来我们通过代码演示一下最基本的前后端交互的操作,先写一个简单的前端代码~~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试axios_get</title>
	</head>
	<body>
        <h3>
            Axios,Hello
        </h3>
		<script src="../js/axios.js"></script>
		<script>
			axios.get("http://localhost:8080/axios/findStr")
				 .then(function(promise){
					 console.log(promise.data);
				 })
			
		</script>
	</body>
</html>

我们使用的是axios,属于是加强版的Ajax,帮我们封装好了各种请求

promise:将服务器返回值封装的对象,可以通过它获取返回值的信息
回调函数:then()里边的function我们就称之为回调函数,就是通过这个函数Ajax引擎将服务器加载好的数据返回给用户.所以我们改一下上一个图片
在这里插入图片描述

后端代码~~

@RestController
@RequestMapping("/axios")
@CrossOrigin
public class AxiosController {
    @RequestMapping("/findStr")
    public String findStr(){
        return "你好";
    }