AJAX

在 resin.io 看到這篇 Happy 18th Birthday JavaScript! A look at an unlikely past and bright future. 裡面有些 Javascript 發展史，蠻有趣的，分享給大家看看。18 年前由 Netscape 和 Sun 共同 Release Javscript，在當年18天後，Ruby 也同時發佈了，底下來看看 Javscript 歷史演進。

CodeIgniter 來當作 REST Server 的朋友們，我相信都會找到 philsturgeon 所寫的 codeigniter-restserver，此套件幫你完成底層 API Response 動作，讓你可以輕易處理 REST URL。但是如果拿這套程式碼來搭配 Backbone.js 你會遇到拿不到 POST 或 PUT 變數問題，作者來一一描述。

Cross Site Request Forgery 簡稱 CSRF 是網路上最常見的攻擊方式，由於前端的盛行，現在開發網站偏向前後端拆開，前端使用大量的 Javascript 及 CSS3 效果，後端則是使用 PHP, Ruby, Python… 等，前端如何拿到資料庫資料呢，必需透 過 AJAX 方式來存取，常見的後端 API 會設計成 RESTful (GET/PUT/POST/DELETE)，後端為了擋住 CSRF 攻擊，所以限定了特殊 Content-Type Header，前端需要帶 application/json 給後端才可以拿到資料，這只能透過 Ajax requests 才可以做到。

modern.IE 的使用方式及介紹，今天在 Facebook 上看到 Eric Shangkuan 說已經有了中文介面，如果你的瀏覽器是中文版，應該就可以直接看到中文介面了，裡面有篇文章非常重要，寫 Web 的工程師都必須注意，那就是 Cross Browser Best Practices，這篇文章教您如何撰寫相容於舊版 IE 瀏覽器的一些小技巧，這些技巧也不只用在 IE 上，更是教您在實做 CSS，JavaScript 的注意事項。我們來看看 Javascript 的小技巧。

相信在網路上可以找到一堆 jQuery Slideshow Plugin，例如 33 POWERFUL JQUERY SLIDESHOW (SLIDERS) PLUGINS AND TUTORIALS 介紹了 33 種不同的 Slideshow Plugin，有些用起來很複雜，有些則是過於簡易，本來是想自己寫一套出來，但是想想是否可以找一套已經有輪子的架構，再拿來修改成專案所需要的套件，於是參考了這套原始碼，發現此專案只有提供 fade 和 slide 兩種效果，沒有像是投影片可以任意滑動的功能，所以自己把此功能 patch 上去，可以參考我放到 Github 的專案，寫法很容易，可以直接看線上 Example。

載入 jQuery 和 plugin

PHP, Ruby, Python .. 等語言都已經相當熟悉，進階開發者也都接觸了好用的後端 Framework 如 CodeIgniter, CakePHP, Django, Ruby on Rail, Yii, Symfony .. 等，用 Framework 最大的好處並不是在 Framework 提供了大量工具，而是制定了 MVC 架構，讓專案多位開發者可以遵循，上了講了這麼多後端 MVC Framework，那麼前端呢？接下來介紹前端強大工具: Backbone.js

什麼是 Backbone.js 簡單來說 Backbone.js 就是一套前端 Javascript Framework，它提供 MVC 架構，相信大家都玩過後端 MVC，那至於前端呢，好像比較少人提到，這就是介紹 Backbone.js 最主要的目的。Backbone.js 包含了 Model View Controller 來讓使者操作，Model 提供了key-value 結構，以及可以 binding 大量 event，開發者可以透過 RESTful JSON interface 來跟 Backbone.js 的 Model 及 Collection 搭配。如果想瞭解 Backbone.js 線上文件可以參考

GitHub 網站，如果想瞭解程式碼可以參考 source code 註解。

還不知道 JSON 是什麼嘛？本篇教學會帶您瞭解 JSON 在網站上的應用，以及運作流程跟使用 PHP 和 JavaScript 來處理 JSON。假如您現在的工作就是網站設計師，相信一定聽過 JSON，但是什麼是 JSON，它能夠做什麼，及您能透過它在網站上做到哪些事情呢？

透過本篇介紹您可以瞭解基本的 JSON，底下會列出本篇會提到的重點：

• 什麼是 JSON
• JSON 應用在哪些地方
• 如何建立 JSON 字串
• 一個簡單的 JSON 範例
• JSON vs XML
• 如何透過 PHP 及 JavaScript 使用 JSON

什麼是 JSON

JSON 是個以純文字為基底去儲存和傳送簡單結構資料，你可以透過特定的格式去儲存任何資料(字串,數字,陣列,物件)，也可以透過物件或陣列來傳送較複雜的資料。一旦建立了您的 JSON 資料，就可以非常簡單的跟其他程式溝通或交換資料，因為 JSON 就只是個純文字格式。

JSON 的優點如下:

• 相容性高
• 格式容易瞭解，閱讀及修改方便
• 支援許多資料格式 (number,string,booleans,nulls,array,associative array)
• 許多程式都支援函式庫讀取或修改 JSON 資料

update: 簡易版的偵測 iphone/ipod time: 23:32 jQuery 真是一個相當方便的 javascript framework，最近在弄嵌入式系統時候需要去偵測瀏覽器 user agent，就類似下此訊息 “Mozilla/4.0 (compatible; MSIE 4.01; Windows 95)"，原本打算直接用 C 語言內建的 getenv(“HTTP_USER_AGENT”) 來做掉，不過後來想想，直接在 UI 那邊，利用 jQuery 來偵測瀏覽器版本、系統OS，這樣就解決了，上網找到有人寫了 jQuery browser and OS detection plugin，利用底下語法就可以知道一些 user agent 裡面的資料

CodeIgniter 文章，針對於剛入門 CI 的新手們，此篇教學如何使用 jQuery AJAX 搭配 CI 來驗證使用者帳號及相關資訊，本篇教學帶您如何在 CI 中發出 AJAX request 給伺服器端。 請先在網頁 header 自行 include jQuery 檔案，或者可以使用 Google AJAX CDN 方式來讀取，將底下程式碼放到之前：

$(document).ready(function() {
    /* 先停止讀取狀態 */
    $('#Loading').hide();

    /* 填寫好 email 欄位，按下 Tab 會進行讀取 */
    $('#email').blur(function(){
    /* 讀取 email 欄位 */
	var a = $("#email").val();
    /* email 正規語法 */
	var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
    /* 簡易驗證 email */
	if(filter.test(a)){
        /* 讀取狀態 */
		$('#Loading').show();
        /* AJAX 比對資料庫 */
		$.post("controller_name/check_email_availablity", {
			email: $('#email').val()
		}, function(response){
            /* 驗證後讀取 reponse 狀態 */
			$('#Loading').hide();
			setTimeout("finishAjax('Loading', '"+escape(response)+"')", 400);
		});
		return false;
	}
});