搶票季：吐槽12306 & 分享搶票經驗

又是一年一度的春運搶票季，不管你是北上、南下或者東進，在外漂泊了一年，有錢沒錢總是要回家過年的。

【圖片來源於網絡】

 

吐槽：12306搶票的悲傷

據說12306改版了，新版本里面除了UI這些面兒上的改動，還加入了自動刷票、自動提交訂單等實用的功能，並且推出了手機購票軟件，當真是下了一番真功夫！這里對12306訂票系統的工程師們表示感謝！

但是，等你真的去訂票的時候，你遇到的錯誤可能是這樣的：

也可能是這樣的：

或者是這樣的：

運氣好點的能見到購票失敗的提示：

這里真心的恭喜那些搶票成功的同學們！恭喜發財！紅包拿來！

 

吐槽：奇葩的驗證碼校驗

先聽我講一下今天搶票的親身經歷：打開12306購票頁面，滿心歡喜的登陸（我對自己的網速還是有信心的，迅雷下載2MB以上，平常看視頻都只看高清），結果今天在登陸的時候就出了岔子，先是驗證碼沒有顯示，等到驗證碼顯示出來以后我趕緊去輸入，輸完四個字符以后就卡死了，真的是卡死了……

直覺告訴我，12306的驗證碼校驗肯定是同步請求，於是打開開發者工具，想來一窺究竟。

真正的調用在這里：

首先看一下common.js，點看以后發現是壓縮過的，從注釋上面可以看到里面包含了jquery 1.9、Sizzle CSS Selector Engine（這個沒有用過）、jqPagination、jQuery Form Plugin、jQuery Validation Plugin 1.11.1以及一些ajax的封裝，而真正執行請求的地方是在login.js里面。

我把login.js下載了下來，然后格式化了輸出，找到了checkRandCode的定義：

checkRandCode: function() {
    var d;
    var c = $("#randCode").val();
    $.ajax({
        url: ctx + "passcodeNew/checkRandCodeAnsyn",
        type: "post",
        data: {
            randCode: c,
            rand: "sjrand"
        },
        async: false,
        success: function(e) {
            if (e.data == "N") {
                d = false;
                $("#i-ok").css("display", "none")
            } else {
                d = true;
                $("#i-ok").css("display", "block")
            }
        }
    });
    return d
}

看到了吧，async:false，果然是走的同步請求，在12306超負載的時候，這個請求會一直掛起，於是就出現了瀏覽器卡死、瀏覽器崩潰等問題，這個跟瀏覽器真沒關系。

怎么破？一行代碼搞定：

jQuery.extend({ checkRandCode: function () { return true; } });

把這句代碼放在console里面執行：

直接覆蓋12306的checkRandCode方法，不去服務器走一遭，馬上返回true。

 

如果你覺得同步請求還能夠忍受，那么看看下面的經歷：我一個不小心我輸錯了字母，驗證碼校驗告訴我錯誤了，我也知道看到了錯誤的地方，然后我去挪動光標，奇葩的事情再次發生，它居然又執行了上面那個同步的驗證！！！感情12306監聽的是鍵盤事件啊（后來看代碼發現是keyup）：

$("#randCode").on("keyup", function (c) {
    c = c || window.event;
    $("#error_msg").hide();
    if ($("#randCode").val() != "" && $("#randCode").val().length == 4) {
        if (!$.checkRandCode()) {
            $("#error_msg").html(login_messages.randCodeError).attr("class", "error").css("margin-left", "70px");
            $("#error_msg").show();
            return false
        } else {
            $("#i-ok").css("display", "block");
            if (c.keyCode == 13) {
                $("#loginSub").click()
            }
        }
    } else {
        $("#i-ok").css("display", "none")
    }
    b = $("#randCode").val()
})

看到了吧，人家是監聽的keyup，只要里面夠四位，你放開鍵盤就去驗證，放開鍵盤就去驗證……網速好不好咱先不說，每次都去服務器同步走一遭就夠你受的……

這個怎么破呢？其實只要把驗證的破了以后，這個自然就沒有什么影響了。如果你執意要破，那我也給你一句代碼：

$("#randCode").unbind("keyup")

這句話稍微有點jquery功底的人就能看懂，直接移除keyup事件，不去監聽就一了百了了。

當然，移除了keyup事件以后，你再去按enter鍵是不能夠登陸的，需要你去點擊登陸按鈕，這是一個副作用。

 

給12306的幾點建議

只是一個簡單的登陸頁面，就已經讓我忍不住開始吐槽了（這可能是因為我今天沒有買到車票吧）。下面是給12306開發人員的幾個建議：

第一，不要去服務器校驗驗證碼，不管是異步還是同步

第二，如果非要去校驗，請不要使用keyup事件去驗證，可以使用onchange來代替

第三，如果非要去檢驗，請將用戶名和密碼一並傳給服務器，數據量不會大多少，但是請求數量最少能夠減少一倍，還減去了點擊登陸按鈕的麻煩

 

使用12306搶票攻略

去年搶票的時候有一個搶票的插件，很方便我們程序員購票，今年不一樣了，12306集成了，雖然依然很方便，但是很多細節卻不如去年。那么怎樣才能保證買到回家的車票呢？

第一步，模擬購票流程。為了今天的購票，我做了充足的准備：前一天下午走了一遍購票流程，一直到付款環節（拿着票源充足的臨客測試）。

第二步，提前登陸。最起碼要在搶票開始前十分鍾登陸的到系統，然后設置好自己要訂的車次、乘車人和席別。如果你信得過自動提交訂單功能，就讓系統一直刷着，有票了只需要輸入一個驗證碼就可以了。

第三步，多開瀏覽器，使用不同的瀏覽器登陸搶票。我的機器上面本身已經裝了IE、chrome和firefox，買票前將三個都打開，分別登陸，即使你只有一個賬號也可以同時在三個瀏覽器里面登陸。

第四步，使用插件。雖然今年插件不像去年那樣火熱，但是想獵豹瀏覽器還是除了搶票專版，今天下午我已經測試了一下，可以買到票。不知道明天早上還可不可以（12306有夜里發布系統的習慣）。

第五步，使用手機客戶端。12306官方有一個購票的客戶端，雖然已到搶票的時候就卡的要死，老提示網絡異常，但也算是一種途徑吧。

 

最后，祝所有朋友都能順利的買到回家的車票……

歡迎分享購票經驗……

搶到票的朋友快來分享你們的購票經驗吧，幫助更多的人買到回家的車票。