新人報告-3

1. 新⼈人報告
PChome EC / Technical Department
報告⼈人：莊智偉
AJAX, JSONP
Git, SVN
2015.07.22 (三)

2. AJAX
Asynchronous JavaScript And XML

3. What’s AJAX?
不需要重新整理⾴頁⾯面，
透過JavaScript來與伺服器交換資料、更新網⾴頁內容
• HTML 與 CSS：樣式變化，JavaScript / DOM：變動網⾴頁內容，XMLHttpRequest 物件：發出請求

4. 傳統網⾴頁（Synchronous）
每次都要刷新整個畫⾯面

5. AJAX 網⾴頁（Asynchronous）
不需要重新整理畫⾯面即時更新
簡化網⾴頁流程設計
降低網路資料流量

6. 建⽴立 AJAX 應⽤用程式 - jQuery
load() Ajax
getScript() Ajax JavaScript
get() HTTP GET Ajax
post() HTTP POST Ajax
getJSON() HTTP GET JSON
ajax() XMLHttpRequest Ajax
提供多種⽅方法來提出XMLHttpRequest請求

7. 程式範例 - ajax()
點擊⼀一個按鈕，做⼀一些什麼事情
將資料傳到哪個檔案
要傳送的變數
設定傳送的⽅方式
(GET/POST)
設定回傳的格式
(html/script/json/xml)
回傳後要做的事件
Demo

8. JSONP
JSON with Padding

9. 跨網域存取限制
不同網域無法讓 ajax 存取該資料

10. 跨網域存取限制

11. 典型跨網域解決⽅方法
• Form Submit
複雜（程式碼很醜）
• JSONP
常⽤用（可攜性⾼高）
• W3C - CORS (Cross-Origin Resource Sharing)
透過HTTP Header 來確認存取權限

12. JSONP 範例：從 flickr 截取資料

13. JSONP 範例：從 flickr 截取資料
API說明：
https://www.flickr.com/services/feeds/docs/photos_public/
Demo

14. Git ＆SVN

15. Git & SVN
Git SVN
版本控制 分散式 集中式
伺服器端 X ✓
速度 快 慢
• 版本控制系統
• 組織多⼈人共有資料
• 最新最正確的版本控管

16. 使⽤用 Git 來管理程式碼
• SVN 加強版
• Branch
• 更聰明的 Commit
• 分散式系統
• SVN 上好⽤用的⼩小烏⻱⿔龜也⽀支援 Git
• 世界上⼤大型的 Open Source Projects 都使⽤用 GIT

17. 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

18. 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

19. Git ⽐比 SVN 優
• 分⽀支管理
• 分散式
• 變化追蹤
• 速度
• 普及率：GitHub、Bitbucket

20. 謝謝聆聽
you
khant
!