AJAX以及Axios框架

概念

AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML

作用

1.与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据，使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了。
2.异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

异步请求

异步请求就当发出请求的同时，浏览器可以继续做任何事，即无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

同步请求

当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，一旦有程序执行较长的时间，用户就会产生等待感，操作不丝滑。

AJAX的使用

创建XMLHttpRequest 对象

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
1
2
3
4
5
6
7

获取XMLHttpRequest

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
1
2

服务器响应

xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
1
2
3
4
5
6

一个完整的实例

<script>
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhttp.open("GET", "http://localhost:8080/Tomcat-maven-demo01/ajaxServlet", true);
    xhttp.send();

    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        }
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

到这里我们就会发现这个AJAX的格式十分的臃肿，于是我们也有相应的改进方式

Axios

首先我们要导入Axios的js文件

之后我们就可以在script中导入响应的JS文件坐标

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

导完坐标后，我们就可以开始写Axios了

get方法

 axios({
         method:"get",
         url:"http://localhost:8080/Tomcat-maven-demo01/axiosServlet?username=zhangsan"
     }).then(function (resp) {
         alert(resp.data);
     })
1
2
3
4
5
6

post方法

axios({
         method:"post",
         url:"http://localhost:8080/Tomcat-maven-demo01/axiosServlet",
        data:"username=zhangsan"
     }).then(function (resp) {
         alert(resp.data);
     })
1
2
3
4
5
6
7

相比之下，Axios框架下的AJAX就显得较为简洁