Ajax And axios

目录

1、什么是Ajax?ASynchronous JavaScript And Xml ----异步的脚本的和XML。

2、同步

3、异步

4、局部刷新

5、Ajax好处：

6、什么是Axios

7.Axios的使用引入 axios 的 js 文件

8.发送 get 请求

9.发送 post 请求

10.JSON

11.总结

---

1、什么是Ajax?
ASynchronous JavaScript And Xml ----异步的脚本的和XML。

Ajax是一种无需重新加载网页，就能更新部分网页脚本技术。特点：异步交互，局部刷新。

传统网页和服务器交互方式：同步交互，全部刷新。

2、同步

客户端必须等待，服务器端进行操作，返回应答，才能进行下一步操作

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

3、异步

无需等待服务器应答结果，就可进行一步的操作。

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做 其他的操作。

4、局部刷新

不是刷新整个页面，而刷新页面的局部，取决于服务器端返回内容类型((text/html)或 (text/xml、application/json

5、Ajax好处：

        提高用户的体验

        节省带宽

        前后端分离（ajax+JSON）

6、什么是Axios

Axios 对原生的AJAX进行封装，简化书写。

功能强大的Ajax Axios官网是： https://www.axios-http.cn

7.Axios的使用引入 axios 的 js 文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="js/axios-0.18.0.js"></script>

8.发送 get 请求

axios({ 
 method:"get", 
 url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"}) 
 .then(function (resp){ 
 alert(resp.data); 
 })

9.发送 post 请求

axios({ 
 method:"post", 
 url:"http://localhost:8080/ajax-demo1/aJAXDemo1", 
 data:"username=zhangsan"}).then(function (resp){ 
 alert(resp.data); 
 });

10.JSON

概念：

 JavaScript Object Notation 。JavaScript 对象表示法

JavaScript：


{

name:"zhangsan",

age:23,

city:"北京"

}

11.总结

请求数据：JSON字符串转为Java对象

响应数据：Java对象转为JSON字符串