十、Ajax-axios函数发送请求-移动开发

!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta http-equiv=X-UA-Compatible content=IE=edgemeta name=viewport content=width=device-width, initial-scale=1.0titleaxios发送...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios发送ajax请求</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
    <h2>发送AJAX请求</h2>
    <button>GET</button>
    <button>POST</button>
    <button>Ajax</button>
    <script>
        const btns = document.querySelectorAll('button');
        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';
        btns[0].onclick = function(){
            //GET请求
            // http://127.0.0.1:8000/axios-serve
            axios.get('/axios-server',{
                //url参数
                params:{
                    id:100,
                    vip:7
                },
                //请求头信息
                // headers:{
                //     name:'baidu',
                //     age:20
                // }
            }).then(value =>{
                console.log(value);
            });

        }
        btns[2].onclick = function(){
            axios({
                method:'POST',
               //url
               url:'/axios-server',
               //参数
               params:{
                   vip:10,
                   level:30
               },
               //头信息
               headers: {'Content-Type':'application/x-www-form-urlencoded'},
               //请求参数
               data:{
                   username:'admin',
                   password:'admin'
               }
            }).then(response=>{
                //响应状态码
                console.log(response.status);
                //响应字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }
    </script>
</body>
</html>

//引入express
const express = require('express');

//创建应用对象
const app = express();

//创建路由规则
//request 对请求报文的封装
//response 对响应报文的封装
app.get('/server',(request,response)=>{
    // response.send('hell express');
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HEELO AJAX -2');
});
//all可以接受任意类型的请求
app.all('/server',(request,response)=>{
    // response.send('hell express');
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    // response.setHeader('Access-Control-Allow-Header','*');//接受所有类型的请求头
    //设置响应体
    response.send('HEELO AJAX POST');
});

app.all('/json-server',(request,response)=>{
    // response.send('hell express');
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    // response.setHeader('Access-Control-Allow-Header','*');//接受所有类型的请求头
   //响应一个数据
   const data = {
       name:'baidu',
       age:'23'
   };
   //对对象进行字符串的转换
   let str =JSON.stringify(data);
    //设置响应体
    response.send(str);
});

//针对IE缓存
app.get('/ie',(request,response)=>{
    // response.send('hell express');
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HEELO IE -2');
});

//延时响应
app.all('/delay',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Header','*')
    //定时器3秒
    setTimeout(() => {
        response.send('HEELO Delay');
    },1000)
    
});

//jQuery 服务
app.all('/jquery-server',(request,response)=>{
    // response.send('hell express');
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Header','*')
    //设置响应体
    const data = {name:'百度',时间:'2021'};
    // response.send('HEELO jQuery Ajax');
    response.send(JSON.stringify(data));
});

//axios服务
app.all('/axios-server',(request,response)=>{
    // response.send('hell express');
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Header','*');
    //设置响应体
    const data = {name:'百度',时间:'2021'};
    // response.send('HEELO jQuery Ajax');
    response.send(JSON.stringify(data));
});

//监听端口启动服务
app.listen(8000,()=>{
    console.log("服务启动中，8000端口监听中....");
});