一.Ajax简介

 同步和异步的区别

异步：并行处理，程序向服务器发送一个请求，在结果返回之前，还是可以执行其它操作，不需要等待响应结果

同步：在客户端向服务器发送请求之后，直到服务器处理后逻辑产生响应之后客户端才能执行其他操作。（比如在搜索框内输入网址访问后，只有整个html页面加载出来了，但是点击任何一个地方都没法跳转，只有整个页面完全加载完成，在服务器端响应完成之后，在网页上的操作才会有反应。）

(XML简介：

XML 被设计用来传输和存储数据。HTML 被设计用来显示数据。XML 指可扩展标记语言）

前后端交互的主流方式是JSON

Ajax核心: XMLHttpRequest对象 

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>

XMLHttpRequest属性

二.Axios

简介

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

繁琐写法

简便写法

 

 


    function getData(){
      // axios({
      //   method: 'GET',
      //   url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
      
      // }).then((result)=>
      // {
      //   console.log(result.data);
      // })
      //所需参数拼接在url后面 ？...
      axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>
      {
        console.log(result.data);
      })
    }

      function deleteData(){
      // axios({
      //   method: 'post',
      //   url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
      //   data:"id=1"
      
      // }).then((result)=>
      // {
      //   console.log(result.data);
      // })
      
      //所需参数补在url后面
      axios.post('http://yapi.smart-xwork.cn/mock/169327/emp/deleteById',"id=1").then((result)=>
      {
        console.log(result.data);
      })

三.案例

注：

若是从后台接受的是json数据，可以直接从response.data中获取json数据

在mounted（）钩子函数里发出异步申请

<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>
    
            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
        emps:[]
        },
        mounted () {
          //发送异步请求,加载数据


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

 

 

 

# ajax # javascript # 前端
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

产教协同赋能 AI 创新，华为云高校公开课落地大连理工大学

avatar 华为开发者空间
cover

【GaussDB】GaussDB锁阻塞源头查询

avatar 华为开发者空间

华为云高校公开课走进中山大学，聚焦智能体时代企业级开发能力建设

7月13日，华为云开发者发展与运营部部长林华鼎受邀走进中山大学深圳校区电子与通信工程学院，为30名学生带来《AI编程实战：重构学习生活，洞见企业级开发》专题授课，聚焦智能体时代产业真实需求，输出企业级AI开发核心逻辑与实践方法。后续将与中山大学展开深度对接，探索AI开发课程合作，为学生开展科研辅助、前沿技术洞察提供支持。参与学生表示，本次课程厘清了产业趋势与企业人才需求，明确了可结合电子通信专业场

avatar 华为开发者空间