Category: AJAX

Javscript 18 歲生日歷史演進

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

CodeIgniter REST Server with Backbone.js Issue

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

Cross Site Request Forgery in JS Web Apps and CodeIgniter PHP Framework

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 才可以做到。 Continue reading “Cross Site Request Forgery in JS Web Apps and CodeIgniter PHP Framework”

[小技巧] JavaScript Cross Browser Best Practices

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

輕量級 jQuery Slideshow Plugin

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

載入 jQuery 和 plugin
Continue reading “輕量級 jQuery Slideshow Plugin”

Javascript 前端工具 Backbone.js Framework 初學介紹

backbone
我相信大家對於後端程式 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 註解。 Continue reading “Javascript 前端工具 Backbone.js Framework 初學介紹”

你不可不知的 JSON 基本介紹

還不知道 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 資料
Continue reading “你不可不知的 JSON 基本介紹”

2011 OSDC Day 1 筆記

Update: 補上 OSDC 紀錄影片 2011.06.26 今年很高興可以北上參加 OSDC 2011 (Open Source Developers Conference)，由於之前都在南部唸書及工作，沒有機會北上參加聚會，現在人在新竹，終於有機會可以參加了，雖然早上六點就要起床趕電車了，不過到現場聽課感覺就是不同，也可以認識很多新朋友，底下來紀錄上課筆記

1.微軟與 jQuery 社群的親密接觸

講者: Eric Shangkuan (Microsoft) Slide: 微軟與 jQuery 社群的親密接觸 這是 OSDC 第一場演講，早上九點就開始了，雖然人不多，但是蠻多人還是為了講者而來，首先介紹什麼是 jQuery，以及 jQuery 一些基本用法，像是 CSS selector，如何在 Windows Visual Studio 上面開發 jQuery 及撰寫 plugin 整合進去 ASP.Net，最後介紹三個不錯用的 jQuery Plugin: Templeate, Datalink, Globalzation。
  • Templeate: 這搭配 Facebook api 可以直接做個人頁面，請參考這裡
  • Globalzation: 前端多國語系實做
  • Datalink: 可以快速處理 form，利用 object 跟 jQuery 搭配
如果要研究上述三個 jQuery Plugin 可以參考底下: jQuery Datalink: https://github.com/jquery/jquery-datalink jQuery Templeate: https://github.com/jquery/jquery-tmpl jQuery Globalzation: https://github.com/jquery/jquery-global Continue reading “2011 OSDC Day 1 筆記”