[Javascript] NCKU-GPA calculator

Image Credit

前幾天有個朋友在社團提出了一個有趣的問題:

成大現在成績查詢那邊都沒有GPA的自動計算。要不要來簡單做一個,然後賣回給成大~~~

因為那個時候剛好自己也無聊沒什麼事,又想說很久沒有寫 Chrome Extension 了,就把以前做 FBBK 的東西翻了出來做了些調整,改採 PageAction 的方式去寫這個 Extension,主要的功能就是可以自動幫你把百分制的成績自動計算成 GPA。

NCKU-GPA calculator on Chrome Web Store: Here

不過,原本想說只是快速 Hack 一個 alpha 版本拿來自己用爽就好了,結果誰知道卻遇上了一些問題,多是我以前沒有遇過的有趣問題,所以特別想要在這邊記錄一下。

BTW, Checkout the repository first :]

git checkout git://github.com/EragonJ/NCKU-GPA-calculator.git

Problem – Encoding conflicts

我從來沒有想過我在這個世界還會遇到 big5 編碼的網頁,Well,成功大學的成績查詢網頁就是用 big5 編碼的,除此之外,透過 Inspector 的觀察之後,發現它的頁面是透過 POST 的方式,判斷 Client 回傳的 submit1 值來決定是要 Render 哪一個上/下學期的成績資訊。

但是,問題就在這邊,如果觀察它的 submit1 值,從 Inspector 上會看到unable to decode value。舉兩個實際的例子,如果是「0096上」,則它編碼後的結果是「0096%A4W」,如果是「0096下」,則它編碼後的結果會是「0096%A4U」。

問題來了,如果透過 $.ajax 來傳「0096上」這個值回去的話,會發現它編碼後的結果不會是「0096%A4W」,結果我去查了一下 $.ajax的原始碼後,發現它會呼叫 javascript 內的 encodeURIComponent 來做編碼的動作,所以不管如何,單純把值丟入 $.ajax 是一定不會得到期望的結果!

所以…需要在 $.ajax 的 options 做一些調整,那就是設定 processData 這個屬性,這樣不管我們傳什麼值給他,他都不會幫我們再其它額外的動作(例如 encodeURIComponent ),直接把值傳過去。因此,既然我們可以透過這個設定做到我們想要的效果,就要先把「上」、「下」這兩個字做 Replace 的動作,再傳入設定過的 $.ajax 直接把值傳過去,就可以解決這個問題了。

Well,比較值得記錄的就是這個部分。

有點累了,有沒有收假前一晚還在熬夜寫 Blog 的八卦…改天再回來修文字還有補充資訊,先睡了。