11/13/2007 A synchronous J avaScript A nd X ML Gloria Law Joshua Mahaz

11/13/2007 A synchronous J avaScript A nd X ML Technique for creating web applications that are… Technique for creating web applications that are… faster faster more functional more functional real-time real-time Achieved through client/server communication without page reloads Achieved through client/server communication without page reloads

11/13/2007 AJAX a New Name Components have been around since mid 90’s Components have been around since mid 90’s Microsoft Remote Scripting Microsoft Remote Scripting IFRAME (IE3) IFRAME (IE3) LAYER (Netscape 4) LAYER (Netscape 4) Provided a means of loading external URLs that could modify a parent page. Provided a means of loading external URLs that could modify a parent page.

11/13/2007 AJAX a New Name Requirements Requirements Plugs-ins Plugs-ins Browser specific add-ons Browser specific add-ons Repercussions Repercussions Hassle of third party software Hassle of third party software Page was always browser specific Page was always browser specific

11/13/2007 AJAX a New Name Advancements in Web Development Advancements in Web Development Widespread adoption and refinement of Widespread adoption and refinement of Client Side Scripting (JavaScript) Client Side Scripting (JavaScript) Server Side Scripting (PHP/SQL/ASP) Server Side Scripting (PHP/SQL/ASP) XML Request (Microsoft Remote Scripting) XML Request (Microsoft Remote Scripting) Aloud for an easier, portable, and more refined approach, AJAX Aloud for an easier, portable, and more refined approach, AJAX

11/13/2007 A synchronous J avaScript A nd X ML Technique for creating better, faster, and more interactive web application Technique for creating better, faster, and more interactive web application JavaScript can communicate directly with server JavaScript can communicate directly with server scripting language in which Ajax function calls are usually made scripting language in which Ajax function calls are usually made scripting language scripting language Uses asynchronous data transfer (HTTP requests) between the browser and the web server Uses asynchronous data transfer (HTTP requests) between the browser and the web server Can use on different OS, free and open source implementations of suitable Can use on different OS, free and open source implementations of suitable

11/13/2007 Usage Real-time form data validation Real-time form data validation Can validate in a form before the user submit the form Can validate in a form before the user submit the form Auto completion Auto completion Portion of form data may be auto completed as the user types Portion of form data may be auto completed as the user types Load on demand Load on demand An HTML page can fetch more data in the background An HTML page can fetch more data in the background Refreshing data and server push Refreshing data and server push Pull data from a server for a up-to-date data Pull data from a server for a up-to-date data Not require to reload the full page Not require to reload the full page

11/13/2007 Advantage Bandwidth usage Bandwidth usage Quicker loads Quicker loads Rest of the layout does not have to be redrawn on each update Rest of the layout does not have to be redrawn on each update Compatibility Compatibility Works on ‘most’ browsers Works on ‘most’ browsers

11/13/2007 Advantage Functionality Functionality Constant data fetching allows page to stay ahead of user Constant data fetching allows page to stay ahead of user JavaScript event handler gives page a real-time feel JavaScript event handler gives page a real-time feel Mouse click Mouse click Focus changes Focus changes Timers/Interrupts Timers/Interrupts

11/13/2007 Disadvantage Browser Integration Browser Integration Does not register itself with the browser history engine Does not register itself with the browser history engine Complexity Complexity Need to have some knowledge of presentation logic in the HTML client page as well as in the server-side logic Need to have some knowledge of presentation logic in the HTML client page as well as in the server-side logic Response-time concern Response-time concern Network latency Network latency Debugging Debugging Processing logic is embedded both in the client and on the server. Processing logic is embedded both in the client and on the server.

11/13/2007 Demo Web-based demo:

11/13/2007 Reference hp hp hp hp browsing/index_en.html browsing/index_en.html browsing/index_en.html browsing/index_en.html e/browse_thread/thread/99b7e6152b45b2e7/6b3689e2dc7401d c e/browse_thread/thread/99b7e6152b45b2e7/6b3689e2dc7401d c e/browse_thread/thread/99b7e6152b45b2e7/6b3689e2dc7401d c e/browse_thread/thread/99b7e6152b45b2e7/6b3689e2dc7401d c dge/ dge/ dge/ dge/