AJAXAJAX

ByBySteven HernandezSteven Hernandez

Research AnalystResearch AnalystNIATECNIATEC

IntroductionIntroduction

Who I amWho I am EducationEducation

AAS Electronic SystemsAAS Electronic Systems AAS Lasers and Electro-OpticsAAS Lasers and Electro-Optics BBA CIS from COB at ISUBBA CIS from COB at ISU Currently working towards MBA in IACurrently working towards MBA in IA

ExperienceExperience Network AdministrationNetwork Administration Desktop Support/Helpdesk ManagementDesktop Support/Helpdesk Management Systems Administration ConsultingSystems Administration Consulting Research AnalystResearch Analyst

NIATECNIATEC

National Information Assurance Training National Information Assurance Training and Education Centerand Education Center

SFS: Scholarship for ServiceSFS: Scholarship for ServiceUndergrads: Junior Rising or Candidates with Undergrads: Junior Rising or Candidates with

2 years remaining2 years remainingGrad students – MBAGrad students – MBAhttp://niatec.info/http://niatec.info/

Goals and ObjectivesGoals and Objectives

Overview of AJAXOverview of AJAXHistoryHistoryTechnologies InvolvedTechnologies InvolvedLimitations & UsesLimitations & Uses ImplementationsImplementationsBasic Terms and ComponentsBasic Terms and ComponentsBasic ObjectsBasic Objects

AJAX HistoryAJAX History

Microsoft Remote ScriptingMicrosoft Remote Scripting First to make use of asynchronous scriptingFirst 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:

XMLHttpRequestXMLHttpRequest

Asynchronous JavaScript and XMLAsynchronous JavaScript and XML Jesse James Garrett of Adaptive PathJesse James Garrett of Adaptive Path

The GoodThe Good

InteractiveInteractiveVery GUI and fun to play with!Very GUI and fun to play with!Very responsiveVery responsive

Supported by features found in all major Supported by features found in all major browsers on most existing platformsbrowsers on most existing platforms

Examples of AJAX done rightExamples of AJAX done rightGoogle Maps, Mail, and SuggestGoogle Maps, Mail, and Suggesthttp://www.flickr.com/http://www.flickr.com/

The BadThe Bad

There’s no going back baby!There’s no going back baby!Back button functionalityBack button functionalitySessions and cookies work around thisSessions and cookies work around this

Response time concernsResponse time concernsNetwork Latency ConsiderationsNetwork Latency Considerations

Feedback to the userFeedback to the userPreloading of dataPreloading of dataProper use of XMLHttpRequestProper use of XMLHttpRequestDevicesDevices

The UglyThe Ugly

JavaScript MUST be enabled!JavaScript MUST be enabled!Elaborate Error handlingElaborate Error handlingBrowser HandlingBrowser Handling

Learning Curve and DevelopmentLearning Curve and DevelopmentEarly StagesEarly StagesSharp Learning CurveSharp Learning CurveCrafty use of CSS, DHTML, XML, XHTML, Crafty use of CSS, DHTML, XML, XHTML,

and JSand JSMore of an Art than a Science at presentMore of an Art than a Science at present

Security ConsiderationsSecurity Considerations

Securing AJAXSecuring AJAXNew technologyNew technologyClient Side ProcessingClient Side Processing

Federal GuidelinesFederal Guidelines

Man in the Middle attacksMan in the Middle attacks

Accessibility ConsiderationsAccessibility Considerations

WAI accessibility GuidelinesWAI accessibility GuidelinesAJAX relies heavily on features present in AJAX relies heavily on features present in

desktop graphical browsersdesktop graphical browsers If unable to use the AJAX interfaceIf 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 AJAXBrowsers Supporting AJAX

Microsoft IE 5.0 and aboveMicrosoft IE 5.0 and above (Mac OS versions Not supported)(Mac OS versions Not supported)

