又是一年一度的春运抢票季，不管你是北上、南下或者东进，在外漂泊了一年，有钱没钱总是要回家过年的。
吐槽：12306抢票的悲伤
据说12306改版了，新版本里面除了UI这些面儿上的改动，还加入了自动刷票、自动提交订单等实用的功能，并且推出了手机购票软件，当真是下了一番真功夫！这里对12306订票系统的工程师们表示感谢！
但是，等你真的去订票的时候，你遇到的错误可能是这样的：
12306订票时遇到的错误
也可能是这样的：
12306订票时遇到的错误
或者是这样的：
12306订票时遇到的错误
运气好点的能见到购票失败的提示：
12306订票时遇到的错误
这里真心的恭喜那些抢票成功的同学们！恭喜发财！红包拿来！
吐槽：奇葩的验证码校验
先听我讲一下今天抢票的亲身经历：打开12306购票页面，满心欢喜的登陆（我对自己的网速还是有信心的，迅雷下载2MB以上，平常看视频都只看高清），结果今天在登陆的时候就出了岔子，先是验证码没有显示，等到验证码显示出来以后我赶紧去输入，输完四个字符以后就卡死了，真的是卡死了……
直觉告诉我，12306的验证码校验肯定是同步请求，于是打开开发者工具，想来一窥究竟。
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的定义：
01 | checkRandCode: function() { |
02 | var d; |
03 | var c = $("#randCode").val(); |
04 | $.ajax({ |
05 | url: ctx + "passcodeNew/checkRandCodeAnsyn", |
06 | type: "post", |
07 | data: { |
08 | randCode: c, |
09 | rand: "sjrand" |
10 | }, |
11 | async: false, |
12 | success: function(e) { |
13 | if (e.data == "N") { |
14 | d = false; |
15 | $("#i-ok").css("display", "none") |
16 | } else { |
17 | d = true; |
18 | $("#i-ok").css("display", "block") |
19 | } |
20 | } |
21 | }); |
22 | return d |
23 | } |
看到了吧，async:false，果然是走的同步请求，在12306超负载的时候，这个请求会一直挂起，于是就出现了浏览器卡死、浏览器崩溃等问题，这个跟浏览器真没关系。怎么破？一行代码搞定：
1 | jQuery.extend({ checkRandCode: function () { return true; } }); |
把这句代码放在console里面执行：
12306的验证码探究
直接覆盖12306的checkRandCode方法，不去服务器走一遭，马上返回true。
如果你觉得同步请求还能够忍受，那么看看下面的经历：我一个不小心我输错了字母，验证码校验告诉我错误了，我也知道看到了错误的地方，然后我去挪动光标，奇葩的事情再次发生，它居然又执行了上面那个同步的验证！！！感情12306监听的是键盘事件啊（后来看代码发现是keyup）：
01 | $("#randCode").on("keyup", function (c) { |
02 | c = c || window.event; |
03 | $("#error_msg").hide(); |
04 | if ($("#randCode").val() != "" && $("#randCode").val().length == 4) { |
05 | if (!$.checkRandCode()) { |
06 | $("#error_msg").html(login_messages.randCodeError).attr("class", "error").css("margin-left", "70px"); |
07 | $("#error_msg").show(); |
08 | return false |
09 | } else { |
10 | $("#i-ok").css("display", "block"); |
11 | if (c.keyCode == 13) { |
12 | $("#loginSub").click() |
13 | } |
14 | } |
15 | } else { |
16 | $("#i-ok").css("display", "none") |
17 | } |
18 | b = $("#randCode").val() |
19 | }) |
看到了吧，人家是监听的keyup，只要里面够四位，你放开键盘就去验证，放开键盘就去验证……网速好不好咱先不说，每次都去服务器同步走一遭就够你受的……
这个怎么破呢？其实只要把验证的破了以后，这个自然就没有什么影响了。如果你执意要破，那我也给你一句代码：
1 | $("#randCode").unbind("keyup") |
这句话稍微有点jquery功底的人就能看懂，直接移除keyup事件，不去监听就一了百了了。
当然，移除了keyup事件以后，你再去按enter键是不能够登陆的，需要你去点击登陆按钮，这是一个副作用。
给12306的几点建议
只是一个简单的登陆页面，就已经让我忍不住开始吐槽了（这可能是因为我今天没有买到车票吧）。下面是给12306开发人员的几个建议：
第一，不要去服务器校验验证码，不管是异步还是同步
第二，如果非要去校验，请不要使用keyup事件去验证，可以使用onchange来代替
第三，如果非要去检验，请将用户名和密码一并传给服务器，数据量不会大多少，但是请求数量最少能够减少一倍，还减去了点击登陆按钮的麻烦
使用12306抢票攻略
去年抢票的时候有一个抢票的插件，很方便我们程序员购票，今年不一样了，12306集成了，虽然依然很方便，但是很多细节却不如去年。那么怎样才能保证买到回家的车票呢？
第一步，模拟购票流程。为了今天的购票，我做了充足的准备：前一天下午走了一遍购票流程，一直到付款环节（拿着票源充足的临客测试）。
第二步，提前登陆。最起码要在抢票开始前十分钟登陆的到系统，然后设置好自己要订的车次、乘车人和席别。如果你信得过自动提交订单功能，就让系统一直刷着，有票了只需要输入一个验证码就可以了。
第三步，多开浏览器，使用不同的浏览器登陆抢票。我的机器上面本身已经装了IE、chrome和firefox，买票前将三个都打开，分别登陆，即使你只有一个账号也可以同时在三个浏览器里面登陆。
第四步，使用插件。虽然今年插件不像去年那样火热，但是想猎豹浏览器还是除了抢票专版，今天下午我已经测试了一下，可以买到票。不知道明天早上还可不可以（12306有夜里发布系统的习惯）。
第五步，使用手机客户端。12306官方有一个购票的客户端，虽然已到抢票的时候就卡的要死，老提示网络异常，但也算是一种途径吧。
最后，祝所有朋友都能顺利的买到回家的车票……
抢到票的朋友快来分享你们的购票经验吧，帮助更多的人买到回家的车票。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
