AJAX & AXIOS-2024/11/1

AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
AJAX作用:

1. 与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器

• 以达到使用 HTML+AJAX来替换JSP页面

2. 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…
   AJAX判断用户名是否存在 前端主要代码

 document.getElementById("username").onblur = function(){
        var username = this.value;
        //调用ajax传给SelectUserServlet
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET","http://localhost:8080/brand-demo/selectUserServlet?username="+username);
        xhttp.send();
        xhttp.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                if(this.responseText == "true"){
                    document.getElementById("username_err").style.display = "block";
                }else{
                    document.getElementById("username_err").style.display = 'none';
                }
            }
        }
    }

AXIOS

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

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

<script>
    //1.get
    // axios({
    //     method:"get",
    //     url:"http://localhost:8080/brand-demo/axiosServlet?username='zhangsan"
    // }).then(function (resp) {
    //     alert(resp.data);
    // })

    //get请求简化方式
    axios.get("http://localhost:8080/brand-demo/axiosServlet?username=zhangsan")
        .then(function (resp) {
            alert(resp.data);
        })

    //2.post
    // axios({
    //     method:"post",
    //     url:"http://localhost:8080/brand-demo/axiosServlet",
    //     data:"username=lisi"
    // }).then(function (resp) {
    //     alert(resp.data);
    // })
    //post请求简化方式
    axios.post("http://localhost:8080/brand-demo/axiosServlet","username=lisi").then(function (resp) {
        alert(resp.data);
    })
</script>