Loading...
Flash Player 9 (or above) is needed to view slideshows. We have detected that you do not have it on your computer.To install it, go here
-
gwfong favorited this 8 months ago
Ajax With Yui
679 views | 0 comments | 1 favorites | embeds (Stats)
Desc: Sample Ajax RSS application using Yahoo! YUI
Slideshow Transcript
- Slide 1: AJAX with YUI
- Slide 2: Why YUI? • Name spacing • Top tier browser support • Quick and consistent way to program • YUI can be served from Yahoo! Servers – This means it’s likely already in cache
- Slide 3: What files to Include? <script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom- event.js\"></script> <script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js\"></script>
- Slide 4: HTML Shell <body> <form id=\"wForm\"> <select name=\"feedName\" id=\"feedName” onChange=\"YAHOO.elroy.getFeed()\"> <option>- Select a feed</option> <option value=\"http://www.elroyjetson.org/feed/\">ElroyJetson.org RSS</option> <option value=\"http://feeds.yuiblog.com/YahooUserInterfaceBlog\">YUI Blog RSS</option> </select> </form> <div id=\"showFeed\"></div> <script type=\"text/javascript\" src=\"includes/yuiAjaxRSS.js\"></script> </body>
- Slide 5: Basic Shell YAHOO.namespace('elroy'); YAHOO.elroy = function() { }();
- Slide 6: Add Public Method YAHOO.namespace('elroy'); YAHOO.elroy = function() { return { getFeed : function(){ if(oForm.elements['feedName'].selectedIndex == 0){ div.innerHTML = ''; return false; } div.innerHTML = '<img src=\"/samples/yuiAjaxRSS/images/spinner.gif\" width=\"36\" height=\"36\" alt=\"Spinner\" />'; var entryPoint = '/samples/yuiAjaxRSS/phpRSSProxy.php'; var rssFeed = oForm.elements['feedName'].value; var queryString = encodeURI('?url=' + rssFeed); var sUrl = entryPoint + queryString; var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, { success:successHandler, failure:failureHandler }); } } }();
- Slide 7: Add Private Method: SuccessHandler function successHandler(o){ var posts = ''; var root = o.responseXML.documentElement; var oTitle = root.getElementsByTagName('title')[0].firstChild.nodeValue; var descriptionNode = root.getElementsByTagName('description')[0].firstChild.nodeValue; var items = root.getElementsByTagName('item'); // reset posts posts = ''; for(i=0;i<items.length;i++){ itemTitle = items[i].getElementsByTagName('title')[0].firstChild.nodeValue; itemDate = formatDate(items[i].getElementsByTagName('pubDate')[0].firstChild.nodeValue); itemLink = items[i].getElementsByTagName('link')[0].firstChild.nodeValue; itemDesc = items[i].getElementsByTagName('description')[0].firstChild.nodeValue; posts = posts + '<ul class=\"post\"><li class=\"postTitle\"><span class=\"date\">' + itemDate + '</span> <a href=\"' + itemLink + '\">' + itemTitle + '</a></li><li class=\"postDesc\">' + itemDesc + '</li></ul>'; } div.innerHTML = '<p class=\"feedtitle\">Feed: ' + oTitle + '</p>' + '<p>' + descriptionNode + '</p>' + posts; }
- Slide 8: Add Private Method: FailureHandler function failureHandler(o){ div.innerHTML = o.status + \" \" + o.statusText; }
- Slide 9: Add Private Helper Method function formatDate(v){ v = new Date(Date.parse(v)); var y = v.getFullYear(); var M = v.getMonth()+1; var d = v.getDate(); return M + '/' + d + '/' + y; }
- Slide 10: Add Private Properties var div = document.getElementById('showFeed'); var oForm = document.getElementById('wForm');
- Slide 11: Check Final Application http://www.elroyjetson.org/samples/yuiAjaxRSS/
