Ajax Design Patterns

Ajax? Ajax is just buzzword! Ajax = Dynamic HTML + XMLHTTPRequest DHTML = Hypertext Markup Language (HTML)‏ JavaScript code Cascading Style Sheets (CSS)‏ Get data dynamically from server using XMLHTTPRequest and display them in page dynamically using DHTML!

Ajax is just buzzword!

Ajax = Dynamic HTML + XMLHTTPRequest

DHTML =

Hypertext Markup Language (HTML)‏

JavaScript code

Cascading Style Sheets (CSS)‏

Get data dynamically from server using XMLHTTPRequest and display them in page dynamically using DHTML!

Ajax Architecture

5 Common ajax patterns Patterns are designed for common tasks to make life easy Five common ajax patterns: Loading HTML part of page Loading XML formatted data Loading JavaScript Avoiding browser cache Update multiple items HTML

Patterns are designed for common tasks to make life easy

Five common ajax patterns:

Loading HTML part of page

Loading XML formatted data

Loading JavaScript

Avoiding browser cache

Update multiple items HTML

Pattern 1. Loading HTML part of page var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dobj = document.getElementById( 'someDivIdInYourHTMLPage' ); dobj.innerHTML = req.responseText; } } function loadUrl( url ) { if(window.XMLHttpRequest) { try { req = new XMLHttpRequest(); } catch(e) { req = false; } } else if(window.ActiveXObject) { try { req = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { try { req = new ActiveXObject('Microsoft.XMLHTTP'); } catch(e) { req = false; } } } if(req) { req.onreadystatechange = processReqChange; req.open('GET', url, true); req.send(''); } } var url = ”mywebsite.com/get_div_content”; loadUrl( url );

var req = null;

function processReqChange() {

if (req.readyState == 4 && req.status == 200 ) {

var dobj = document.getElementById( 'someDivIdInYourHTMLPage' );

dobj.innerHTML = req.responseText;

}

}

function loadUrl( url ) {

if(window.XMLHttpRequest) {

try { req = new XMLHttpRequest();

} catch(e) { req = false; }

} else if(window.ActiveXObject) {

try { req = new ActiveXObject('Msxml2.XMLHTTP');

} catch(e) {

try { req = new ActiveXObject('Microsoft.XMLHTTP');

} catch(e) { req = false; }

} }

if(req) {

req.onreadystatechange = processReqChange;

req.open('GET', url, true);

req.send('');

}

}

var url = ”mywebsite.com/get_div_content”;

loadUrl( url );

Loading XML formatted data function processReqChange() { if (req.readyState == 4 && req.status == 200 && req.responseXML ) { var dtable = document.getElementById( 'idOfContainerInYourPage' ); var nl = req.responseXML.getElementsByTagName( 'book' ); for( var i = 0; i < nl.length; i++ ) { var nli = nl.item( i ); var elAuthor = nli.getElementsByTagName( 'author' ); var author = elAuthor.item(0).firstChild.nodeValue; var elTitle = nli.getElementsByTagName( 'title' ); var title = elTitle.item(0).firstChild.nodeValue; var elTr = dtable.insertRow( -1 ); var elAuthorTd = elTr.insertCell( -1 ); elAuthorTd.innerHTML = author; var elTitleTd = elTr.insertCell( -1 ); elTitleTd.innerHTML = title; } } } function loadXMLDoc( url ) { if(window.XMLHttpRequest) { try { req = new XMLHttpRequest(); } catch(e) { req = false; } } else if(window.ActiveXObject) { try { req = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { try { req = new ActiveXObject('Microsoft.XMLHTTP'); } catch(e) { req = false; } } } if(req) { req.onreadystatechange = processReqChange; req.open('GET', url, true); req.send(''); } } var url = ”mywebsite.com/my_data.xml”; loadXMLDoc( url );

function processReqChange() {

if (req.readyState == 4 && req.status == 200 && req.responseXML ) {

var dtable = document.getElementById( 'idOfContainerInYourPage' );

var nl = req.responseXML.getElementsByTagName( 'book' );

for( var i = 0; i < nl.length; i++ ) {

var nli = nl.item( i );

var elAuthor = nli.getElementsByTagName( 'author' );

var author = elAuthor.item(0).firstChild.nodeValue;

var elTitle = nli.getElementsByTagName( 'title' );

var title = elTitle.item(0).firstChild.nodeValue;

var elTr = dtable.insertRow( -1 );

var elAuthorTd = elTr.insertCell( -1 );

elAuthorTd.innerHTML = author;

var elTitleTd = elTr.insertCell( -1 );

elTitleTd.innerHTML = title;

} } }

function loadXMLDoc( url ) {

if(window.XMLHttpRequest) {

try { req = new XMLHttpRequest();

} catch(e) { req = false; }

} else if(window.ActiveXObject) {

try { req = new ActiveXObject('Msxml2.XMLHTTP');

} catch(e) {

try { req = new ActiveXObject('Microsoft.XMLHTTP');

} catch(e) { req = false; }

} }

if(req) {

req.onreadystatechange = processReqChange;

req.open('GET', url, true);

req.send('');

}

}

var url = ”mywebsite.com/my_data.xml”;

loadXMLDoc( url );

Loading JavaScript var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dtable = document.getElementById( 'dataBody' ); var books = eval( req.responseText ); for( var b in books ) { var elTr = dtable.insertRow( -1 ); var elAuthorTd = elTr.insertCell( -1 ); elAuthorTd.innerHTML = books[b].author; var elTitleTd = elTr.insertCell( -1 ); elTitleTd.innerHTML = books[b].title; } } } ... And javascript code from server contains data: [ { author: 'Jack Herrington', title: 'Code Generation in Action' }, { author: 'Jack Herrington', title: 'Podcasting Hacks' }, { author: 'Jack Herrington', title: 'PHP Hacks' } ] var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dtable = document.getElementById( 'dataBody' ); eval( req.responseText ); } } ... And javascript code from server contains some commands: alert(”some text from server...”);

