Ajax for PHP Developers

Slide 1: Ajax for PHP Developers

Slide 2: Ajax Who am I? for PHP Developers Sr. Developer @ Magnani Caruso Dutton PHP Developer since end of 3.x JavaScript hacker since ‘99 Javascript developer/evangelist since October ‘07 Blogger: http://lovemikeg.com/ Speaker: http://lovemikeg.com/talks NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 3: Ajax Who are you? for PHP Developers Do you code PHP 5 or PHP 4? Anyone in here love JavaScript? Anyone in here loathe JavaScript? NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 4: Ajax Ajax Defined for PHP Developers “AJAX” does not exist. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 5: Ajax Ajax Defined for PHP Developers “AJAX” The term was originally coined by Jesse James Garret in ‘05 as “Asynchronous JavaScript + XML” does not exist. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 6: Ajax Ajax Defined for PHP Developers “AJAX” “I needed something shorter than ‘Asynchronous JavaScript+CSS+DOM +XMLHttpRequest’ to use when discussing this approach with clients. ” does not exist. Jesse James Garret — March 13, 2005 NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 7: Ajax Ajax Defined for PHP Developers “AJAX” Bottom line: Ajax is not a single technology does not exist. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 8: Ajax Ajax Defined for PHP Developers “AJAX” Ajax is a group of technologies which make web applications feel like desktop applications by eliminating a page refresh. does not exist. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 9: Ajax Ajax Defined for PHP Developers “AJAX” Like all things web, Ajax has evolved considerably since its incarnation. ... including its definition. does not exist. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 10: Ajax In other words... for PHP Developers AJAX Ajax is now NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 11: Ajax “AJAX” for PHP Developers AJAX Depends on XHTML + CSS for Presentation Ajax is now DOM for dynamic display and interaction XML + XSLT for data interchange and manipulation XMLHttpRequest for data retrieval JavaScript to glue everything together NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 12: Ajax “Ajax” for PHP Developers AJAX Ajax is now Offers the same result, without formal requirements. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 13: Ajax “Ajax” for PHP Developers AJAX Ajax is now This makes Ajax behaviors and patterns available to Flash, desktop applications, etc. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 14: Ajax “Ajax” for PHP Developers AJAX Ajax “Ajax” is proper. is now Consider “AJAX” deprecated. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 15: Ajax for PHP Developers Sales The Pitch NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 16: Ajax For Developers for PHP Developers Sales The Pitch Ajax can make your web applications more rich and responsive. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 17: Ajax For Developers for PHP Developers Sales The Pitch Ajax can reduce server load. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 18: Ajax For Developers for PHP Developers Sales The Ajax applications introduce a new approach Pitch to web development. ... and is kinda fun to code toward NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 19: Ajax For everyone else for PHP Developers Sales The Pitch Ajax is a buzzword which is here to stay. making it highly marketable NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 20: Ajax For everyone else for PHP Developers Sales The Ajax applications tend to be more inviting Pitch (and oftentimes more usable) than standard web applications. Although, not necessarily more accessible... NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 21: Ajax For everyone else for PHP Developers Sales The Pitch Even my parents knew what Ajax was. “That’s that Google Satellite thing. Right?” NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 22: Ajax Example applications for PHP Developers Real in the World NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 23: Ajax Google for PHP Developers Real in the World NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 24: Ajax Flickr for PHP Developers Real in the World NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 25: Ajax Facebook for PHP Developers Real in the World NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 26: Ajax for PHP Developers Ajax The Workflow NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 27: Ajax Step-by-step for PHP Developers Ajax 1. Instantiate the XMLHttpRequest Object The 2. Configure the connection 3. Tell it what to do as its state changes Workflow 4. Send the request NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 28: Ajax Step-by-step for PHP Developers // Instantiate Ajax xhr = new XMLHttpRequest; The // Configure xhr.open(‘GET’, uri, true); // What to do when as it changes state xhr.onreadystatechange = stateChangeCallback; Workflow // Send the request xhr.send(null); NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 29: Ajax 1. Instantiate for PHP Developers Looks simple enough Ajax ... but don’t forget about IE 6 (more on that later) The // Instantiate xhr = new XMLHttpRequest; Workflow NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 30: Ajax The Full XHR Interface for PHP Developers interface XMLHttpRequest { readyState : Number; Ajax responseText : String; responseXML : Document; status : Number; The statusText : String; onreadystatechange : EventListener; open (method, uri, async) : void; Workflow send (data) : void; abort() : void; setRequestHeader(name, value) : void; getResponseHeader(name) : String; getAllResponseHeaders() : String; }; NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 31: Ajax 2. Configure for PHP Developers Tell the instance: Ajax What request method to use The Where to go Whether or not to go there asynchronously Workflow // Configure xhr.open(‘GET’, uri, true); NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 32: Ajax 3. When state changes for PHP Developers Possible readyState values: Ajax 0: Unsent The 1: Opened 2: Headers have been received 3: Loading Workflow 4: Done // What to do when as it changes state xhr.onreadystatechange = stateChangeCallback; NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 33: Ajax 4. Send the Request for PHP Developers With [semi] optional data: Ajax Only required if sending POST data The GET requests need null (only in IE) Workflow // Send the request xhr.send(null); NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 34: Ajax for PHP Developers Live Demo (Code Download) NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 35: Ajax Browser Inconsistencies for PHP Developers Differences Between Browsers NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 36: Ajax Browser Inconsistencies for PHP Developers Differences Between Believe it or not, XMLHTTP was a Microsoft technology Via an ActiveXObject instance Browsers NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 37: Ajax Browser Inconsistencies for PHP Developers Differences Between Later on the W3 standardized the object now known as XMLHttpRequest Via a direct XMLHttpRequest instance Browsers NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 38: Ajax Browser Inconsistencies for PHP Developers Differences Between Up until IE7, Microsoft used an ActiveX control to instantiate the XHR object. Browsers NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 39: Ajax Browser Inconsistencies for PHP Developers Differences Between Other clients just did what the W3 told them. Browsers NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 40: Ajax Browser Inconsistencies for PHP Developers Differences Between You have to code for this. Browsers NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 41: Ajax Cross Browser XHR for PHP Developers Step 1: Code a function for W3 XHR Differences Between var getW3XHR = function () { return new XMLHttpRequest; }; Browsers NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 42: Ajax Cross Browser XHR for PHP Developers Step 2: Code a function for Explorer XHR Differences var getExplorerXHR = function () { var xhr, axo, ex; var objects = [‘Microsoft’, ‘Msxml2’, ‘Msxml3’]; for (var i = 0; i < objects.length; i++) { Between axo = objects[i] + ‘.XMLHTTP’; try { xhr = new ActiveXObject(axo); return xhr; Browsers } catch (ex) {}; } throw “Unable to create XHR object.”; }; NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 43: Ajax Cross Browser XHR for PHP Developers Step 3: Code a single getXHR function Differences var getXHR = function () { if (window.XMLHttpRequest) { Between return getW3XHR; } else if (window.ActiveXObject) { return getExplorerXHR; } Browsers }(); NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 44: Ajax XHR Gotchas for PHP Developers Differences Between It’s not cross browser. At least while IE6 is widely used. Browsers NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 45: Ajax XHR Gotchas for PHP Developers Differences Between IE doesn’t properly interpret this in onreadystatechage. Reference an external variable instead. Browsers NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 46: Ajax XHR Gotchas for PHP Developers Differences Between IE messes with the response headers. use headerValue.match(/something/) to detect the value you want. Browsers NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 47: Ajax XHR Gotchas for PHP Developers Differences Aborting XHR’s is a pain Between Make sure you unset onreadystatechange because it will fire on abort() IE doesn’t like it when you null the event, instead you Browsers have to set it to an empty function NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 48: Ajax Browser Inconsistencies for PHP Developers Helpful Hints NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 49: Ajax Use JSON for PHP Developers Helpful “JavaScript Object Notation” Considerably lighter than XML Hints Generally much quicker too Security concerns can be mitigated by using JSONRequest. http://json.org NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 50: Ajax Avoid XML for PHP Developers Helpful See previous slide. Plain text and HTML (set via innerHTML) are ridiculously fast. Hints Non-IE browsers register text nodes as siblings... very annoying. Don’t forget to send as text/xml... otherwise it gets stuffed into responseText NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 51: Ajax Avoid XML for PHP Developers Helpful If you must use XML Hints You didn’t try hard enough foo.getElementsByTagName(‘bar’) is your friend NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 52: Ajax Don’t forget Accessibility for PHP Developers Helpful Ask yourself, “Is Ajax really necessary?” Ajax should progressivly enhance an already Hints established UX... not create it. If you suck at disciplined development, always “Phase Two” the Ajax. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 53: Ajax Don’t forget Security for PHP Developers Helpful If you’re eval’ing JSON, run it through a RegExp first. Blindly setting innerHTML is silly too: inline Hints event handlers are a bad thing. Just because you don’t see it, doesn’t mean there’s any extra security. NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 54: Ajax Links for PHP Developers Helpful Mozilla Developer Center: Ajax developer.mozilla.org/en/docs/AJAX Hints Quirksmode XMLHTTP Articles quirksmode.org/blog/archives/coding_techniques/ xmlhttp/index.html NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 55: Ajax Links for PHP Developers Helpful Wikipedia: Ajax en.wikipedia.org/wiki/AJAX Hints Ajax: A New Approach to Web Applications adaptivepath.com/ideas/essays/archives/000385.php NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 56: Ajax Links for PHP Developers Helpful W3 XMLHttpRequest Recommendation w3.org/TR/XMLHttpRequest/ Hints Explorer XMLHttpRequest Documentation msdn.microsoft.com/en-us/library/ms535874(VS. 85).aspx NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 57: Ajax for PHP Developers Questions? NYPHP: July 22, 2008 mikeg@lovemikeg.com

Slide 58: Ajax for PHP Developers Thanks! http://lovemikeg.com/ NYPHP: July 22, 2008 mikeg@lovemikeg.com