ajax与axios

发布时间 2023-08-17 17:54:01作者: abandon11

概念:ajax(Asynchronous  Javascript And Xml):异步的js和xml

ajax作用:

1、使用ajax和服务器进行通信,就可以使用html+ajax替换jsp页面

2、异步交互

原生ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <button id="myButton">点击我</button>  
<script>

        document.getElementById("myButton").addEventListener("click", function() {
             //1. 创建核心对象
            var xhttp;
            if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2. 发送请求
            xhttp.open("GET", "http://localhost:8080/web-6/ajaxServlet");
            xhttp.send();

            //3. 获取响应
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                       alert(this.responseText);
                }
            };
        });


 </script>

</body>
</html>

 

axios封装ajax

引入js  

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

 

 axios({
     method:"get",
     url:"http://localhost:8080/web-6/aa"
 }).then(function(res){ //响应回来的数据,赋值到res
     alert(res.data);
 })