AJAX

80 阅读1分钟

AJAX作用

1.与服务器进行数据交换:通过AJAX可以给服务器发送请求,并获取服务器响应的数据,使用了AJAX和服务器进行通信,就可以使用HTML+AJAX来替换SP页面了

2.异步交互:可以在不重新加截整个页面的情况下,与服务器交换数掘并更新部分网页的技术,如:搜索联想.用户名是杏可用校验,等等..

同步和异步

同步异步.png

AJAX快速入门

~P`~J5N8_2XED3Y02_4ZSM3.png

Axios快速入门

导入js文件

js文件.png

servlet部分代码

package cn.lexed.servlet;
​
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
​
​
@WebServlet("/axiosA")
public class Axios1 extends HttpServlet {
    private static final long serialVersionUID = 1L;
​
   
​
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        //响应数据到Html 浏览器解析html   
        response.getWriter().write("hello axios~");
    }
​
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
​
        doGet(request, response);
    }
​
}
​

html部分代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- 1.引入axios的js文件 -->
<script src="js/axios-0.18.0.js"></script>
<script>
    axios({
        
        method:"get",   //请求方式
        url:"http://localhost:8080/AJAX20230817/axiosA"
        
    }).then(function(resp){  //服务器响应回来的数据赋值到resp
        
        alert(resp.data);
        
    })
​
​
</script>
<body></body>
</html>

结果展示

展示.png

Axios请求方式别名

请求方式.png

作者:大奥
感谢您的观看