Web开发基础-CSDN博客

一、REST风格简介

什么是REST风格呢?

REST（Representational State Transfer），表述性状态转换，它是一种软件架构风格。

传统URL风格如下：

http://localhost:8080/user/getById?id=1     GET：查询id为1的用户
http://localhost:8080/user/saveUser         POST：新增用户
http://localhost:8080/user/updateUser       POST：修改用户
http://localhost:8080/user/deleteUser?id=1  GET：删除id为1的用户

我们看到，原始的传统URL呢，定义比较复杂，而且将资源的访问行为对外暴露出来了。

基于REST风格URL如下：

http://localhost:8080/users/1  GET：查询id为1的用户
http://localhost:8080/users    POST：新增用户
http://localhost:8080/users    PUT：修改用户
http://localhost:8080/users/1  DELETE：删除id为1的用户

其中总结起来，就一句话：通过URL定位要操作的资源，通过HTTP动词(请求方式)来描述具体的操作。

在REST风格的URL中，通过四种请求方式，来操作数据的增删改查。

GET ：查询
POST ：新增
PUT ：修改
DELETE ：删除

我们看到如果是基于REST风格，定义URL，URL将会更加简洁、更加规范、更加优雅。

注意事项：

REST是风格，是约定方式，约定不是规定
描述模块的功能通常使用复数，也就是加s的格式来描述，表示此类资源，而非单个资源。如：users、emps、books…

二、Ajax

2.1原生ajax

  <input id="btn1" type="button" value="获取数据">
  
  <div id="div1"></div>
  <script>
      document.querySelector('#btn1').addEventListener('click', ()=> {
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        
        //2. 发送异步请求
        xmlHttpRequest.open('GET', 'https://mock.apifox.cn/m1/3128855-0-default/emp/list');
        xmlHttpRequest.send();//发送请求
        
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
      })
  </script>

2.2 Ajax-Axios

 
 <input type="button" value="获取数据GET" id="btnGet">
 <input type="button" value="删除数据POST" id="btnPost">
 <!-- 1.引入js文件 -->
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <!-- <script src="../js/axios.js"></script> -->
 <script>
     document.querySelector("#btnGet").addEventListener('click', 
         function(){
            
             axios({
                 method: 'GET',
                 url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list'
             }).then((result)=>{     //成功回调函数
                 console.log(result.data);    
                 console.log(result.data.data);    
             }).catch((err)=>{       //失败回调函数
                 alert(err);
             })
         }
     )
     document.querySelector("#btnPost").addEventListener('click', 
         function(){
            
             axios({
                 method: 'POST',
                 url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
                 data: 'id=1'    //封装请求参数
             }).then((result)=>{     //成功回调函数
                 console.log(result.data);    
             }).catch((err)=>{       //失败回调函数
                 alert(err);
             })
         }
     )
     
 </script>