ajax實現使用者登入註冊和退出

ajax實現使用者註冊登入和退出 第一步：驗證使用者名稱

get
guestbook/index.php
m:index
a:verifyUserName
username:要驗證的使用者名稱
返回{
code:返回的資訊代碼 0=沒有錯誤，1=有錯誤
message: 返回的資訊 具體返回的資訊
} 第二步： 使用者註冊

post
guestbook/index.php
m:index
a:reg
username:要驗證的使用者名稱
password:註冊密碼
返回{
code:返回的資訊代碼 0=沒有錯誤，1=有錯誤
message: 返回的資訊 具體返回的資訊
} 第三步： 使用者登入

當登入成功時，調用更新狀態函數
post
guestbook/index.php
m:index
a:login
username:要登入的使用者名稱
password:登入密碼
返回{
code:返回的資訊代碼 0=沒有錯誤，1=有錯誤
message: 返回的資訊 具體返回的資訊
} 第四步：檢驗cookie

寫一個擷取cookie的函數，根據cookie值是否存在來寫一個更新使用者狀態的函數 第五步：使用者退出

當使用者退出時，調用更新狀態函數
post
guestbook/index.php
m:index
a:logout
返回{
code:返回的資訊代碼 0=沒有錯誤，1=有錯誤
message: 返回的資訊 具體返回的資訊
} （以上是步驟說明和一些後端介面）

完整代碼如下

window.onload=function(){    var oUsername1=document.getElementById('username1');//使用者名稱框（註冊）    var oVerifyUserNameMsg=document.getElementById('verifyUserNameMsg');//驗證驗證使用者名稱提示框（註冊）    var oPassword1=document.getElementById('password1');//密碼框（註冊）    var obtnReg=document.getElementById('btnReg');//提交按鈕（註冊）    var oUsername2=document.getElementById('username2');//使用者名稱框（登入）    var oPassword2=document.getElementById('password2');//密碼框（登入）    var obtnLogin=document.getElementById('btnLogin');//提交按鈕（登入）    var oReg=document.getElementById('reg');//註冊框    var oLogin=document.getElementById('login');//登入框    var oUser=document.getElementById('user');//退出框    var oUserinfo=document.getElementById('userinfo');//使用者名稱（退出框）    var oLogout=document.getElementById('logout');//退出按鈕（退出框）    function getCookie(key){         //擷取cookie值            var arr=document.cookie.split('; ');            //console.log(arr);            for(var i=0;i<arr.length;i++){                var arr2=arr[i].split('=');                console.log(arr2);                if(arr2[0]==key){                    return arr2[1];                }            }        };    updataUser();    function updataUser(oUid){  //更新狀態函數        var oUid=getCookie('uid');        var oUsername=getCookie('username');        if(oUid){            oUser.style.display='block';            oUserinfo.innerHTML=oUsername;            oReg.style.display='none';            oLogin.style.display='none';        }else{            oUser.style.display='none';            oUserinfo.innerHTML="";            oReg.style.display='block';            oLogin.style.display='block';        }    }    oUsername1.onblur=function(){    //使用者名稱驗證        ajax('get',"guestbook/index.php",'m=index&a=verifyUserName&username='+this.value,function(data){            var info=JSON.parse(data);             oVerifyUserNameMsg.innerHTML=info.message;             if(info.code){                oVerifyUserNameMsg.style.color='red';             }else{                oVerifyUserNameMsg.style.color='green';             }        });    };    obtnReg.onclick=function(){     //註冊提交按鈕        ajax('post','guestbook/index.php',            'm=index&a=reg&username='+encodeURI(oUsername1.value)+'&password='+oPassword1.value,            function(data){            var info=JSON.parse(data);            alert(info.message);            if(!info.code){                oReg.style.display='none'            }        });    };    obtnLogin.onclick=function(){        //登入提交按鈕        ajax('post','guestbook/index.php',            'm=index&a=login&username='+encodeURI(oUsername2.value)+'&password='+oPassword2.value,            function(data){                var info=JSON.parse(data);                alert(info.message);                if(! info.code){                    updataUser();                }            });    };           oLogout.onclick=function(){  //退出提交按鈕            ajax('post','guestbook/index.php',                'm=index&a=logout',function(data){                var info=JSON.parse(data);                alert(info.message);                if(! info.code){                    updataUser();                }            });            return false;           }}