ITseer - 資訊知識分享 | 程式技術討論: 5月 2012

2012年5月31日

Single Page Application 實作 - 使用hash change event

前言

在上一篇文章『監聽 hash change 事件方法』中簡單的提到我們該如何監聽網址的Hash值改變，在本文章中我們將會利用這項技術，實際完成Single Page Application(SPA)的基本架構，有著這樣的架構，我們就能夠使用ajax的方式更新畫面，而不需要將整個畫面重新載入。

監聽 hash change 事件方法

前言

首先來說明為什麼要去監聽hash改變這個動機好了，現在有許多的應用都取向於單一頁面而不是過去的多個頁面，好處有很多，最明顯的好處就是只需要使用ajax的方式去改變要改變的區塊就好，不用整個page重新reload，最經典的例子就是gmail;如果要實作這樣的功能做常見的方式就是透過改變window.location.hash這個屬性來達成，瀏覽器hash屬性改變時並不會讓當前的頁面去reload，我們定義不同的hash位址定位不同的功能頁面，例如

www.itseer.com/#main : 首頁

www.itseer.com/#contact : 聯絡頁面

www.itseer.com/#author : 作者頁面

藉由監聽hash值得改變，動態的去載入或更換畫面需要update的部分。

方法一 : 使用javascript onhashchange事件

我們可以對window的onhashchange綁定事件，但是onhashchange事件在ie7 ie9雖然存在，但是這個事件卻不會被觸發，所以需要對ie瀏覽器使用不同的解法，這邊的提供解法是每100毫秒檢查一次hash是否有沒有改變，若改變就觸發要做的事情，這樣有點浪費效能的嫌疑。

CSS text-indent 與 word-spacing 介紹

簡介

本文章簡單的介紹CSS中的兩個在文章排版非常有用的屬性，分別為text-indent(縮進)、word-spacing(字距)。

text-indent

相信大家小時候或是現在都有寫過作文，而作文在文章的最前頭都必須要縮進二~四格空白，在網頁中，你可以使用text-indent來實作這個功能

2012年5月30日

跨域請求- JSONP 使用jQuery實作

甚麼是JSONP

The script tag method for cross-domain data fetching: JSON with Padding, or simply JSONP. - Bob Ippolito

JSONP也就是JSON with Padding，意思就是讓JSON資料添加了一些添加物(也就是function name)，主要用來解決跨域資源存取的問題，用JSONP抓到的資料並不是JSON，而是一段javascript function並包含了JSON資料的程式碼，瀏覽器在取得後不是使用JSON解析器而使用JavaScript執譯器執行並得到結果。

跨域請求 (cross domain ajax)

簡介

本文章主要探討前端發出跨域(cross domain)的請求(request)的解法，瀏覽器基於安全性的原因，禁止javascript發出跨域的Request，在深入探討之前必須先解釋何謂跨域(cross domain)。

跨域

domain指的是網站的所在地址代稱，每個網站伺服器都會有一個IP，但這組地址實在不好記，因此DNS伺服器會幫助我們將一個容易記得的名稱(domain name)對應到我們伺服器的IP。跨域(cross domain)指的就是請求在其他的domain地址，而不是本身伺服器位置。例如www.a.com發出request至www.b.com這就是跨域的行為。