2023.4.3

ctrl+f:全局替换

alt+鼠标左键：整列编辑

ctrl+alt+l：格式化

AJAX

简介

概念：AJAX：异步（客户端不用等待服务端的反应）的Javascript和XML

AJAX的作用：

1. 与服务器进行数据交互：通过AJAX可以给服务器发送请求，并获取服务器响应的数据

   使用AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了

2. 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的数据，如：搜索联想、用户名是否可用校验，等等

使用步骤

—>用w3school前端技术手册查询要用到的技术步骤和代码

1. 编写AjaxServlet，并使用response输出字符串
2. 创建XMLHttpResquest对象：用于和服务器交换数据
3. 向服务器发松请求
4. 获取服务器响应数据

<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/ajax-demo/ajaxServlet");
    xhttp.send();

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

</script>

xhr:表示异步请求

校验用户是否存在

 

Axios异步框架

基本使用

1. 引入axios的js文件

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

1. 使用axios发送请求，并获取响应结果

get方式

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

post方式

<script>
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (res) {
        alert(res.data);
    })
</script>

请求方式别名

为了方便起见，axios已经为所有支持的请求方式提供了别名

get的别名方式

<script>
    axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (res) {
        alert(res.data);
    })
</script>

post的别名方式

<!--post的别名方式-->
<script>
    axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (res){
        alert(res.data)
    })
</script>