ITI006En-AJAX
0 likes245 views
The document discusses AJAX (Asynchronous JavaScript and XML) and its role in web application development, specifically in enhancing user interfaces by allowing partial page updates without full reloads. It highlights AJAX's popularity, particularly with Google applications, and outlines browser support as well as challenges such as issues with bookmarking and search engine indexing. The document also emphasizes the need for a strong understanding of web standards and the complexities involved in developing AJAX applications.
ITI006En-AJAX
- 1. Web Application Development with AJAX Huibert Aalbers Senior CertiïŹed Software IT Architect
- 2. IT Insight podcast âą This podcast belongs to the IT Insight seriesâš You can subscribe to the podcast through iTunes. âą Additional material such as presentations in PDF format or white papers mentioned in the podcast can be downloaded from the IT insight section of my site at http://www.huibert-aalbers.com âą You can send questions or suggestions regarding this podcast to my personal email, huibert_aalbers@mac.com
- 3. ÂżQuĂ© es AJAX? âą AJAX stands for âą Asynchronous Javascriptâš Andâš XML âą This term was coined by a company called Adaptive Path to refer to Web 2.0 applications that offer richer and better user interfaces âą Microsoft developed the ïŹrst AJAX application, Outlook Web Access using proprietary HTML extensions
- 4. What problem does AJAX solve? âą Before AJAX, each time a web application interacted with a server, the complete page had to be reloaded âą Using AJAX technologies this is no longer true. Instead, a JavaScript routine connects to the server through an XMLHttpRequest and the result is displayed using dynamic HTML to update the page âą The result is faster web apps that look more like traditional C/S applications
- 5. Who uses AJAX? âą AJAX has gained a lot of popularity since Google started using it in their extremely successful web applications âą GMail, Google Maps, Google suggest, Google calendar âą Other companies are also adopting AJAX âą http://www.ïŹickr.com âą http://www.kiko.com âą http://www.protopage.com âą http://www.writely.com
- 6. Which browsers support AJAX? âą In order to support AJAX, a browser has to support the latest W3C standards such as CSS 2 and 3, Javascript and the XMLHttpRequest object or equivalent âą Safari 1.2 and later or Konkeror (browsers based on kHTML) Internet Explorer 4.0 and later (Microsoft) âą Firefox 1.0, Mozilla 1.0, Netscape 7.0, Camino 1.0 (browsers based on the browser engine from the Mozilla Foundation) âą Opera 7.6 and later
- 7. Problems faced by AJAX applications âą The back button may not work as expected, and something similar applies to bookmarking âą Search engines cannot easily index pages that include AJAX code âą The Javascript code has to be able to handle communications problems with the back-end server transparently for the user and this requires a lot of code since Javascript was not really designed to handle complex tasks âą The MVC paradigm tried to separate the application code from the presentation layer. AJAX makes this impossible, once again
- 8. The XMLHttpRequest object âą In order to communicate with a server, the Javascript code needs to use an XMLHttpRequest object âą Despite its name, this object does not require to use data written in XML format, any type of data can be used âą Internet Explorer does not support the XMLHttpRequest object but supports similar functionality through ActiveX objects âą The XMLHttpRequest object offers different methods that can be used to interact asynchronously with a back-end server.This allows the application to process multiple connections in parallel without blocking the browser until a response is received
- 9. Creating an XMLHttpRequest object and invoking a URL on a back-end server var req; function loadXMLDoc(url) { if (window.XMLHttpRequest) { // The browser supports the XMLHttpRequest object req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(null); } else if (window.ActiveXObject) { // This code is required to support IE req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(); } } }
- 10. Asynchronously processing the response from the back-end server function processReqChange() { // Request completed if (req.readyState == 4) // Result is "OK" if (req.status == 200) { // This code handles the response... // ...and updates the page accordingly... } else { alert(âThere was a problem:n" + req.statusText); } } }
- 11. How to write de the back-end server code? âą AJAX applications do not care about the language used to write the back-end application. âą All that is needed is that the reply has a Content-Type of text/xml if the response is an XML document or text/plain or text/html otherwise âą This means that the back-end server code can be written in almost any language âą C/C++ CGIs âą Java Servlet, Java Server Page âą PHP âą ASP,etc
- 12. Final thoughts âą AJAX is not only about the XMLHTTPRequest object. In order to write a successful AJAX application it is necessary to have a very thorough understanding of other W3C standards such as DOM and CSS âą Since AJAX is based on cutting edge browser technologies, differences between the three major browsers (IE, Mozilla and Safari) must be understood and properly handled âą Because of the previous points, writing AJAX applications is still quite complex.That is why, no one uses AJAX for a whole site, instead its use is limited to certain applications that can beneïŹt from the technology
- 13. Gracias For more information, please contact me at huibert_aalbers@mac.com