jQuery AJAX jQuery Plugin Front End Skill

1. 咩星征服計劃
用 JS 征服地球 最終回

2. 羊小咩 Lamb Mei
Lamb-mei@homakimi.com
lamb@lamb-mei.com

3. 最終回

4. 感想…

5. 這麼拉賽的事情
終於要結束了

6. 前面這張放錯了

7. 很開心有機會
把自己所學所得分享給大家

8. course content

9. course content
• jQuery AJAX
• jQuery Plugin
• Front End Skill

10. jQuery AJAX

11. jQuery AJAX
非同步的Javascript And XML

12. jQuery AJAX
Ｗhat the 發

13. jQuery AJAX
AJAX Example

14. jQuery AJAX －Example
Auto Complete

15. jQuery AJAX －Example
置底更新

16. jQuery AJAX －Example
表單驗證
圖片來源 http://images.cnblogs.com/cnblogs_com/xiaobaigang/reg.jpg

17. jQuery AJAX
常用時機

18. jQuery AJAX
常用時機
當做了一個動作
必須取得資料並更新畫面
（不能Reload畫面）

19. jQuery AJAX
AJAX Works
Browser
Create & Send
XMLHttpRequest

20. jQuery AJAX
AJAX Works
Browser
Create & Send
XMLHttpRequest

21. jQuery AJAX
AJAX Works
Server
Browser
Create & Send
XMLHttpRequest

22. jQuery AJAX
AJAX Works
Server
Browser
Create & Send
XMLHttpRequest
Process
HttpRequest

23. jQuery AJAX
AJAX Works
Server
Browser
Create & Send
XMLHttpRequest
Process
HttpRequest
Create Response

24. jQuery AJAX
AJAX Works
Browser
Server
Process
HttpRequest
Create Response

25. jQuery AJAX
AJAX Works
Browser
Server
Process returmed
Data
Process
HttpRequest
Create Response

26. jQuery AJAX
AJAX Works
Browser
Server
Process returmed
Data
Process
HttpRequest
Update
page content
Create Response

27. jQuery AJAX
.ajax( url [, settings ] )
執行非同步 AJAX 請求

28. jQuery AJAX
.post( url [, data ]
[, success(data, textStatus, jqXHR) ]
[, dataType ] )
從Server 使用 Post 取得資料

29. jQuery AJAX
.get( url [, data ]
[, success(data, textStatus, jqXHR) ]
[, dataType ] )
從Server 使用 Get 取得資料

30. jQuery Plugin

31. jQuery Plugin
jQuery UI

32. jQuery Plugin
bootstrap Javascript

33. jQuery Plugin
Lightbox2

34. jQuery Plugin
magnific-popup

35. jQuery Plugin
Masonry

36. jQuery Plugin
flexslider

37. jQuery Plugin
flexslider 2

38. jQuery Plugin
File Upload

39. Front End Skill

40. 當你還在玩泥巴

41. 別人已經…

42. 別人已經…

43. Front End Skill
Syntactically Awesome Stylesheets
http://sass-lang.com/

44. Front End Skill
http://compass-style.org/

45. Front End Skill

46. Front End Skill
Softwave

47. Front End Skill
http://compass.kkbox.com/

48. Front End Skill
Compass 不是神器
只是方便處理CSS 的工具

49. Front End Skill
http://fireapp.kkbox.com/

50. Front End Skill
Fire.app
可以處理 Layout & Prototype

51. Front End Skill
http://incident57.com/codekit/

52. Next ?!

55. Thank You!
羊小咩 Lamb Mei
Lamb-mei@homakimi.com
lamb@lamb-mei.com
2014 / 01 / 09