原生ajax中get和post請求

時間 2020-06-15

標籤原生 ajax post 請求欄目 Ajax 简体版

原文原文鏈接

後臺代碼：html

class AjaxHanlder(tornado.web.RequestHandler):
    def get(self):
        print(self.get_argument('type',None))
        if self.get_argument('type',None):
            self.write("get ok")
        else:
            self.render('ajax_test.html')

    def post(self, *args, **kwargs):
        self.write("post ok")

前端ajax:前端

爲了兼容各個瀏覽器都有ajax方法jquery

    function GetXhr(){
        var xhr=null;
        if(XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
    }

其中get請求通常都把數據放到url中，而不是send()中web

function XhrGetRequest(){
    var xhr=GetXhr();
    //定義回調函數
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            document.getElementsByClassName('reponse')[0].innerHTML=xhr.responseText;
        }
    }
    //指定鏈接方式和地址---文件方式
    xhr.open('get',"/ajax?type=1&kk=2",true);
    //發出請求
    xhr.send(null);
}

只有post請求時，須要將數據放到send()中傳遞，而且須要設置請求頭ajax

function XhrPostRequest(){
    var xhr=GetXhr();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            document.getElementsByClassName('reponse')[0].innerHTML=xhr.responseText;
        }
    }
    xhr.open('post','/ajax',true);
    //post須要設置請求頭
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");
    //發送請求
    xhr.send("type=1&kk=2");
}

使用案例：瀏覽器

<body>
    <form method="post" action="login">
        用戶名：<input id="user" type="text" name="username"> 密碼：<input id="pwd" type="password" name="password"> <input type="checkbox" id="auto" name="auto" value="1"/>七天免登陸 <input type="button" onclick="SubmitForm();" value="登陸"> <span class="err"></span> </form> </body> </html> <script> var xhr=null; function SubmitForm(){ var username=document.getElementById("user").value; var pwd=document.getElementById('pwd').value; var chkEle=document.getElementById('auto'); var chk=null; if(chkEle.checked==true) chk=1; else chk=0; xhr=new XMLHttpRequest(); /*參數 發送方式 發送地址 是否異步*/ //xhr.open('GET',"/login",true);  xhr.open("POST","/login",true); //當readystate值改變時會自動去觸發對應函數，先對這個值進行判斷，在決定對應的函數 //0.未初始化，還沒有調用open //1.啓動，調用了open未調用send //2.發送，調用了send,未收到響應 //3.接收，已經接收到了部分響應消息 //4.完成，已經接收到全部的數據  xhr.onreadystatechange =func; //setRequestHeader(String header,String value)設置請求頭 //getAllResponseHeaders()獲取全部響應頭 //getResponseHeader(String header)獲取響應頭中指定的header的值 //void abort()終止請求 //post發送數據須要設置請求頭  xhr.setRequestHeader('content-type','application/x-www-form-urlencoded; charset-UTF-8') //用於發送數據  xhr.send('username='+username+';password='+pwd+';auto='+chk); //String responseText 服務器返回的數據字符串類型 //XmlDocument responseXML 服務器返回的數據（xml對象） //Number states 狀態碼 //String statesText 狀態碼對應文本  } function func(){ if(xhr.readyState == 4){ console.log(xhr.responseText); var data=xhr.responseText; var ret_dict = JSON.parse(data); if(ret_dict.status){ //登陸成功  }else{ //登陸失敗 var ele=document.getElementsByClassName('err')[0]; ele.innerHTML="<h1 style=\"color:red;\">"+ret_dict.message+"</h1>" } } } </script>

open(請求方式, URL, 是否異步)服務器

send(請求體)app

onreadystatechange，指定監聽函數，它會在xmlHttp對象的狀態發生變化時被調用異步

readyState，當前xmlHttp對象的狀態，其中4狀態表示服務器響應結束函數

status：服務器響應的狀態碼，只有服務器響應結束時纔有這個東東，200表示響應成功；

responseText：獲取服務器的響應體

代碼實例：

<div>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>性別</th>
                <th>班級</th>
                <th>編輯</th>
            </tr>
        </thead>
        <tbody>
                <tr><td>4</td>
                    <td>李四</td>
                    <td>16</td>
                    <td>男</td>
                    <td>C++工程師</td>
                    <td><a onclick="XhrPostRequest(this);">刪除</a>|<a href="/edit_student.html?nid=4">編輯</a></td>
                </tr>
                <tr><td>5</td>
                    <td>fas</td>
                    <td>15</td>
                    <td>男</td>
                    <td>Python工程師</td>
                    <td><a onclick="XhrPostRequest(this);">刪除</a>|<a href="/edit_student.html?nid=5">編輯</a></td>
                </tr>
        </tbody>
    </table>
</div>
</body>

<script>
    var xhr=null
    var thr=null
    function GetXhr(){
        if(XMLHttpRequest){
            var Xh = new XMLHttpRequest();
        }else{
            Xh = new ActiveXObject('Microsoft.XMLHTTP');
        }
        return Xh
    }

    function call_func(){
        if(xhr.readyState == 4){
            var data=xhr.responseText;
            var ret_dict = JSON.parse(data);
            if(ret_dict.status){
                //登陸成功
                alert("刪除成功")
                thr.parentElement.parentElement.remove()
            }
        }
    }

    function XhrPostRequest(ths){
        thr=ths
        xhr=GetXhr();
        xhr.onreadystatechange = call_func;
        var id=thr.parentElement.parentElement.childNodes[0].textContent;
        xhr.open('get','/del_student.html?nid='+id);
        xhr.send();
    }
</script>