原生JS、Ajax、Axios发送Ajax请求的对比

今天药忘吃喽~ 2023-09-28 09:23 70阅读 0赞

#### 原生JS发送Ajax请求 ####

POST

<!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>Document</title>
        <script>
            window.addEventListener('load',function(){
                //获取form对象
                var form = document.querySelector('form');
    
                //添加form的submit监听事件
                form.addEventListener('submit',function(e){
                    //阻止默认行为
                    e.preventDefault(); 
    
                    //创建FormData，快速获取form表单的数据
                    var fd = new FormData(form);
    
                    //原生xhq对象和使用
                    // 1. 创建 XHR 对象
                    var xhr = new XMLHttpRequest();
                    // 2. 调用 open 函数，指定 请求方式 与 URL地址
                    xhr.open('POST','http://localhost:9090/test');
                    // 3. 调用 send 函数，发起 Ajax 请求
                    xhr.send(fd);
    
                    // 4. 监听 onreadystatechange 事件（服务器响应后）
                    xhr.onreadystatechange = function(){
                        // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
                        if(xhr.readyState === 4 && xhr.status === 200){
                            // 4.2 打印服务器响应回来的数据  xhr.responseText 代表服务器响应的数据
                            // console.log(JSON.parse(xhr.responseText));  //如果是json格式，则通过这一句把json转为js对象
                            var data = xhr.responseText;
                            console.log(data)
                        }
                    }
                })
            })
        </script>
    </head>
    <body>
        
        <form>
            <input type="text" name="name" value="" placeholder="name">
            <input type="text" name="age" value="" placeholder="age">
            <input type="submit" value="submit">
        </form>
    </body>
    </html>

GET

把参数转为【查询字符串】格式，然后拼接到url后面即可

--------------------

#### jQuery发送Ajax请求 ####

GET

<!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>Document</title>
        <script src="js/jquery-3.4.1.js"></script>
        <script>
            $(function(){
                $('form').on('submit',function(e){
                    //Step1.阻止submit的默认行为
                    e.preventDefault();
    
                    //Step2.获取表单内所有的数据【各个input 一定要有name属性！】得到的是一个 查询字符串
                    var str = $('form').serialize();
    
                    //Step3.发送Ajax请求
                    $.ajax({
                        url: "http://localhost:9090/test", //后端地址
                        type: "text",       //提交方式
                        method: "GET",
                        data: str,
                        dataType: "text",       //规定请求成功后返回的数据
                        success: function (data) {
                            //请求成功之后进入该方法，data为成功后返回的数据
                            console.log(data);
                            console.log("发送ajax成功");
                        },
                        error: function (errorMsg) {
                            console.log(errorMsg);
                            console.log("发送ajax失败");
                        }
                    });
    
                })
            })
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="name" value="" placeholder="name">
            <input type="text" name="age" value="" placeholder="age">
            <button type="submit">submit</button>
        </form>
    </body>
    </html>

POST

<!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>Document</title>
        <script src="js/jquery-3.4.1.js"></script>
        <script>
            $(function(){
                $('form').on('submit',function(e){
                    //Step1.阻止submit的默认行为
                    e.preventDefault();
    
                    //Step2.获取表单内所有的数据【各个input 一定要有name属性！】得到的是一个 查询字符串
                    var str = $('form').serialize();
    
                    //Step3.发送Ajax请求
                    $.ajax({
                        url: "http://localhost:9090/test", //后端地址
                        type: "text",       //提交方式
                        method: "POST",
                        data: str,
                        dataType: "text",       //规定请求成功后返回的数据
                        success: function (data) {
                            //请求成功之后进入该方法，data为成功后返回的数据
                            console.log(data);
                            console.log("发送ajax成功");
                        },
                        error: function (errorMsg) {
                            console.log(errorMsg);
                            console.log("发送ajax失败");
                        }
                    });
    
                })
            })
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="name" value="" placeholder="name">
            <input type="text" name="age" value="" placeholder="age">
            <button type="submit">submit</button>
        </form>
    </body>
    </html>

--------------------

#### Axios发送Ajax GET请求 ####

GET

<!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>Document</title>
        <script src="js/axios.js"></script>
        <script>
            window.addEventListener('load',function(){
                var form = document.querySelector('form');
    
                form.addEventListener('submit',function(e){
                    //1.消除默认事件
                    e.preventDefault();
                    //2.设置相关数据（form表单通过FormData获得对象，再把这个对象通过我们自己写的函数formdataTojson转为json格式的【对象】）
                    var formdata = new FormData(form);
                    var jsonObj = formdataTojson(formdata);
                    
                    //3.通过axios发送ajax请求
                    axios({
                        method: 'GET',
                        url: 'http://localhost:9090/test',
                        // GET 参数要通过 params 属性提供【这个jsonObj是一个json格式的对象】
                        params: jsonObj
                    }).then(function(res) {
                        console.log(res.data)
                    })
                })
    
    
                //FormData 格式化 json格式的对象  函数
                function formdataTojson(formData){
                    var object = {};
                    formData.forEach(function(value, key){
                        object[key] = value;
                    });
                    // return JSON.stringify(object);  //把这个注释取消掉，就相当于返回json啦
                    return object;
                }
    
            })
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="name" placeholder="name" value="">
            <input type="text" name="age" placeholder="age" value="">
            <button type="submit">submit</button>
        </form>
    </body>
    </html>

POST

<!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>Document</title>
        <script src="js/axios.js"></script>
        <script>
            window.addEventListener('load',function(){
                var form = document.querySelector('form');
    
                form.addEventListener('submit',function(e){
                    //1.消除默认事件
                    e.preventDefault();
                    //2.设置相关数据（form表单通过FormData获得对象，再把这个对象通过我们自己写的函数formdataTojson转为json格式的【对象】）
                    var formdata = new FormData(form);
                    var jsonObj = formdataTojson(formdata);
                    
                    //3.通过axios发送ajax请求
                    axios({
                        method: 'POST',
                        url: 'http://localhost:9090/test',
                        // GET 参数要通过 params 属性提供【这个jsonObj是一个json格式的对象】
                        data: jsonObj
                    }).then(function(res) {
                        console.log(res.data)
                    })
                })
    
    
                //FormData 格式化 json格式的对象  函数
                function formdataTojson(formData){
                    var object = {};
                    formData.forEach(function(value, key){
                        object[key] = value;
                    });
                    // return JSON.stringify(object);  //把这个注释取消掉，就相当于返回json啦
                    return object;
                }
    
            })
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="name" placeholder="name" value="">
            <input type="text" name="age" placeholder="age" value="">
            <button type="submit">submit</button>
        </form>
    </body>
    </html>

--------------------

#### 数据格式 ####

HTML5的formdata对象转换form获得的数据格式： \{\[K,V\] , \[K,V\] , \[K,V\]\}

*  原生JS发送Ajax的常用格式

resilize方法转换form对象获得的数据格式(查询字符串)： K=V&K=V&K=V

*  jQuery发送Ajax的常用格式：rerialize转为的查询字符串

json数据格式： \{K=V , K=V , K=V\}

*  需要通过自己编写一个函数，把formdata转为json对象，json对象作为Axios的数据传输格式