AJAX: A Gentle Introduction

Transcript

1. AJAX
   

   View Slide

2. A gentle introduction
   

   View Slide

3. (very gentle)
   

   View Slide

4. View Slide

5. What is AJAX?
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. Asynchronous
    Javascript
    And
    XML
    

    View Slide

16. Why?
    

    View Slide

17. Interactive Web Apps
    

    View Slide

18. View Slide

19. No need to reload pages
    

    View Slide

20. View Slide

21. Less restrictive
    

    View Slide

22. View Slide

23. It is more a pattern...
    

    View Slide

24. View Slide

25. ...than a technology
    

    View Slide

26. View Slide

27. Who? When?
    

    View Slide

28. View Slide

29. The first AJAX
    application was
    Outlook Web Access
    

    View Slide

30. View Slide

31. Adopted by Mozilla
    

    View Slide

32. View Slide

33. And Google
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. Jesse James Garrett
    from Adaptive Path
    coined the name “AJAX”
    

    View Slide

38. View Slide

39. New technology?
    

    View Slide

40. (not really)
    

    View Slide

41. View Slide

42. HTML + CSS
    

    View Slide

43. View Slide

44. DOM
    

    View Slide

45. View Slide

46. XMLHttpRequest
    

    View Slide

47. View Slide

48. JavaScript...
    

    View Slide

49. View Slide

50. ...acting as the glue
    

    View Slide

51. View Slide

52. What for?
    

    View Slide

53. Real-time form
    validation
    

    View Slide

54. View Slide

55. Auto-completion
    

    View Slide

56. Master-detail views
    

    View Slide

57. ... sophisticated UIs
    

    View Slide

58. View Slide

59. Happy users
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. How?
    

    View Slide

65. View Slide

66. HTTP requests in the
    background
    

    View Slide

67. View Slide

68. (lots of them)
    

    View Slide

69. Asynchronously
    

    View Slide

70. View Slide

71. Callbacks in JavaScript
    

    View Slide

72. View Slide

73. readyState == 4 &&
    request.status == 200
    

    View Slide

74. View Slide

75. responseText
    responseXml
    

    View Slide

76. View Slide

77. Interactions
    

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. Problems?
    

    View Slide

82. Back button
    

    View Slide

83. View Slide

84. Bookmarks
    

    View Slide

85. View Slide

86. Confusing user
    experience
    

    View Slide

87. View Slide

88. More JavaScript!
    

    View Slide

89. View Slide

90. Difficult to debug
    

    View Slide

91. View Slide

92. Viewable source
    

    View Slide

93. View Slide

94. Browser support?
    

    View Slide

95. Internet Explorer 5+
    

    View Slide

96. View Slide

97. Mozilla
    Opera 9+
    Apple Safari
    

    View Slide

98. Web 2.0?
    

    View Slide

99. View Slide

100. AJAX ≠ Web 2.0
     

     View Slide

101. AJAX < Web 2.0
     

     View Slide

102. AJAX =
     Core feature of Web 2.0
     

     View Slide

103. View Slide

104. Web as a platform
     Collective intelligence
     Multiple devices
     Rich user experience
     

     View Slide

105. Future?
     

     View Slide

106. View Slide

107. View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

112. Books?
     

     View Slide

113. View Slide

114. View Slide

115. View Slide

116. View Slide

117. View Slide

118. And one more thing...
     

     View Slide

119. View Slide

120. Thank you!
     

     View Slide

121. Questions?
     

     View Slide