var req = null;

function processReqChange() {

if (req.readyState == 4 && req.status == 200 ) {

var dtable = document.getElementById( 'dataBody' );

var books = eval( req.responseText );

for( var b in books ) {

var elTr = dtable.insertRow( -1 );

var elAuthorTd = elTr.insertCell( -1 );

elAuthorTd.innerHTML = books[b].author;

var elTitleTd = elTr.insertCell( -1 );

elTitleTd.innerHTML = books[b].title;

} } }

...

And javascript code from server contains data:

[ { author: 'Jack Herrington', title: 'Code Generation in Action' },

{ author: 'Jack Herrington', title: 'Podcasting Hacks' },

{ author: 'Jack Herrington', title: 'PHP Hacks' }

]

var req = null;

function processReqChange() {

if (req.readyState == 4 && req.status == 200 ) {

var dtable = document.getElementById( 'dataBody' );

eval( req.responseText );

}

}

...

And javascript code from server contains some commands:

alert(”some text from server...”);

Avoiding browser cache Add ignorable time stamp to query string: function loadUrl( url ) { url = url + &quot;?t=&quot;+((new Date()).valueOf()); ... }

Add ignorable time stamp to query string:

function loadUrl( url ) {

url = url + &quot;?t=&quot;+((new Date()).valueOf());

...

}

Update multiple items HTML var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var one = req.responseText.match( /<one>(.*?)</one>/ ); document.getElementById( 'divOne' ).innerHTML = one[1]; var two = req.responseText.match( /<two>(.*?)</two>/ ); document.getElementById( 'divTwo' ).innerHTML = two[1]; } } function loadXMLDoc( url ) { ... } var url = ”mywebsite.com/html_contents.xml”; loadXMLDoc( url ); and xml should contains following: <segments> <one>Content for segment one</one> <two>Content for segment <b>two</b></two> </segments>

var req = null;

function processReqChange() {

if (req.readyState == 4 && req.status == 200 ) {

var one = req.responseText.match( /<one>(.*?)</one>/ );

document.getElementById( 'divOne' ).innerHTML = one[1];

var two = req.responseText.match( /<two>(.*?)</two>/ );

document.getElementById( 'divTwo' ).innerHTML = two[1];

} }

function loadXMLDoc( url ) { ... }

var url = ”mywebsite.com/html_contents.xml”;

loadXMLDoc( url );

and xml should contains following:

<segments>

<one>Content for segment one</one>

<two>Content for segment <b>two</b></two>

</segments>

Reference http://www.ibm.com/developerworks/library/x-ajaxxml2/ http://www.topcoder.com/tc?module=Static&d1=features&d2=071706

http://www.ibm.com/developerworks/library/x-ajaxxml2/

http://www.topcoder.com/tc?module=Static&d1=features&d2=071706