AJAX By Steven Hernandez Research Analyst NIATEC.
-
Upload
kory-henderson -
Category
Documents
-
view
214 -
download
0
Transcript of AJAX By Steven Hernandez Research Analyst NIATEC.
![Page 1: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/1.jpg)
AJAXAJAX
ByBySteven HernandezSteven Hernandez
Research AnalystResearch AnalystNIATECNIATEC
![Page 2: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/2.jpg)
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
![Page 3: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/3.jpg)
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/
![Page 4: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/4.jpg)
Goals and ObjectivesGoals and Objectives
Overview of AJAXOverview of AJAXHistoryHistoryTechnologies InvolvedTechnologies InvolvedLimitations & UsesLimitations & Uses ImplementationsImplementationsBasic Terms and ComponentsBasic Terms and ComponentsBasic ObjectsBasic Objects
![Page 5: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/5.jpg)
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
![Page 6: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/6.jpg)
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/
![Page 7: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/7.jpg)
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
![Page 8: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/8.jpg)
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
![Page 9: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/9.jpg)
Security ConsiderationsSecurity Considerations
Securing AJAXSecuring AJAXNew technologyNew technologyClient Side ProcessingClient Side Processing
Federal GuidelinesFederal Guidelines
Man in the Middle attacksMan in the Middle attacks
![Page 10: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/10.jpg)
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?
![Page 11: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/11.jpg)
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
![Page 12: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/12.jpg)
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
![Page 13: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/13.jpg)
AJAX InnardsAJAX Innards
HTMLHTMLJavaScriptJavaScriptDHTMLDHTML
Dynamic HTMLDynamic HTMLDOMDOM
Document Object ModelDocument Object Model
![Page 14: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/14.jpg)
HTMLHTML
Hypertext markup languageHypertext markup languageBuild webformsBuild webforms Identify Fields for useIdentify Fields for use
![Page 15: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/15.jpg)
JavaScriptJavaScript
Core Code Running!Core Code Running!Facilitates communications with the serverFacilitates communications with the server
![Page 16: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/16.jpg)
DHTMLDHTML
Dynamic HTMLDynamic HTMLHelps update forms dynamicallyHelps update forms dynamicallyMostly “div” and “span”Mostly “div” and “span”
![Page 17: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/17.jpg)
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
![Page 18: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/18.jpg)
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>
![Page 19: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/19.jpg)
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];
![Page 20: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/20.jpg)
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; } }
![Page 21: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/21.jpg)
Browser ConsiderationsBrowser Considerations
Mozilla/Firefox (Non-IE)Mozilla/Firefox (Non-IE)var xmlHttp = new XMLHttpRequest var xmlHttp = new XMLHttpRequest
object; object;
![Page 22: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/22.jpg)
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(); }
![Page 23: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/23.jpg)
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
![Page 24: AJAX By Steven Hernandez Research Analyst NIATEC.](https://reader035.fdocuments.in/reader035/viewer/2022062801/56649e315503460f94b22d51/html5/thumbnails/24.jpg)
Questions/CommentsQuestions/Comments
Thanks!Thanks!