JavaWeb——Ajax

Clrove.112025-03-10 13:56

一、什么是Ajax

概念：Asynchronous JavaScript And XML，异步的JavaScript和XML

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

同步与异步：

Ajax原生方式获取服务器数据：

javascript 复制代码

function getData(){
    //1.创建XMLHttpRequest
    var xmlHttpRequest = new XMLHttpRequest();

    //2.发送异步请求
    xmlHttpRequest.open('GET',"一个网址");
    xmlHttpRequest.send();//发送请求

    //3.获取服务器响应数据
    xmlHttpRequest.onreadystatechange = function(){
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
        }
}

二、Axios

Axios是Ajax的一种现代化替代方案，它在功能性和易用性上都有很大的提升。Axios提供了更为简洁的API和更强大的功能。

Axios方式获取服务器数据：

javascript 复制代码

//通过axios发送异步请求get
function get() {
    axios({
           method: "get",
           url: "一个网址",
           //成功回调函数
           }).then((result) => {
           console.log(result.data);
           });

Axios方式发送数据：

javascript 复制代码

//通过axios发送异步请求post
axios({
      method:"post",
      url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
      data:"id=1"
      }).then((result)=>{
          console.log(result.data);
});

Axios请求方式别名

Axios为简化书写，为各种请求方式定义了别名：

javascript 复制代码

axios.get(url[,config]);
axios.delete(url[,config]);
axios.post(url[,data[,config]]);
axios.put(url[,data[,config]]);

Axios别名方式发送请求：

javascript 复制代码

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    console.log(result.data);
})；


axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id=1").then(result =>{
    console.log(result.data)；         
})