抢票季：吐槽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官方有一个购票的客户端，虽然已到抢票的时候就卡的要死，老提示网络异常，但也算是一种途径吧。

 

最后，祝所有朋友都能顺利的买到回家的车票……

欢迎分享购票经验……

抢到票的朋友快来分享你们的购票经验吧，帮助更多的人买到回家的车票。