Ajax入门程序 - 技术栈

前端和后台本来是没有联系的，前端想要从后台获取数据，就必须涉及到两个程序的交互，而Ajax就是用于完成两端交互的技术。

Ajax：Asynchronous JavaScript And XML：异步的JavaScript和XML。

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

Ajax的主要作用：

1.和服务器进行数据交互

前端资源虽然被浏览器解析了，但是缺少数据；可以通过Ajax技术，像后台服务器发起请求，后台服务器收到前端请求。

从数据库中按要求获取数据响应给前端，前端得到数据，再渲染展示。

2.异步交互

可以在不重新加载整个页面的情况下，和服务器交换数据，并更新部分网页。

同步和异步：

同步请求：服务器接收，服务器处理请求，需要时间------此时客户端必须等待服务器响应的时间，等到服务端响应之后，客户端才能继续处理。

异步请求：其他和同步请求类似，但是只是在等待服务端响应的时候，客户端可以进行其他操作，无需等待。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax入门</title>
</head>
<body>

    
</body>
<script>
    // 前端和后台本来是没有联系的，前端想要从后台获取数据，就必须涉及到两个程序的交互，而Ajax就是用于完成两端交互的技术
    // Ajax：Asynchronous JavaScript And XML：异步的JavaScript和XML
    // 异步交互：可以在不重新加载整个页面的情况下，和服务器进行交换数据并更新部分网页，比如：搜索联想、用户名校验
    
    // Ajax的主要作用：
    // 1.和服务器进行数据交互
    //     前端资源虽然被浏览器解析了，但是缺少数据；可以通过Ajax技术，像后台服务器发起请求，后台服务器收到前端请求
    //     从数据库中按要求获取数据响应给前端，前端得到数据，再渲染展示
    // 2.异步交互
    //     可以在不重新加载整个页面的情况下，和服务器交换数据，并更新部分网页
    // 同步和异步：
    //     同步请求：服务器接收，服务器处理请求，需要时间------此时客户端必须等待服务器响应的时间，等到服务端响应之后，客户端才能继续处理
    //     异步请求：其他和同步请求类似，但是只是在等待服务端响应的时候，客户端可以进行其他操作，无需等待
        
</script>
</html>

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios</title>
</head>

<body>
    <button id="getData" type="button">GET</button>
    <button id="postData" type="button">POST</button>
</body>

<script src="js/axios.js"></script>
<script>
    // 使用原生的Ajax请求还是比较繁琐，所以说一般使用Axios，Axios是对于Ajax的封装，主要是为了简化书写

    // Axios使用比较简单，主要分为两步
    // 1.在script标签的src中引入Axios文件
        // 特别注意，这里是需要一对单独的script标签进行引入，而不是在引入的script标签中写代码
    // 2.编写Axios代码，并绑定按钮

    // Get请求：
    //GET请求
    // document.querySelector('#getData').onclick = function() {
    //   axios({
    //     url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
    //     method:'get'
    //   }).then(function(res) {
    //     console.log(res.data);
    //   }).catch(function(err) {
    //     console.log(err);
    //   })
    // }

    // //POST请求
    // document.querySelector('#postData').onclick = function() {
    //   axios({
    //     url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
    //     method:'post'
    //   }).then(function(res) {
    //     console.log(res.data);
    //   }).catch(function(err) {
    //     console.log(err);
    //   })
    // }

    // Axios还针对了不同请求，提供了不同的api
    // axios.请求方式(url, data, config) （data是post请求需要携带的数据，config是配置信息）
    // 可以简化代码
    document.querySelector("#getData").addEventListener('click', function () {
        axios.get("https://mock.apifox.cn/m1/3083103-0-default/emps/list").then(result => {
            console.log(result.data)
        }).catch(error => {
            console.log(error)
        });
    })
</script>

</html>