Ajax
- 1.概述
全称 异步的js and xml
好处：异步访问，局部刷新
无需刷新页面便可向服务器传输或读写数据
- ajax 全名 async javascript and XML(异步JavaScript和XML)
- 是
前后台交互的能⼒也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具 - AJAX
不是新的编程语言，而是一种使用现有标准的新方法。 - AJAX 是与服务器交换数据并更新部分网页的艺术，
在不重新加载整个页面的情况下。 - 是⼀个
默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）
什么是同步请求？(false)
同步请求是指当前发出请求后，浏览器什么都不能做，
必须得等到请求完成返回数据之后，才会执行后续的代码，
相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，
当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态
什么是异步请求？(默认:true)
默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。
例如：
异步必须至少有三个人，第一个人把事情交给第二个人，有第二个人再去交给第三个人，这时第一个人可以去做其他的事情。
- 2.原理
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换(如点赞)，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
- 3.测试
Vue提供的axios
步骤：
1.导入vue.js和axios.min.js文件
2.编写HTML代码
语法：axios.get(url).then( a=>( a表示服务器返回的结果 ) )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue提供的ajax技术</title>
<!-- 1.导入vue.js和axios.min.js文件 -->
<script src="vue.js"></script>
<!-- 发起ajax请求,异步访问,局部刷新 -->
<script src="axios.min.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区,利用插值表达式获取值 -->
<div id="app">
{{info}}
</div>
<!-- 3.创建Vue对象 -->
<script>
new Vue({
el : "#app",//挂载点
data : {//数据区
info : ''
},
mounted : function(){//发起ajax请求,用以获取数据
//ajax 访问 服务器的数据,axios.get(url).then(业务)//可以读取文件里的json数据
axios.get("http://localhost:8080/car/get").then(//可以跨域请求服务器数据
//处理返回值,箭头语法,其中a表示服务器返回的数据
a => (
//修改info的值,a.data是固定写法,用来获取a的值
this.info = a.data //data已经是js对象了
)
)
}
});
</script>
</body>
</html>
3.修改服务器的Controller代码
添加一个注解,@CrossOrigin //放行JS的请求–跨域的解决方案
4.测试
访问网页，网页会直接发起ajax请求，请求服务器的数据.服务器把数据返回交给ajax继续解析，最终实现局部刷新网页。
5.总结
3617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
