• Like
  • Save
Ajax With Yui
Upcoming SlideShare
Loading in...5
×
 

Ajax With Yui

on

  • 6,059 views

Sample Ajax RSS application using Yahoo! YUI

Sample Ajax RSS application using Yahoo! YUI

Statistics

Views

Total Views
6,059
Views on SlideShare
6,036
Embed Views
23

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 23

http://www.slideshare.net 22
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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 With Yui Ajax With Yui Presentation Transcript

    • AJAX with YUI
    • 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
    • What files to Include?
      • <script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js&quot;></script>
      • <script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js&quot;></script>
    • HTML Shell
      • <body>
      • <form id=&quot;wForm&quot;>
      • <select name=&quot;feedName&quot; id=&quot;feedName” onChange=&quot;YAHOO.elroy.getFeed()&quot;>
      • <option>- Select a feed</option>
      • <option value=&quot;http://www.elroyjetson.org/feed/&quot;>ElroyJetson.org RSS</option>
      • <option value=&quot;http://feeds.yuiblog.com/YahooUserInterfaceBlog&quot;>YUI Blog RSS</option>
      • </select>
      • </form>
      • <div id=&quot;showFeed&quot;></div>
      • <script type=&quot;text/javascript&quot; src=&quot;includes/yuiAjaxRSS.js&quot;></script>
      • </body>
    • Basic Shell
      • YAHOO.namespace('elroy');
      • YAHOO.elroy = function() {
      • }();
    • 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=&quot;/samples/yuiAjaxRSS/images/spinner.gif&quot; width=&quot;36&quot; height=&quot;36&quot; alt=&quot;Spinner&quot; />';
      • 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 });
      • }
      • }
      • }();
    • 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=&quot;post&quot;><li class=&quot;postTitle&quot;><span class=&quot;date&quot;>' + itemDate + '</span> <a href=&quot;' + itemLink + '&quot;>' + itemTitle + '</a></li><li class=&quot;postDesc&quot;>' + itemDesc + '</li></ul>';
      • }
      • div.innerHTML = '<p class=&quot;feedtitle&quot;>Feed: ' + oTitle + '</p>' + '<p>' + descriptionNode + '</p>' + posts;
      • }
    • Add Private Method: FailureHandler
      • function failureHandler(o){
      • div.innerHTML = o.status + &quot; &quot; + o.statusText;
      • }
    • 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;
      • }
    • Add Private Properties
      • var div = document.getElementById('showFeed');
      • var oForm = document.getElementById('wForm');
    • Check Final Application
      • http:// www.elroyjetson.org/samples/yuiAjaxRSS /