新⼈人報告PChome EC / Technical Department

報告⼈人：莊智偉

AJAX, JSONP Git, SVN

2015.07.22 (三)

AJAXAsynchronous JavaScript And XML

What’s AJAX?

不需要重新整理⾴頁⾯面，透過JavaScript來與伺服器交換資料、更新網⾴頁內容

• HTML 與 CSS：樣式變化，JavaScript / DOM：變動網⾴頁內容，XMLHttpRequest 物件：發出請求

傳統網⾴頁（Synchronous）

每次都要刷新整個畫⾯面

AJAX 網⾴頁（Asynchronous）

不需要重新整理畫⾯面即時更新

簡化網⾴頁流程設計 降低網路資料流量

建⽴立 AJAX 應⽤用程式 - jQuery

�� ��

load() ���� �����Ajax����getScript() ��Ajax������JavaScript����

get() ��HTTP GET����Ajax������ post() ��HTTP POST����Ajax������

getJSON() ��HTTP GET��������JSON��ajax() ��XMLHttpRequest����Ajax��

提供多種⽅方法來提出XMLHttpRequest請求

程式範例 - ajax()點擊⼀一個按鈕，做⼀一些什麼事情

將資料傳到哪個檔案

要傳送的變數

設定傳送的⽅方式 (GET/POST)

設定回傳的格式 (html/script/json/xml)

回傳後要做的事件

Demo

JSONPJSON with Padding

跨網域存取限制

不同網域無法讓 ajax 存取該資料

跨網域存取限制

典型跨網域解決⽅方法

• Form Submit 複雜（程式碼很醜）

• JSONP 常⽤用（可攜性⾼高）

• W3C - CORS (Cross-Origin Resource Sharing) 透過HTTP Header 來確認存取權限

JSONP 範例：從 flickr 截取資料

JSONP 範例：從 flickr 截取資料

API說明： https://www.flickr.com/services/feeds/docs/photos_public/

Demo

Git ＆SVN

Git & SVN

Git SVN

版本控制 分散式 集中式

伺服器端 X ✓

速度 快 慢

• 版本控制系統

• 組織多⼈人共有資料

• 最新最正確的版本控管

使⽤用 Git 來管理程式碼

• SVN 加強版

• Branch

• 更聰明的 Commit

• 分散式系統

• SVN 上好⽤用的⼩小烏⻱⿔龜也⽀支援 Git

• 世界上⼤大型的 Open Source Projects 都使⽤用 GIT

Git 指令操作• origin(remote) 是 Repository 的版本

• master(branch) 是 local 端, 正在修改的版本

Git 新增檔案 git add . # 將資料先暫存到 staging area, add 之後再新增的資料 git add filename git add modify-file # 修改過的檔案, 也要 add. (不然 commit 要加上 -a 的參數) git add -u # 只加修改過的檔案, 新增的檔案不加⼊入. git add -i # 進⼊入互動模式

Git 刪除檔案 git rm filename

Git 修改檔名、搬移⺫⽬目錄 git mv filename new-filename

Git 指令操作Git Commit git commit git commit -m 'commit message' git commit -a -m 'commit -message' # 將所有修改過得檔案都 commit, 但是新增 的檔案還是得要先 add. git commit -a -v # -v 可以看到檔案哪些內容有被更改, -a 把所有修改的檔案都 commit

Git reset 還原 git reset --hard HEAD # 還原到最前⾯面 git reset --hard HEAD~3 git reset --soft HEAD~3 git reset HEAD filename # 從 staging area 狀態回到 unstaging 或 untracked (檔案 內容並不會改變)

Git merge 合併 git merge git merge master git merge new-branch

Git ⽐比 SVN 優

• 分⽀支管理 • 分散式 • 變化追蹤 • 速度 • 普及率：GitHub、Bitbucket

謝謝聆聽

youkhant !