Ajax Design Patterns

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites & 1 Group

    Ajax Design Patterns - Presentation 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

    + ehsaneehsane, 2 years ago

    custom

    1057 views, 3 favs, 1 embeds more stats

    quick ajax presentation

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1057
      • 982 on SlideShare
      • 75 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 0
    Most viewed embeds
    • 75 views on http://notvoid.persianblog.ir

    more

    All embeds
    • 75 views on http://notvoid.persianblog.ir

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events