SlideShare a Scribd company logo

ITI006En-AJAX

•
•
Huibert Aalbers
Huibert Aalbers

AJAX (Asynchronous JavaScript And XML) is a group of related technologies that enable developers to created better and easier to use web applications (often referred to as Web 2.0).

Related slideshows

Ajax
Ajax Ajax
Ajax
 
Ajax technology
Ajax technologyAjax technology
Ajax technology
 
Ajax basics
Ajax basicsAjax basics
Ajax basics
 
1 of 13
Download to read offline
Web Application Development with AJAX Huibert Aalbers Senior Certified Software IT Architect
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
¿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 first AJAX application, Outlook Web Access using proprietary HTML extensions
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
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.flickr.com • http://www.kiko.com • http://www.protopage.com • http://www.writely.com
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
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
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
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(); } } }
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); } } }
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
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 benefit from the technology
Gracias For more information, please contact me at huibert_aalbers@mac.com

More Related Content

ITI006En-AJAX

  • 1. Web Application Development with AJAX Huibert Aalbers Senior Certified 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 first 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.flickr.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 benefit from the technology
  • 13. Gracias For more information, please contact me at huibert_aalbers@mac.com