ajax回掉函數封裝共性的詳解

時間 2020-09-29

標籤 ajax 函數封裝共性詳解欄目 Ajax 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>javascript

<h1>The Ajax 01</h1>
<fieldset>
    <legend>ajax表單請求</legend>
    <form>
        <input type="text" name="name" onblur="doCheck()" onfocus="doClear()">
        <input type="button" onclick="doSave()" value="Save">
    </form>
    <span id="resultId"></span>
    <!-- 但願此位置服務端響應結果 -->
</fieldset>

<script type="text/javascript">
    //點擊框清楚殘留數據    
    function doClear() {
        document.forms[0].name.value = "";//框中數據清空
        document.getElementById("resultId").innerHTML = "";//下面提示數據清空
    }

    //封裝共性；
    function doCheck() {
        //請求url
        var url = "doCheck";
        //定義請求參數
        var name = document.forms[0].name.value;//獲取name的值
        var params = "name=" + name;//傳參數給服務端
        //發送異步請求get
        doAjaxGet(url, params, function(result) {//rsult隨便起的名字這個參數對應下面的callback
            document.getElementById("resultId").innerHTML = result;//獲取上面哪一個span元素的參數

        })

    }
    //檢測名字是否已存在
    function doAjaxGet(url, params, callback) {
        let xhr = new XMLHttpRequest();
        //2.定義HR對象的監聽
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                callback(xhr.responseText);//
                //緩存數據
            }
        }
        //創建鏈接
        //                返回的是doCheck可是拼接了name這個值？
        xhr.open("GET", url + "?" + params, true);
        //發送請求
        xhr.send(null);
    }

    //點擊事件 封裝共性；
    function doSave() {//另外聲明瞭一個函數
        //這個是url的參數
        var url = "doSave";//把值傳給了url的服務端
        //這個是name的參數
        let name = document.forms[0].name.value;//獲取name的數值
        var params = "name=" + name;
        doAjaxPost(url, params, function(a) {
            document.getElementById("resultId").innerHTML = a;//獲取上面哪一個span元素的參數
        })

    }

    //點擊事件
    function doAjaxPost(url, params, callback) {//這裏有url的值和name的數值和新定義的一個參數
        //1/建立XHR對象
        let xhr = new XMLHttpRequest();
        //2.定義XHR對象的監聽
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                callback(xhr.responseText);//調用函數
                //緩存數據
                document.getElementById("resultId").innerHTML = xhr.responseText;
            }
        }
        //3.創建鏈接(post須要設置請求頭信息)
        xhr.open("POST", url, true)//異步請求
        xhr.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded");//這個是設置請求頭
        //4.發送請求

        let name = document.forms[0].name.value;//獲取name的值
        //構建參數對象三種方式
        //var p="name="+name;淘汰
        //let p = `name=${name}`;//模板字符串            //var p={"name":name};js對象原生的ajax是不能這樣用的
        xhr.send(params);//post的請求參數須要寫到此位置
        //接受name的數值
    }
</script>

</body>
</html>html