• Like
  • Save
Ajax Design Patterns
Upcoming SlideShare
Loading in...5
×
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,700
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Ajax Design Patterns
  • 2. 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!
  • 3. Ajax Architecture
  • 4. 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
  • 5. 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 );
  • 6. 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 );
  • 7. 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...”);
  • 8. Avoiding browser cache
    • Add ignorable time stamp to query string:
    • function loadUrl( url ) {
    • url = url + &quot;?t=&quot;+((new Date()).valueOf());
    • ...
    • }
  • 9. 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>
  • 10. Reference
    • http://www.ibm.com/developerworks/library/x-ajaxxml2/
    • http://www.topcoder.com/tc?module=Static&d1=features&d2=071706