AJAX By Steven Hernandez Research Analyst NIATEC

Introduction Who I am Who I am Education Education AAS Electronic Systems AAS Electronic Systems AAS Lasers and Electro-Optics AAS Lasers and Electro-Optics BBA CIS from COB at ISU BBA CIS from COB at ISU Currently working towards MBA in IA Currently working towards MBA in IA Experience Experience Network Administration Network Administration Desktop Support/Helpdesk Management Desktop Support/Helpdesk Management Systems Administration Consulting Systems Administration Consulting Research Analyst Research Analyst

NIATEC National Information Assurance Training and Education Center National Information Assurance Training and Education Center SFS: Scholarship for Service SFS: Scholarship for Service Undergrads: Junior Rising or Candidates with 2 years remaining Undergrads: Junior Rising or Candidates with 2 years remaining Grad students – MBA Grad students – MBA

Goals and Objectives Overview of AJAX Overview of AJAX History History Technologies Involved Technologies Involved Limitations & Uses Limitations & Uses Implementations Implementations Basic Terms and Components Basic Terms and Components Basic Objects Basic Objects

AJAX History Microsoft Remote Scripting First to make use of asynchronous scripting First to make use of asynchronous scripting IFRAME based JSRS (2000) IFRAME based JSRS (2000) Image/Cookie techniques (2000) Image/Cookie techniques (2000) JavaScript on Demand (2002) JavaScript on Demand (2002) User-community mod to Remote scripting: User-community mod to Remote scripting: XMLHttpRequest XMLHttpRequest Asynchronous JavaScript and XML Asynchronous JavaScript and XML Jesse James Garrett of Adaptive Path Jesse James Garrett of Adaptive Path

The Good Interactive Interactive Very GUI and fun to play with! Very GUI and fun to play with! Very responsive Very responsive Supported by features found in all major browsers on most existing platforms Supported by features found in all major browsers on most existing platforms Examples of AJAX done right Examples of AJAX done right Google Maps, Mail, and Suggest Google Maps, Mail, and Suggest

The Bad There’s no going back baby! There’s no going back baby! Back button functionality Back button functionality Sessions and cookies work around this Sessions and cookies work around this Response time concerns Response time concerns Network Latency Considerations Network Latency Considerations Feedback to the user Feedback to the user Preloading of data Preloading of data Proper use of XMLHttpRequest Proper use of XMLHttpRequest Devices Devices

The Ugly JavaScript MUST be enabled! JavaScript MUST be enabled! Elaborate Error handling Elaborate Error handling Browser Handling Browser Handling Learning Curve and Development Learning Curve and Development Early Stages Early Stages Sharp Learning Curve Sharp Learning Curve Crafty use of CSS, DHTML, XML, XHTML, and JS Crafty use of CSS, DHTML, XML, XHTML, and JS More of an Art than a Science at present More of an Art than a Science at present

Security Considerations Securing AJAX Securing AJAX New technology New technology Client Side Processing Client Side Processing Federal Guidelines Federal Guidelines Man in the Middle attacks Man in the Middle attacks

Accessibility Considerations WAI accessibility Guidelines WAI accessibility Guidelines AJAX relies heavily on features present in desktop graphical browsers AJAX relies heavily on features present in desktop graphical browsers If unable to use the AJAX interface If unable to use the AJAX interface Would the page still be usable? Would the page still be usable? Performance? Performance? Feel? Feel? Content? Content?

Browsers Supporting AJAX Microsoft IE 5.0 and above Microsoft IE 5.0 and above (Mac OS versions Not supported) (Mac OS versions Not supported) Gecko based Browsers Gecko based Browsers Mozilla Mozilla Firefox Firefox Netscape 7.1 and up Netscape 7.1 and up Khtml API Khtml API Konqueror 3.2 and up Konqueror 3.2 and up Apple’s Safari 1.2 and up Apple’s Safari 1.2 and up Opera 8.0 and up Opera 8.0 and up

Who’s Using AJAX Google Google Google Maps Google Maps Google Suggest Google Suggest Google Mail Google Mail Online messenger system Online messenger system Online Photo system Online Photo system ve-Demos/?from=ajax ve-Demos/?from=ajax ve-Demos/?from=ajax ve-Demos/?from=ajax Online webpage development Online webpage development

AJAX Innards HTML HTML JavaScript JavaScript DHTML DHTML Dynamic HTML Dynamic HTML DOM DOM Document Object Model Document Object Model

HTML Hypertext markup language Hypertext markup language Build webforms Build webforms Identify Fields for use Identify Fields for use

JavaScript Core Code Running! Core Code Running! Facilitates communications with the server Facilitates communications with the server

DHTML Dynamic HTML Dynamic HTML Helps update forms dynamically Helps update forms dynamically Mostly “div” and “span” Mostly “div” and “span”

DOM Document Object Model Document Object Model Used through JavaScript Used through JavaScript Used in heavy-duty Java and C/C++ Used in heavy-duty Java and C/C++ No worries No worries Used mostly for XML Used mostly for XML Just know its out there Just know its out there Another lecture in itself Another lecture in itself

XMLHttpRequest JavaScript Object JavaScript Object Heart of AJAX Heart of AJAX Layer between Server and Client Layer between Server and Client Makes things “asynchronous” Makes things “asynchronous” Example: Example: Create a new XMLHttpRequest Object Create a new XMLHttpRequest Object var xmlHttp = new XMLHttpRequest(); var xmlHttp = new XMLHttpRequest();

JavaScript Functions Common Example Common Example // Get the value of the "phone" field and stuff it in a variable called phone var phone = document.getElementById("phone").value; // Set some values on a form using an array called response document.getElementById("order").value = response[0]; document.getElementById("address").value = response[1]; // Get the value of the "phone" field and stuff it in a variable called phone var phone = document.getElementById("phone").value; // Set some values on a form using an array called response document.getElementById("order").value = response[0]; document.getElementById("address").value = response[1];

Browser Considerations Microsoft Internet Explorer Microsoft Internet Explorer var xmlHttp = false; try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } var xmlHttp = false; try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } }

Browser Considerations Mozilla/Firefox (Non-IE) Mozilla/Firefox (Non-IE) var xmlHttp = new XMLHttpRequest object; var xmlHttp = new XMLHttpRequest object;

Multi-Browser Support /* Create a new XMLHttpRequest object to talk to the Web server */ var xmlHttp = >= 5) try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } /* Create a new XMLHttpRequest object to talk to the Web server */ var xmlHttp = >= 5) try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); }

Conclusions New Technology New Technology Standards and common criteria are still in development Standards and common criteria are still in development More of an art than a science More of an art than a science Beautiful interfaces and webpages Beautiful interfaces and webpages The future The future AJAX.NET and similar AJAX.NET and similar

Questions/Comments Thanks! Thanks!