ajax in action the journey into web2.0 presented by eric pascarello

Download Ajax In Action The Journey into Web2.0 Presented by Eric Pascarello

Post on 13-Jan-2016




0 download

Embed Size (px)


  • Ajax In Action The Journey into Web2.0Presented by Eric Pascarello

  • Author of:

  • Some Background InfoHTML/JavaScript Moderator at JavaRanch.com Member since 2001Ajax Developer at market10.comThe worlds first job matching site

  • What is Ajax exactly?

  • Asynchronous JavaScript and XML

    Utilizes the XMLHttpRequest() Object.First implemented in Microsoft Internet Explorer Version 5 for Windows as an ActiveX ObjectThe other browsers copied Microsoft starting with these versions:Mozilla 1.0 / Firefox 1.0 / Netscape 7Opera 8.01 / Opera Mobile Browser 8.0Safari 1.2 / Konqueror 3.2 / iCab 3.0b352Plus other minor browsers

  • Ajax is. Ajax is not.Ajax is not a programming language.Ajax is a methodologyAjax works with the XMLHttpRequest Object. (JavaScript)ActiveX with IE5 to IE6Native Object for other browsers and IE7And your choice of ServerSide Technology

  • What started the hype?

  • Adaptive Paths Original Diagram

  • The real life diagramTHE COLLEGE PARTY

  • The Bleak Situation

  • The Non-Ajax SolutionFigure out what is more important and rank order of operation.Should I clean the mess, get food, or update the outdated music collection?Perform one task and do the others after each other. Hopefully I have enough time!Go to Store, Download Music, Clean Apartment so it can be trashed again.

  • The Ajax SolutionDo multiple things at once!

    Hire a maid to do the cleaning!Order delivery pizza! And I can download new music while others do the dirty work! Ajax Clean!

  • Benefits and Problems The Page WeightRendering PagesMaintain Page StateBack, Forward, and RefreshConnection SpeedJavaScript!

  • Ajax Limitations No Cross Domain RequestsJavaScript DisabledOlder BrowsersOlder Servers508?


  • The XHR ObjectThe Gecko / Safari / IE7 Object Constructorreq = new XMLHttpRequest();

    The ActiveX for IE 6 and earlierreq = new ActiveXObject("Microsoft.XMLHTTP");ORreq = new ActiveXObject("Msxml2.XMLHTTP");

  • XHR Object Methods

  • XHR open()

    open("method", "URL", asyncFlag); method = GET or POST

    URL = Page to requestasyncFlag = True or False

  • XHR Object Properties

  • readyState values 0 uninitialized1 loading2 loaded3 interactive4 complete (Can process returned data!)


  • JavaScript QuizQuiz.....

  • Basic Ajax In Action Content Loader

    var loader1 = new net.ContentLoader( "RequestURL.aspx", FinishFunction, customErrorFunction, "POST/GET", "POST Parameters");

  • SecurityNo different than a traditional postbackCheck for SQL InjectionCheck for JavaScript InjectionValidate the Data

  • Hack This FormBasic Form Hack Example

  • Business Logic - Server or Client Really depends on applicationSecurityVisual RenderingSpeed - Process data how many times?Data size in response/requestXML, Strings, or JSON?

  • Ajax Developer Must Haves!Drip IE Leak DetectorFirefox ExtensionsAdblock Ah, just because!FirebugSelenium IDEJSViewNOSCRIPTModify Headers

  • Where to get more info

    My Blog: http://radio.javaranch.com/pascarelloForum: http://www.javaranch.comForum: http://www.intelliobjects.com/Ajax News: http://www.Ajaxian.comAjax In Action info: http://www.manning.com/crane

  • Larger Demos& Questions