AJAX with YUI
Why YUI? <ul><li>Name spacing </li></ul><ul><li>Top tier browser support </li></ul><ul><li>Quick and consistent way to pro...
What files to Include? <ul><li><script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.5.0/build/yah...
HTML Shell <ul><li><body> </li></ul><ul><li><form id=&quot;wForm&quot;> </li></ul><ul><li><select name=&quot;feedName&quot...
Basic Shell <ul><li>YAHOO.namespace('elroy'); </li></ul><ul><li>YAHOO.elroy = function() { </li></ul><ul><li>}(); </li></ul>
Add Public Method <ul><li>YAHOO.namespace('elroy'); </li></ul><ul><li>YAHOO.elroy = function() { </li></ul><ul><li>return ...
Add Private Method: SuccessHandler <ul><li>function successHandler(o){ </li></ul><ul><li>var posts = ''; </li></ul><ul><li...
Add Private Method: FailureHandler <ul><li>function failureHandler(o){ </li></ul><ul><li>div.innerHTML = o.status + &quot;...
Add Private Helper Method <ul><li>function formatDate(v){ </li></ul><ul><li>v = new Date(Date.parse(v)); </li></ul><ul><li...
Add Private Properties <ul><li>var div = document.getElementById('showFeed'); </li></ul><ul><li>var oForm = document.getEl...
Check Final Application <ul><li>http:// www.elroyjetson.org/samples/yuiAjaxRSS / </li></ul>
Upcoming SlideShare
Loading in...5
×

Ajax With Yui

3,751

Published on

Sample Ajax RSS application using Yahoo! YUI

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,751
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ajax With Yui

  1. 1. AJAX with YUI
  2. 2. Why YUI? <ul><li>Name spacing </li></ul><ul><li>Top tier browser support </li></ul><ul><li>Quick and consistent way to program </li></ul><ul><li>YUI can be served from Yahoo! Servers </li></ul><ul><ul><li>This means it’s likely already in cache </li></ul></ul>
  3. 3. What files to Include? <ul><li><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> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js&quot;></script> </li></ul>
  4. 4. HTML Shell <ul><li><body> </li></ul><ul><li><form id=&quot;wForm&quot;> </li></ul><ul><li><select name=&quot;feedName&quot; id=&quot;feedName” onChange=&quot;YAHOO.elroy.getFeed()&quot;> </li></ul><ul><li><option>- Select a feed</option> </li></ul><ul><li><option value=&quot;http://www.elroyjetson.org/feed/&quot;>ElroyJetson.org RSS</option> </li></ul><ul><li><option value=&quot;http://feeds.yuiblog.com/YahooUserInterfaceBlog&quot;>YUI Blog RSS</option> </li></ul><ul><li></select> </li></ul><ul><li></form> </li></ul><ul><li><div id=&quot;showFeed&quot;></div> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;includes/yuiAjaxRSS.js&quot;></script> </li></ul><ul><li></body> </li></ul>
  5. 5. Basic Shell <ul><li>YAHOO.namespace('elroy'); </li></ul><ul><li>YAHOO.elroy = function() { </li></ul><ul><li>}(); </li></ul>
  6. 6. Add Public Method <ul><li>YAHOO.namespace('elroy'); </li></ul><ul><li>YAHOO.elroy = function() { </li></ul><ul><li>return { </li></ul><ul><li>getFeed : function(){ </li></ul><ul><li>if(oForm.elements['feedName'].selectedIndex == 0){ </li></ul><ul><li>div.innerHTML = ''; </li></ul><ul><li>return false; </li></ul><ul><li>} </li></ul><ul><li>div.innerHTML = '<img src=&quot;/samples/yuiAjaxRSS/images/spinner.gif&quot; width=&quot;36&quot; height=&quot;36&quot; alt=&quot;Spinner&quot; />'; </li></ul><ul><li>var entryPoint = '/samples/yuiAjaxRSS/phpRSSProxy.php'; </li></ul><ul><li>var rssFeed = oForm.elements['feedName'].value; </li></ul><ul><li>var queryString = encodeURI('?url=' + rssFeed); </li></ul><ul><li>var sUrl = entryPoint + queryString; </li></ul><ul><li>var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, { success:successHandler, failure:failureHandler }); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>}(); </li></ul>
  7. 7. Add Private Method: SuccessHandler <ul><li>function successHandler(o){ </li></ul><ul><li>var posts = ''; </li></ul><ul><li>var root = o.responseXML.documentElement; </li></ul><ul><li>var oTitle = root.getElementsByTagName('title')[0].firstChild.nodeValue; </li></ul><ul><li>var descriptionNode = root.getElementsByTagName('description')[0].firstChild.nodeValue; </li></ul><ul><li>var items = root.getElementsByTagName('item'); </li></ul><ul><li>// reset posts </li></ul><ul><li>posts = ''; </li></ul><ul><li>for(i=0;i<items.length;i++){ </li></ul><ul><li>itemTitle = items[i].getElementsByTagName('title')[0].firstChild.nodeValue; </li></ul><ul><li>itemDate = formatDate(items[i].getElementsByTagName('pubDate')[0].firstChild.nodeValue); </li></ul><ul><li>itemLink = items[i].getElementsByTagName('link')[0].firstChild.nodeValue; </li></ul><ul><li>itemDesc = items[i].getElementsByTagName('description')[0].firstChild.nodeValue; </li></ul><ul><li>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>'; </li></ul><ul><li>} </li></ul><ul><li>div.innerHTML = '<p class=&quot;feedtitle&quot;>Feed: ' + oTitle + '</p>' + '<p>' + descriptionNode + '</p>' + posts; </li></ul><ul><li>} </li></ul>
  8. 8. Add Private Method: FailureHandler <ul><li>function failureHandler(o){ </li></ul><ul><li>div.innerHTML = o.status + &quot; &quot; + o.statusText; </li></ul><ul><li>} </li></ul>
  9. 9. Add Private Helper Method <ul><li>function formatDate(v){ </li></ul><ul><li>v = new Date(Date.parse(v)); </li></ul><ul><li>var y = v.getFullYear(); </li></ul><ul><li>var M = v.getMonth()+1; </li></ul><ul><li>var d = v.getDate(); </li></ul><ul><li>return M + '/' + d + '/' + y; </li></ul><ul><li>} </li></ul>
  10. 10. Add Private Properties <ul><li>var div = document.getElementById('showFeed'); </li></ul><ul><li>var oForm = document.getElementById('wForm'); </li></ul>
  11. 11. Check Final Application <ul><li>http:// www.elroyjetson.org/samples/yuiAjaxRSS / </li></ul>

×