前后端如何进行交互

前端向服务器发送请求，服务器接收到请求对请求进行处理，(根据用户的需求从数据中获取数据)，并将处理拿到的数据响应给前台、

ajax交互图

接口文档

0	请求初始化
1	服务器链接已经建立
2	请求已经接受
3	请求处理中
4	请求已经完成 并且响应已经就绪

status

status	200	0k
	404	没有找到页面
	500	代码有误

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

get与post请求

GET	POST	备注
GET请求偏向于查询（获取数据....）	POST请求偏向于提交数据(注册，修改，删除....)	从语义去区分GET和POST
GET显示的携带参数,参数是直接拼接在请求地址之后，安全性较差，隐私性差	POST隐式的携带参数，不会在请求地址上进行显示，安全性好。	POST请求都是以JSON格式进行传参
GET 的请求数据长度有大小限制，根据浏览器的不同，限制在2k~8K	POST请求没有限制
GET请求可以被缓存	POST请求不会被缓存

使用AJAX进行前后台交互

//创建XMLHttprequest对象
const xhr = new XMLHttpRequeat();
//进行发送请求的配置
xhr.open("请求方式","请求地址",同步还是异步)//同步时false 异步true
//发送请求
xhr.send();
//设置服务器响应数据onreadystatechange
xhr.onreadystatechange = function(){
    if (xhr.readyState === 4 && xhr.status === 200) {
                const result = JSON.parse(xhr.responseText);
                console.log(result);
            } 
}

get请求

        //get请求
        const xhr = new XMLHttpRequest();
        // 将参数写在url地址的后面,请求地址?参数名=参数值&参数名=参数值&参数名=参数值
        xhr.open("GET","http://81.70.153.180:8081/api/getStudentList?sname=王",true);//请求方式  请求地址  是否异步
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState===4&&xhr.status===200){
                // 获取服务器给客户端响应的数据(数据格式：JSON格式----->JSON格式的字符串)
            // 将JSON格式的字符串转换成对象  JSON.parse()
                const reasult=JSON.parse(xhr.responseText);
                console.log(reasult);
            }
        }

post请求

 //创建xhr  XMLHTTPRequeat
        const xhr = new XMLHttpRequest();
        xhr.open("POST","http://81.70.153.180:8081/api/login",true);
        xhr.setRequestHeader("Content-Type","application/json;charset=UTF-8");
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&&xhr.status===200){
                const result = JSON.parse(xhr.responseText);
                console.log(result)
            }
        }
        //发送请求
        xhr.send(JSON.stringify({'sid':'s0001','password':'123456'}));

使用axios发送请求

get请求

 //axios方式发送get请求  需要使用.then方法
        axios.get("http://81.70.153.180:8081/api/getStudentList?sname=王").then(res=>{
            console.log(res)
        })
        //使用params 传入条件
          axios.get("http://81.70.153.180:8081/api/getStudentList",{params:{sid:'s0001',sname:'王'}}).then(res=>{
            console.log(res)
          })
        axios({
            url:"http://81.70.153.180:8081/api/getStudentList",
            method:"get",
            params:{
                sid:'s0001',
                sname:'王'
            }
    }).then(res=>{
        console.log(res)
    })

post请求

        axios({
            url:"http://81.70.153.180:8081/api/login",
            method:"POST",
            header:{'Content-Type':'application/json'},
            data:{
                sid:'s0001',
                password:'******'
            }
          }).then(res=>{
            console.log(res)
          }
            
          );

//第二种方法
   axios.post('http://81.70.153.180:8081/api/login', {
                sid: 's0001',
                password: "123456"
             }).then(res => {
             console.log(res);
         });

使用fetch请求数据，fetch属于原生

get请求

        //使用fetch发送get请求
        fetch('http://81.70.153.180:8081/api/getStudentList?sid=s0001&sname=王').then(res=>{
            if(res.ok){
                return res.json()
            }
        }).then(data=>{
            console.log(data)
        });
​

post请求

       //使用fetch发送poat请求
        fetch('http://81.70.153.180:8081/api/login',{
        method:'POST',
         body:JSON.stringify({
            sid:'s0001',
            password:'123456'
         }),
       headers:{
            'Content-Type':'application/json'
         }
       }).then(res=>{
            if(res.ok){
                return res.json()
            }
        }).then(data=>{
            console.log(data)
        })