axios、ajax和xhr前端發送測試

時間 2019-11-13

標籤 axios ajax xhr 前端發送測試欄目 Ajax 简体版

原文原文鏈接

其實axios和ajax都對原生的xhr進行了封裝，我的感受仍是axios簡潔、方便，尤大大都讓咱們轉axios了，確實對於ajax好了很多，它支持了promise對象，支持js最新的規範。簡單易用。css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script> -->
     <!-- vue -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 推薦使用：axios HTTP Client 網絡通訊的函數庫 -->
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <table class="table">
            <thead>
                <tr>
                    <th>學生姓名</th>
                    <th>學生電話</th>
                    <th>學生班級</th>
                    <th>操做</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v, index) in stu" :key="index">
                    <td scope="row">{{v.vname}}</td>
                    <td>{{v.vphone}}</td>
                    <td>{{v.vclazz.mtitle}}</td>
                    <td>
                        <button type="button" @click="ajaxdelete(v.vid)" class="btn btn-danger">刪除</button>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</body>


<script>
    new Vue({
        el: '#app',
        data: {
            stu: []
        },
        mounted() {
            axios.get("/allstu").then((r) => {
                console.log("data:", r.data)
                this.stu = r.data;
            });
        //    $.ajax({
        //        url:"/test",
        //        type:'post',
        //        contentType:"application/json; charset=utf-8",
        //        data:JSON.stringify(1),
        //        success:function(r){
        //            console.log("測試實數",r);
        //            console.log("ok");
        //        }
        //    });
        this.xhrtest();
        },
        methods: {
            ajaxdelete:function(id){
                console.log("id",id);
                $.ajax({
                    url:"/delete",
                    type:"POST",
                    contentType: "application/json; charset=utf-8",
                   data:JSON.stringify(id),
                    succcess:()=>{
                        alert("成功提交!")
                    }
                    
                })
            },
            xhrtest:function(){
                // 建立xhr對象
                let xhr ;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }
                //發送請求
                //若是修改第三個參數爲true，你會發現，以後的xhr成功返回數據，可是status不會執行if語句，也就是說，你看不到「這個成功了」的輸出
                //若是改成false，google瀏覽器會提示你這個同步的xmlHttpRequest已通過時了，由於它影響了用戶體驗
                // Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
                xhr.open("POST","/test",true);
                xhr.setRequestHeader('Content-Type', ' application/json');
                //發送請求數據
                xhr.send(JSON.stringify(1));
                // if((xhr.status >= 200 && xhr.status< 300)|| xhr.status == 304){
                //     alert(xhr.responseText);
                //     console.log("這個成功了了！")

                // }else{
                //     alert('request was unsuccessful:'+xhr.status);
                //     console.log("狀態碼：",xhr.status);
                //     console.log("xhr測試失敗！");
                // }
                // 返回的響應有：
                // responseText:做爲響應主體被返回的文本
                // responseXML:XML文檔
                // status , statusText:狀態碼說明
                //若是爲true，表示異步通訊,應該改成以下方式
                xhr.onreadystatechange  =function(){
                    if(xhr.readyState == 4){
                        if((xhr.status >= 200&& xhr.status<300)||xhr.status ==304){
                         alert(xhr.responseText);
                         console.log("ok");
                        }else{
                            alert("Request was unsuccessful:"+xhr.status);
                        }
                    }
                }
            }

        }
    });
</script>

</html>