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

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

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

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輸入域對象的值，既賬號
var psw = document.getElementById(‘psw‘).value;//獲取html表單中pwd輸入域對象的值，既密碼          

xmlhttp.onreadystatechange=function(){
//當接受到響應時回調該方法
        if (xmlhttp.readyState==4 && (xmlhttp.status==200||xmlhttp.status==0))
        {
                    var tip = document.getElementById(‘tip‘);//獲取html的tip節點，主要用於輸出登錄結果
                    var text = xmlhttp.responseText;//使用接口返回內容，響應內容
                    var resultJson = eval("("+text+")");//把響應內容對象轉成javascript對象
                    var result = resultJson.result;//獲取json中的result鍵對應的值
                    var code = resultJson.code;//獲取json中的code鍵對應的值
                    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";//跳轉到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);//發送請求參數間用&分割
 

上面的代碼中主要實現請求後臺登錄接口，若登錄成功就跳轉到用戶中心，若登錄失敗，根據返回的code提示用戶登錄失敗的原因。

使用Ajax與後臺接口Api交互(以登陸功能為例)