初涉後端，還請見諒···By Ajax驗證註冊的賬號資料庫中是否存在

前端小鐵人發表於2019-10-16
後端資料庫

#By Ajax驗證註冊的賬號資料庫中是否存在

初涉後端，如有冒犯，還請後端大哥指正

Ajax的存在，給了我們真的事太多驚喜。這種技術的存在就是讓我們在無需重新整理頁面，就可以從資料庫中取得資料。

不BB了，上程式碼~
Ajax：（這裡以傳送post請求為例）
    1.建立一個物件：
        let xhr = new XMLHttpRequest();
    2.配置這個物件(呼叫open()的方法)
        //第一個引數為請求的型別、第二個引數為請求的URL，第三個引數為是否非同步傳送的布林值
        xhr.open('GET',`/marvel/api/checkuser.php?username=${user}`,true)
    3.準備接受響應（readystate是物件xhr的一個屬性，在這裡我們利用事件監聽這個屬性的狀態的改變）
    xhr.onreadystatechange = function() {
        //當readyState發生了變化，會觸發該事件。
            xhr.readyState ===0 ===>xhr這個物件剛建立，但是沒有呼叫
            xhr.readyState ===1 ===>物件呼叫了，但是沒有send
            xhr.readyState ===2 ===> 物件呼叫了send，但是沒有返回響應
            xhr.readyState ===3 ===>物件收到了部分響應
            xhr.readyState ===4 ===>收到了全部的響應
        //我們對數值進行判斷，如果!=4,就return
        if(xhr.readyState !=4) {
            return;
        }
        //如果xhr這個物件的屬性readyState ===4；伺服器已經給出了全部的響應。但是我們還需要進一步去判斷瀏覽器的相應結果，也就是響應的狀態碼。這個狀態碼放置在xhr.status中，當狀態碼在[200,300)之間，我們就可以認為其響應成功。
        if(xhr.status >=200 &&xhr.status < 300) {
            //響應成功，我們需要取得響應的資料，放在物件xhr的responseText中.
            alert(xhr.responseText);    //responseText是滿足json格式的字串
        }else{
            //響應失敗
        }
    }
    //4.傳送請求
    xhr.send(); //呼叫xhr的send()方法。在括號中不必寫入確切值。
    change
【另需要注意的是ajax是不支援後端請求重定向的】

解釋：對於ajax，本文介紹的很籠統，只是向大家解釋最基本的ajax傳送get請求的基本方法與驗證註冊賬號是否存在，所以，我們還沒完呢~
很多事情的操作都是離不開對DOM的操作的，我們要驗證註冊的賬號，就必須取得這個賬號之後傳送給後端。
document.querySelector('input[name="username"]').onblor = function() {
    var user = this.value;
    //把上文的ajax放在這就OK了。
}

本屌絲寫了這麼多的程式碼難道就不能給我一個贊嘛。
複製程式碼

相關文章