• Save
Ajax Design Patterns
Upcoming SlideShare
Loading in...5
×
 

Ajax Design Patterns

on

  • 5,120 views

quick ajax presentation

quick ajax presentation

Statistics

Views

Total Views
5,120
Views on SlideShare
4,566
Embed Views
554

Actions

Likes
4
Downloads
0
Comments
0

4 Embeds 554

http://notvoid.persianblog.ir 542
http://www.slideshare.net 10
http://72.30.186.176 1
http://inoreader.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ajax Design Patterns Ajax Design Patterns Presentation Transcript

  • 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 Architecture View slide
  • 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
    View slide
  • 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 );
  • 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 );
  • 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...”);
  • Avoiding browser cache
    • 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>
  • Reference
    • http://www.ibm.com/developerworks/library/x-ajaxxml2/
    • http://www.topcoder.com/tc?module=Static&d1=features&d2=071706