Gecko based BrowsersGecko based Browsers MozillaMozilla FirefoxFirefox Netscape 7.1 and upNetscape 7.1 and up

Khtml APIKhtml API Konqueror 3.2 and upKonqueror 3.2 and up Apple’s Safari 1.2 and upApple’s Safari 1.2 and up

Opera 8.0 and upOpera 8.0 and up

Who’s Using AJAXWho’s Using AJAX GoogleGoogle

Google MapsGoogle Maps Google SuggestGoogle Suggest Google MailGoogle Mail

http://www.meebo.com/http://www.meebo.com/ Online messenger systemOnline messenger system

http://www.flickr.com/http://www.flickr.com/ Online Photo systemOnline Photo system

http://www.interaktonline.com/Products/KTML/Lihttp://www.interaktonline.com/Products/KTML/Live-Demos/?from=ajaxve-Demos/?from=ajax Online webpage developmentOnline webpage development

AJAX InnardsAJAX Innards

HTMLHTMLJavaScriptJavaScriptDHTMLDHTML

Dynamic HTMLDynamic HTMLDOMDOM

Document Object ModelDocument Object Model

HTMLHTML

Hypertext markup languageHypertext markup languageBuild webformsBuild webforms Identify Fields for useIdentify Fields for use

JavaScriptJavaScript

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

DHTMLDHTML

Dynamic HTMLDynamic HTMLHelps update forms dynamicallyHelps update forms dynamicallyMostly “div” and “span”Mostly “div” and “span”

DOMDOM

Document Object ModelDocument Object ModelUsed through JavaScriptUsed through JavaScriptUsed in heavy-duty Java and C/C++Used in heavy-duty Java and C/C++No worriesNo worries

Used mostly for XMLUsed mostly for XMLJust know its out thereJust know its out thereAnother lecture in itselfAnother lecture in itself

XMLHttpRequestXMLHttpRequest

JavaScript ObjectJavaScript ObjectHeart of AJAXHeart of AJAXLayer between Server and ClientLayer between Server and ClientMakes things “asynchronous”Makes things “asynchronous”Example:Example:

Create a new XMLHttpRequest ObjectCreate a new XMLHttpRequest Object<script language="javascript" <script language="javascript"

type="text/javascript"> var xmlHttp = new type="text/javascript"> var xmlHttp = new XMLHttpRequest(); </script> XMLHttpRequest(); </script>

JavaScript FunctionsJavaScript Functions

Common ExampleCommon Example // Get the value of the "phone" field and stuff it in // Get the value of the "phone" field and stuff it in

a variable called phone var phone = a variable called phone var phone = document.getElementById("phone").value; // Set document.getElementById("phone").value; // Set some values on a form using an array called some values on a form using an array called response response document.getElementById("order").value = document.getElementById("order").value = response[0]; response[0]; document.getElementById("address").value = document.getElementById("address").value = response[1]; response[1];

Browser ConsiderationsBrowser Considerations

Microsoft Internet ExplorerMicrosoft Internet Explorervar xmlHttp = false; try { xmlHttp = new var xmlHttp = false; try { xmlHttp = new

ActiveXObject("Msxml2.XMLHTTP"); } ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } catch (e2) { xmlHttp = false; } }

Browser ConsiderationsBrowser Considerations

Mozilla/Firefox (Non-IE)Mozilla/Firefox (Non-IE)var xmlHttp = new XMLHttpRequest var xmlHttp = new XMLHttpRequest

object; object;

Multi-Browser SupportMulti-Browser Support

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

ConclusionsConclusions

New TechnologyNew TechnologyStandards and common criteria are still in Standards and common criteria are still in

developmentdevelopmentMore of an art than a scienceMore of an art than a scienceBeautiful interfaces and webpagesBeautiful interfaces and webpagesThe futureThe future

AJAX.NET and similarAJAX.NET and similar

Questions/CommentsQuestions/Comments

Thanks!Thanks!