前端的Ajax

.特点

局部刷新 异步访问

Ajax说明

说明: Ajax是实现前后端交互,最为常用的一种方式.
发展:
1. 原生的JS中包含了Ajax. 但是操作比较复杂. 20行左右
2. jQuery是JS的一种高级函数类库.
3. jQuery提供了一种高效的Ajax的请求的方式.
展望:
现阶段所使用的Ajax是由jQuery进行的动态的封装.,如果将来的前端不使用jQuery则应该采用另外的一种形式发起Ajax请求.

 Ajax异步调用原理

同步: 用户发起请求时,要求第一时间服务器做出响应.在此期间用户不可以做其它操作,只能等待服务器返回数据. 刷新1次.

异步: 用户发起请求时,要求服务器做出响应.在此期间用户可以做其它的操作.如果后端服务器返回数据则通过回调函数通知客户. 局部刷新多次.

Ajax实现数据获取

 $.ajax请求

<script>
			//jQuery语法: 让整个页面浏览器加载完成之后,再次执行JS
			$(function(){
				/**
				 * data参数传递：  id=100,name=tom age=18
				 * 	1.对象方式数据传参
				 * 		语法: {key:value,key2:value2}
				 *  2.拼接字符串的方式
				 * 		语法: key1=value1&key2=value2
				 */
				$.ajax({
					type: "get",	//请求类型
					url:  "http://localhost:8090/findAll", //url地址
					data: {id:100,name:"tom",age:18},
					//data: "id=100&name=tom&age=18",		   //参数
					success: function(data){
						console.log(data)
					}
				})
			})
		</script>

 跨域请求实现

由于是跨域请求,则需要添加@CrossOrigin的注解.

关于Ajax返回值数据说明

说明: 后台服务器返回的是JSON串,但是经过Ajax业务调用,则程序会自动的根据返回值类型进行解析.解析之后形成了JS的对象.
API说明:
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。

虽然服务器的返回值是JSON,但是经过Ajax智能的判断,则动态的转化为JS的对象.

 Ajax

Axios