Ajax技術進階--Ajax關鍵代碼的封裝(Post請求)

時間 2020-12-09

標籤 javascript html java ajax app 異步 post url spa 設計欄目 Ajax 简体版

原文原文鏈接

<!-- 客戶端代碼實現 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- html關鍵表單元素設計    -->
    <h1>The Ajax 03 Page</h1>
<!-- 該標籤的做用是把表單中的相關控件集中起來，造成一個控件組-->
<fieldset>
<!--該標籤用於定義fieldset標籤控件組下的標題 -->
    <legend>Ajax 表單請求</legend>
    <form>
        <input type="text" name="name" id="nameId"          onblur="doCheck()" onfocus="doClear()">
        <input type="button" onclick="doSave()"    value="save">
    </form>
        <span id="result"></span>
    </fieldset>
    <!--添加JS關鍵業務代碼    -->
    <script type="text/javascript">
    
    //封裝共性,提取特性
    
    //保存表單中名字的值(特性)
    function doSave(){
        //1.定義請求的url
        const url="/doSave";
        //2.定義請求參數
        let name=document.forms[0].name.value;
        let params=`name=${name}`;
        //3.發送ajax-get請求
        doAjaxPost(url,params,function(result1){
        alert(result1);//響應結果不一樣的處理方式
    });
    }  
    //Post方法的共性以下：
    function doAjaxPost(url,params,callback){
        const xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                callback(xhr.responseText);
    }
        }
        xhr.open("POST",url,true);
        //使用post請求要設置請求頭（規定）
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //4.發送異步請求實現與服務端的通信
        xhr.send(params);//Post請求send方法傳值
    }
    </script>
</body>
</html>