Ajax及Axios

原创已于 2025-11-21 09:06:09 修改 · 784 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #前端

于 2025-11-19 19:58:04 首次发布

前端专栏收录该内容

3 篇文章

订阅专栏

Ajax

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

作用：

数据交换：通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

原生Ajax

准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
创建 XMLHttpRequest 对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据

<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>
</body>

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

        //2. 发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求

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

Axios

介绍：Axios 对原生的 Ajax 进行了封装，简化书写，快速开发。
官网：https://www.axios-http.cn/

安装

npm install axios

引入 Axios 的 js 文件

需在页面中引入 Axios 的 JavaScript 文件，示例代码：

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

使用 Axios 发送请求并获取响应结果

GET 请求示例

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

POST 请求示例：

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

简化写法

发送 GET 请求

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

发送 POST 请求

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