Ajax和axios简单用法

Ajax

Ajax(Asynchronous JavaScript And XML,异步的JavaScript和XML)。

作用是:

  • 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
  • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <input type="button" value="获取数据" onclick="getClick()">
</body>
<script>
    function getClick() {
        // 创建一个XMLHttpRequest对象
        let XmlHttpRequest = new XMLHttpRequest();
        
        // 设置请求方式和请求地址
        XmlHttpRequest.open('GET', 'http://yapi.smart-xwork.cn/mock/169327/emp/list');
        XmlHttpRequest.send(); // 发送请求

        // 监听请求状态
        XmlHttpRequest.onreadystatechange = function() {
            if (XmlHttpRequest.readyState === 4 && XmlHttpRequest.status === 200) {
                // console.log(XmlHttpRequest.responseText);
                let data = JSON.parse(XmlHttpRequest.responseText);
                console.log(data);
            }
        }
    }
</script>
</html>

Axios

Axios对原生的Ajax进行了封装,简化书写,快速开发。

需要引入Axios的JS文件 ,使用Axios发送请求,并获取响应结果。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>
        axios({
            method: 'get',
            url: 'http://localhost:3000/lab'
        }).then((response) => {
            console.log(response.data)
        });
        axios({
            method: 'post',
            url: 'http://localhost:3000/lab',
            data: {
                name: 'Lab 1',
                description: 'Lab 1 description'
            }
        }).then((response) => {
            console.log(response.data)
        });
    </script>
</body>
</html>

请求方式别名:

html 复制代码
axios.get(url [,config])
axios.delete(url [,config])
axios.post(url [,data [,config]])
axios.put(url [,data [,config]])

AJAX - XMLHttpRequest 对象 (w3school.com.cn)

Axios中文文档 | Axios中文网 (axios-http.cn)

相关推荐
呆呆没有脑袋2 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe10103 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端
爱编程的喵3 分钟前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了1 小时前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code2 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟2 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试