簡單的先後端交互流程（AJAX）

這是我寫的第一篇文章，想一想還有點小激動呢。本着助人爲樂的思想，認識了一些前端的初學者，幫助他們更快的步入到前端這個一個行業。今天呢，我想要說的主題是：工做中的先後端交互。

1.古老的表單提交
    這種形式呢，比較早，之後端爲主。前端提交表單，後端驗證(jsp,request.getParameter(""))。這種方式後端作的比較多，我就不特別說明了。
2.AJAX的數據提交
    這種形式呢，如今用的較多。後端基本就作接口，作權限，其餘的都交由前端去完成。這個呢就是咱們今天主要說的。
3.表單和AJAX結合
    適合的纔是最好的。這點我深信不疑

---

常見的幾種方式，我已經說明了。接下來咱們談一談咱們須要什麼東西。
場景一：

XXX:咱們公司要作接口，我要怎麼辦？
LN:哦，接口文檔發我看看。
XXX:什麼是接口文檔，我沒有啊？
LN:接口文檔由四部分組成：（這個看我的習慣有的寫得特別簡陋，因此第一次的時候問清楚每一個參數意思）
    1.接口地址 URL
    2.請求方式 get/post
    3.請求參數 page,pageNum
    4.響應參數 state,list
XXX:哦哦，這樣啊，那我和他們要一下。
    接口：/mvc/training/ge
    請求：key,orderBy,begin,length
LN:沒給你響應，也沒有給你請求方式啊。
    1.給接口補全URL,域名/mvc/training/ge。
    2.把你補全的URL，扔到瀏覽器的地址欄，看看返回的是什麼。固然若是請求參數裏面有必填項，那你要用URL?key=value&key2=value2的形式模擬get請求。
        2.1 瀏覽器把服務器端的響應給你顯示了出來。而後你對照這個問後端人員每一個是什麼意思。
        2.2 拋出405錯誤。這個就比較悽慘了。禁止get請求，那你有兩種方式一個是下載一款軟件能夠模擬post請求，一個是直接寫AJAX，而後改爲post方式。
    3.由上面咱們已經知道接口的四部分了，那咱們就要用ajax獲取個人數據了.
     $.ajax({
             url: "/mvc/training/ge",//請求接口
             type: "POST",//請求方式
             data: {key:1},//請求參數
             dataType: "json",//響應類型
             success: function(data, textStatus){//訪問成功的回調函數，參數是響應，描述狀態的字符串
                 console.log(data);
             },
             error: function(XMLHttpRequest, textStatus, errorThrown){//訪問失敗的回調函數，參數是XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選);
             }
    });
    我的大力推薦這個，第二步就能夠省去了。success的console.log(data);也能夠看到響應，完美的劇情。固然，你不要告訴我，你不會看控制檯。
XXX:恩恩。好的。我試試去。

---

場景二：
XXX:這是個人接口。我要怎麼作個人頁面啊。邏輯怎麼寫。

LN:

$.ajax(
    method:"GET",//對於請求類型
    url:"/isNickName",//請求url，這個我抹黑了。直接複製過來就能夠了
    dataType: 'json',
    data: {nickName:$.trim($("#checktips").val())},//這個是一個驗證是否重名的接口。參數只有一個 名字
).done(function(data){
    if(data.code == 0){//data.code的值這個是後端人員規定的。
        console.log("請求成功");
        if(data.object==1){//1爲重複
            console.log("這個nickName重複啦");
            $("#retips").show();
        }else if(data.object==0){
            console.log("這個nickName不重複");
            $("#retips").hide();
        }else{
            console.log("未知異常");
        }
    }else if(data.code == -2){
        console.log("你沒有權限，一般來說，你是沒有登陸");
    }else if(data.code == -5){
        console.log("參數錯誤哦。");
    }else{
        console.log(data.result);
    }
}).fail(function(a,b,c){
    console.log("接口出問題啦");
})

我簡單的解釋一下上面這個代碼，.done()裏面的代碼確定每次都不同。因此說確定不能網上隨便複製一個就能夠，和公司的後端人員問清楚每個參數的做用意義，對於寫代碼是特別有幫助的。從接口文檔能夠看出，這我的後端十分的懶，我全部的參數都是訪問了之後而後本身猜出來的。

場景有上面的兩個，我以爲已經能夠了。就不在寫了

---

文章的最後咱們來講一下 調用 和 .done事件裏面的代碼 雖然這兩個沒有關係。

1.調用
    最簡單的調用方法$(selector).on("click",function(){裏面放剛纔場景二的代碼})。
    可是咱們有的時候用的不是click.
    blur 失去焦點的時候觸發
    change 失去焦點而後判斷是否改變，改變觸發
    keyDown keyup 按下擡起（這個是最好的，可是要用去抖，下一篇說）
2.done(function(){})
    這個裏面通常來講，就是咱們用獲得的數據去和咱們的DOM節點作一些操做。這個每一個項目都不同。可是確定都和DOM的操做啦渲染啦有關。