Date post: | 11-Jan-2016 |
Category: |
Documents |
Upload: | kory-henderson |
View: | 213 times |
Download: | 0 times |
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!