一、查閱開發(fā)文檔

首先，要做這個功能前，我們必須先查閱后臺接口文檔，了解使用登錄接口時，需要提交哪些參數(shù)，并且接口使用返回的數(shù)據(jù)。
這里我使用了一個返回json格式數(shù)據(jù)的登錄接口為例，講解怎么使用Ajax與后臺接口交互。

開發(fā)文檔

由上圖開發(fā)文檔里，我們可以清楚的知道，要使用這個登錄接口，我們只需要提交賬號adminName和密碼pwd兩個參數(shù)。

二、編寫javascript(Ajax)實現(xiàn)登錄

var xmlhttp;
if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
}
else{// IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//上面的http請求對象的生成做了一個瀏覽器兼容性處理
var adminName = document.getElementById('adminName').value;//獲取html表單中adminName輸入域?qū)ο蟮闹担荣~號
var psw = document.getElementById('psw').value;//獲取html表單中pwd輸入域?qū)ο蟮闹担让艽a          

xmlhttp.onreadystatechange=function(){
//當(dāng)接受到響應(yīng)時回調(diào)該方法
        if (xmlhttp.readyState==4 && (xmlhttp.status==200||xmlhttp.status==0))
        {
                    var tip = document.getElementById('tip');//獲取html的tip節(jié)點，主要用于輸出登錄結(jié)果
                    var text = xmlhttp.responseText;//使用接口返回內(nèi)容，響應(yīng)內(nèi)容
                    var resultJson = eval("("+text+")");//把響應(yīng)內(nèi)容對象轉(zhuǎn)成javascript對象
                    var result = resultJson.result;//獲取json中的result鍵對應(yīng)的值
                    var code = resultJson.code;//獲取json中的code鍵對應(yīng)的值
                    if (result=="fail") {//登錄失敗
                        if(code==101){
                            tip.innerHTML = "密碼錯誤!"
                        }else if(code==102){
                            tip.innerHTML = "用戶不存在!"
                        }
                    }else //登錄成功        if(result=="success"&&code==100){
                        window.location.href="center.html";//跳轉(zhuǎn)到centent.html頁面
                    }
          }
} 
 xmlhttp.open("POST","control1/login",true);//以POST方式請求該接口
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加Content-type
 xmlhttp.send("adminName="+adminName+"&psw="+psw);//發(fā)送請求參數(shù)間用&分割

上面的代碼中主要實現(xiàn)請求后臺登錄接口，若登錄成功就跳轉(zhuǎn)到用戶中心，若登錄失敗，根據(jù)返回的code提示用戶登錄失敗的原因。