Ajax Design Patterns

4,435 views
4,228 views

Published on

quick ajax presentation

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,435
On SlideShare
0
From Embeds
0
Number of Embeds
582
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Ajax Design Patterns

  1. 1. Ajax Design Patterns
  2. 2. Ajax? <ul><li>Ajax is just buzzword! </li></ul><ul><li>Ajax = Dynamic HTML + XMLHTTPRequest </li></ul><ul><li>DHTML = </li></ul><ul><ul><li>Hypertext Markup Language (HTML)‏ </li></ul></ul><ul><ul><li>JavaScript code </li></ul></ul><ul><ul><li>Cascading Style Sheets (CSS)‏ </li></ul></ul><ul><li>Get data dynamically from server using XMLHTTPRequest and display them in page dynamically using DHTML! </li></ul>
  3. 3. Ajax Architecture
  4. 4. 5 Common ajax patterns <ul><li>Patterns are designed for common tasks to make life easy </li></ul><ul><li>Five common ajax patterns: </li></ul><ul><ul><li>Loading HTML part of page </li></ul></ul><ul><ul><li>Loading XML formatted data </li></ul></ul><ul><ul><li>Loading JavaScript </li></ul></ul><ul><ul><li>Avoiding browser cache </li></ul></ul><ul><ul><li>Update multiple items HTML </li></ul></ul>
  5. 5. Pattern 1. Loading HTML part of page <ul><li>var req = null; </li></ul><ul><li>function processReqChange() { </li></ul><ul><li>if (req.readyState == 4 && req.status == 200 ) { </li></ul><ul><li>var dobj = document.getElementById( 'someDivIdInYourHTMLPage' ); </li></ul><ul><li>dobj.innerHTML = req.responseText; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>function loadUrl( url ) { </li></ul><ul><li>if(window.XMLHttpRequest) { </li></ul><ul><li>try { req = new XMLHttpRequest(); </li></ul><ul><li>} catch(e) { req = false; } </li></ul><ul><li>} else if(window.ActiveXObject) { </li></ul><ul><li>try { req = new ActiveXObject('Msxml2.XMLHTTP'); </li></ul><ul><li>} catch(e) { </li></ul><ul><li>try { req = new ActiveXObject('Microsoft.XMLHTTP'); </li></ul><ul><li>} catch(e) { req = false; } </li></ul><ul><li>} } </li></ul><ul><li>if(req) { </li></ul><ul><li>req.onreadystatechange = processReqChange; </li></ul><ul><li>req.open('GET', url, true); </li></ul><ul><li>req.send(''); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>var url = ”mywebsite.com/get_div_content”; </li></ul><ul><li>loadUrl( url ); </li></ul>
  6. 6. Loading XML formatted data <ul><li>function processReqChange() { </li></ul><ul><li>if (req.readyState == 4 && req.status == 200 && req.responseXML ) { </li></ul><ul><li>var dtable = document.getElementById( 'idOfContainerInYourPage' ); </li></ul><ul><li>var nl = req.responseXML.getElementsByTagName( 'book' ); </li></ul><ul><li>for( var i = 0; i < nl.length; i++ ) { </li></ul><ul><li>var nli = nl.item( i ); </li></ul><ul><li>var elAuthor = nli.getElementsByTagName( 'author' ); </li></ul><ul><li>var author = elAuthor.item(0).firstChild.nodeValue; </li></ul><ul><li>var elTitle = nli.getElementsByTagName( 'title' ); </li></ul><ul><li>var title = elTitle.item(0).firstChild.nodeValue; </li></ul><ul><li>var elTr = dtable.insertRow( -1 ); </li></ul><ul><li>var elAuthorTd = elTr.insertCell( -1 ); </li></ul><ul><li>elAuthorTd.innerHTML = author; </li></ul><ul><li>var elTitleTd = elTr.insertCell( -1 ); </li></ul><ul><li>elTitleTd.innerHTML = title; </li></ul><ul><li>} } } </li></ul><ul><li>function loadXMLDoc( url ) { </li></ul><ul><li>if(window.XMLHttpRequest) { </li></ul><ul><li>try { req = new XMLHttpRequest(); </li></ul><ul><li>} catch(e) { req = false; } </li></ul><ul><li>} else if(window.ActiveXObject) { </li></ul><ul><li>try { req = new ActiveXObject('Msxml2.XMLHTTP'); </li></ul><ul><li>} catch(e) { </li></ul><ul><li>try { req = new ActiveXObject('Microsoft.XMLHTTP'); </li></ul><ul><li>} catch(e) { req = false; } </li></ul><ul><li>} } </li></ul><ul><li>if(req) { </li></ul><ul><li>req.onreadystatechange = processReqChange; </li></ul><ul><li>req.open('GET', url, true); </li></ul><ul><li>req.send(''); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>var url = ”mywebsite.com/my_data.xml”; </li></ul><ul><li>loadXMLDoc( url ); </li></ul>
  7. 7. Loading JavaScript <ul><li>var req = null; </li></ul><ul><li>function processReqChange() { </li></ul><ul><li>if (req.readyState == 4 && req.status == 200 ) { </li></ul><ul><li>var dtable = document.getElementById( 'dataBody' ); </li></ul><ul><li>var books = eval( req.responseText ); </li></ul><ul><li>for( var b in books ) { </li></ul><ul><li>var elTr = dtable.insertRow( -1 ); </li></ul><ul><li>var elAuthorTd = elTr.insertCell( -1 ); </li></ul><ul><li>elAuthorTd.innerHTML = books[b].author; </li></ul><ul><li>var elTitleTd = elTr.insertCell( -1 ); </li></ul><ul><li>elTitleTd.innerHTML = books[b].title; </li></ul><ul><li>} } } </li></ul><ul><li>... </li></ul><ul><li>And javascript code from server contains data: </li></ul><ul><li>[ { author: 'Jack Herrington', title: 'Code Generation in Action' }, </li></ul><ul><li>{ author: 'Jack Herrington', title: 'Podcasting Hacks' }, </li></ul><ul><li>{ author: 'Jack Herrington', title: 'PHP Hacks' } </li></ul><ul><li>] </li></ul><ul><li>var req = null; </li></ul><ul><li>function processReqChange() { </li></ul><ul><li>if (req.readyState == 4 && req.status == 200 ) { </li></ul><ul><li>var dtable = document.getElementById( 'dataBody' ); </li></ul><ul><li>eval( req.responseText ); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>... </li></ul><ul><li>And javascript code from server contains some commands: </li></ul><ul><li>alert(”some text from server...”); </li></ul>
  8. 8. Avoiding browser cache <ul><li>Add ignorable time stamp to query string: </li></ul><ul><li>function loadUrl( url ) { </li></ul><ul><li>url = url + &quot;?t=&quot;+((new Date()).valueOf()); </li></ul><ul><li>... </li></ul><ul><li>} </li></ul>
  9. 9. Update multiple items HTML <ul><li>var req = null; </li></ul><ul><li>function processReqChange() { </li></ul><ul><li>if (req.readyState == 4 && req.status == 200 ) { </li></ul><ul><li>var one = req.responseText.match( /<one>(.*?)</one>/ ); </li></ul><ul><li>document.getElementById( 'divOne' ).innerHTML = one[1]; </li></ul><ul><li>var two = req.responseText.match( /<two>(.*?)</two>/ ); </li></ul><ul><li>document.getElementById( 'divTwo' ).innerHTML = two[1]; </li></ul><ul><li>} } </li></ul><ul><li>function loadXMLDoc( url ) { ... } </li></ul><ul><li>var url = ”mywebsite.com/html_contents.xml”; </li></ul><ul><li>loadXMLDoc( url ); </li></ul><ul><li>and xml should contains following: </li></ul><ul><li><segments> </li></ul><ul><li><one>Content for segment one</one> </li></ul><ul><li><two>Content for segment <b>two</b></two> </li></ul><ul><li></segments> </li></ul>
  10. 10. Reference <ul><li>http://www.ibm.com/developerworks/library/x-ajaxxml2/ </li></ul><ul><li>http://www.topcoder.com/tc?module=Static&d1=features&d2=071706 </li></ul>

×