Ajax Fundamentals Web Applications

2,532 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,532
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
78
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax Fundamentals Web Applications

  1. 1. AJAX Fundamentals for Web Applications Scott Good, President Teamwork Solutions
  2. 2. Scott Good <ul><li>President, Teamwork Solutions </li></ul><ul><ul><li>Cincinnati, Columbus </li></ul></ul><ul><ul><li>2-time Beacon Award Finalists </li></ul></ul><ul><li>Notes Developer/Designer, 13 years </li></ul><ul><li>Extensive workflow experience </li></ul><ul><ul><li>ProcessIt! </li></ul></ul><ul><ul><ul><li>2006 Advisor Editor’s Choice Gold Award </li></ul></ul></ul><ul><ul><li>ApproveIt! </li></ul></ul><ul><li>Have written more than 40 Lotus Advisor articles </li></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>LotusScript </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>AJAX (starting May ’06 issue) </li></ul></ul><ul><ul><li>Web development </li></ul></ul>
  3. 3. Teamwork Solutions… <ul><li>Custom application development </li></ul><ul><li>Offers a range of Notes- and web-based application development tools </li></ul><ul><ul><li>ProcessIt! Workflow </li></ul></ul><ul><ul><li>ProcessIt! Document Library </li></ul></ul><ul><ul><li>Etc. </li></ul></ul><ul><li>Consulting </li></ul><ul><ul><li>Notes, Domino and related technologies </li></ul></ul><ul><ul><li>Helping set application development standards </li></ul></ul><ul><ul><li>Conversions from Notes to web </li></ul></ul><ul><ul><li>Etc. </li></ul></ul>
  4. 4. Agenda <ul><li>What is AJAX (and why should you care)? </li></ul><ul><li>How can it be used in Domino apps? </li></ul><ul><li>How to make an AJAX request </li></ul><ul><li>Dealing with the XML you get back </li></ul><ul><li>Putting it into an application </li></ul><ul><li>Questions & answers </li></ul>
  5. 5. What is AJAX? <ul><li>A synchronous J avaScript A nd X ML </li></ul><ul><li>VERY hot right now but not new </li></ul><ul><li>A combination of technologies </li></ul><ul><li>Able to work independently of the UI </li></ul><ul><ul><li>(Asynchronous) </li></ul></ul><ul><li>Uses XML as a data format </li></ul>
  6. 6. Why should you care? <ul><li>Can make web applications much… </li></ul><ul><ul><li>Faster </li></ul></ul><ul><ul><li>More intuitive </li></ul></ul><ul><ul><li>Easier to use </li></ul></ul><ul><li>Breaks through a lot of traditional limitations of web applications </li></ul><ul><ul><li>Creates a sometimes-link with the server without requiring the UI to refresh </li></ul></ul><ul><li>Demo Google Maps </li></ul>
  7. 7. How can it be used in Domino apps? <ul><li>Lets you dynamically retrieve data from the server while the user does something else </li></ul><ul><li>Possible uses: </li></ul><ul><ul><li>Check budget availability </li></ul></ul><ul><ul><li>Validate part numbers </li></ul></ul><ul><ul><li>Get sub-category lists from top-category choice </li></ul></ul><ul><ul><li>Look up names from NAB as characters are typed </li></ul></ul><ul><li>The list is limited mostly by your imagination </li></ul><ul><li>NOTE: Older browsers cannot do this (IE prior to 5.5 or so, etc) </li></ul>
  8. 8. How to make an AJAX request <ul><li>The basic object, which makes the request, varies depending on browser </li></ul><ul><li>MS Internet Explorer </li></ul><ul><ul><li>Uses XMLHTTP ActiveX object </li></ul></ul><ul><ul><li>ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”); </li></ul></ul><ul><li>Firefox, etc. </li></ul><ul><ul><li>Use an internal XMLHttpRequest object </li></ul></ul><ul><ul><li>ajaxReq = new XMLHttpRequest(); </li></ul></ul><ul><li>Unless you can be absolutely sure of the browser, you must build for both </li></ul><ul><li>Determine which by checking for window.ActiveXObject </li></ul>
  9. 9. Building an AJAX request <ul><li>var ajaxReq; </li></ul><ul><li>function createAJAXRequest() { </li></ul><ul><li>if (window.ActiveXObject) { </li></ul><ul><li>// Internet Explorer </li></ul><ul><li>ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”); </li></ul><ul><li>} else if (window.XMLHttpRequest) { </li></ul><ul><li>// Firefox, Mozilla, etc. </li></ul><ul><li>ajaxReq = new XMLHttpRequest(); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  10. 10. Building an AJAX request <ul><li>All that does is create a handle to “ajaxReq” </li></ul><ul><ul><li>Can make requests </li></ul></ul><ul><ul><li>Can receive back XML </li></ul></ul><ul><li>No request has been made yet </li></ul><ul><li>Still need to tell it where to make the request and how </li></ul>
  11. 11. Building an AJAX request <ul><li>var ajaxReq; </li></ul><ul><li>function createAJAXRequest( fromURL , respFunction) { </li></ul><ul><li>if (window.ActiveXObject) { </li></ul><ul><li>// Internet Explorer </li></ul><ul><li>ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”); </li></ul><ul><li>} else if (window.XMLHttpRequest) { </li></ul><ul><li>// Firefox, Mozilla, etc. </li></ul><ul><li>ajaxReq = new XMLHttpRequest(); </li></ul><ul><li>} </li></ul><ul><li>ajaxReq.open(“GET”, fromURL); </li></ul><ul><li>ajaxReq.onreadystatechange = eval(respFunction); </li></ul><ul><li>ajaxReq.send(null); </li></ul><ul><li>} </li></ul>
  12. 12. ajaxReq.open <ul><li>Two required parameters: </li></ul><ul><ul><li>The method (GET, POST or PUT) </li></ul></ul><ul><ul><li>The URL you’re retrieving from </li></ul></ul><ul><li>Has additional optional parameters </li></ul><ul><ul><li>e.g., you can disable asynchronous response </li></ul></ul><ul><ul><li>You don’t need these for now </li></ul></ul><ul><li>For now, you’ll always be doing GETs </li></ul><ul><li>ajaxReq.open(“GET”, fromURL) </li></ul>
  13. 13. Building an AJAX request <ul><li>var ajaxReq; </li></ul><ul><li>function createAJAXRequest(fromURL, respFunction ) { </li></ul><ul><li>if (window.ActiveXObject) { </li></ul><ul><li>// Internet Explorer </li></ul><ul><li>ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”); </li></ul><ul><li>} else if (window.XMLHttpRequest) { </li></ul><ul><li>// Firefox, Mozilla, etc. </li></ul><ul><li>ajaxReq = new XMLHttpRequest(); </li></ul><ul><li>} </li></ul><ul><li>ajaxReq.open(“GET”, fromURL); </li></ul><ul><li>ajaxReq.onreadystatechange = eval(respFunction); </li></ul><ul><li>ajaxReq.send(null); </li></ul><ul><li>} </li></ul>
  14. 14. ajaxReq.onreadystatechange <ul><li>XMLHttp object, whichever kind, works on its own in the background </li></ul><ul><ul><li>Makes a request for something </li></ul></ul><ul><ul><li>Waits for a response </li></ul></ul><ul><ul><li>Gets a response, does something with it </li></ul></ul><ul><li>The time spent waiting is “ready state” </li></ul><ul><li>onreadystatechange property is how you tell it what to do when it gets a response </li></ul><ul><li>ajaxReq.onreadystatechange = eval(respFunction); </li></ul>
  15. 15. Building an AJAX request <ul><li>var ajaxReq; </li></ul><ul><li>function createAJAXRequest(fromURL, respFunction) { </li></ul><ul><li>if (window.ActiveXObject) { </li></ul><ul><li>// Internet Explorer </li></ul><ul><li>ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”); </li></ul><ul><li>} else if (window.XMLHttpRequest) { </li></ul><ul><li>// Firefox, Mozilla, etc. </li></ul><ul><li>ajaxReq = new XMLHttpRequest(); </li></ul><ul><li>} </li></ul><ul><li>ajaxReq.open(“GET”, fromURL); </li></ul><ul><li>ajaxReq.onreadystatechange = eval(respFunction); </li></ul><ul><li>ajaxReq.send(null); </li></ul><ul><li>} </li></ul>
  16. 16. ajaxReq.send <ul><li>Actually makes the request </li></ul><ul><li>Has an optional parameter which can be used to send information or an object to the target of the request </li></ul><ul><li>ajaxReq.send(null); </li></ul>
  17. 17. Demo <ul><li>Make a simple AJAX request from the NAB </li></ul><ul><li>Need a simple function to run: </li></ul><ul><li>function processReturnValue(){ </li></ul><ul><li>alert(ajaxReq.responseText); </li></ul><ul><li>} </li></ul>
  18. 18. Ready state values <ul><li>0 = uninitialized </li></ul><ul><li>1 = loading </li></ul><ul><li>2 = loaded </li></ul><ul><li>3 = interactive </li></ul><ul><li>4 = complete </li></ul><ul><li>All you really care about is ready state 4 </li></ul><ul><li>function processReturnValue(){ </li></ul><ul><li>if (ajaxReq.readyState == 4) { </li></ul><ul><li>alert(ajaxReq.responseText); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  19. 19. Also care about HTTP status <ul><li>HTTP status values: </li></ul><ul><ul><li>404 = Not found </li></ul></ul><ul><ul><li>500 = Internal error </li></ul></ul><ul><ul><li>100 = Continue </li></ul></ul><ul><ul><li>200 = Complete (what you want) </li></ul></ul><ul><li>function processReturnValue(){ </li></ul><ul><li>if (ajaxReq.readyState == 4) { </li></ul><ul><li>if (ajaxReq.status == 200) { </li></ul><ul><li>alert(ajaxReq.responseText); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  20. 20. Demo2 <ul><li>1. Corrected code, put result into the form using innerHTML </li></ul><ul><li>2. Do it from a field </li></ul><ul><li>3. Add &startkey= parameter to get names based on characters entered </li></ul>
  21. 21. Dealing with the XML you get back <ul><li>The bad news: You need to learn XML </li></ul><ul><li>The good news: It isn’t rocket science (probably) </li></ul>
  22. 22. ?readviewentries <ul><li>Look at ($VIMPeopleAndGroups) XML: </li></ul><ul><li>Nodes: </li></ul><ul><ul><li><viewentries> is the view </li></ul></ul><ul><ul><li><viewentry> is a row </li></ul></ul><ul><ul><li><entrydata> is a column </li></ul></ul><ul><ul><li><text> is a value in the column </li></ul></ul><ul><li>Attributes: </li></ul><ul><ul><li>toplevelentries </li></ul></ul><ul><ul><li>position </li></ul></ul><ul><ul><li>unid </li></ul></ul><ul><ul><li>noteid </li></ul></ul><ul><ul><li>siblings </li></ul></ul><ul><ul><li>columnnumber </li></ul></ul><ul><ul><li>name </li></ul></ul>
  23. 23. Navigating this mess with JS <ul><li>ajaxReq.responseXML will return an XML object </li></ul><ul><ul><li>(ajaxReq.responseText was just text) </li></ul></ul><ul><li>Objects can be manipulated with JavaScript </li></ul><ul><li>Using code, you can climb up and down the XML DOM (Document Object Model--its hierarchy) to get what you need </li></ul>
  24. 24. XML DOM Properties <ul><li>childNodes (array) </li></ul><ul><li>firstChild </li></ul><ul><li>lastChild </li></ul><ul><li>nextSibling </li></ul><ul><li>nodeValue </li></ul><ul><li>parentNode </li></ul><ul><li>previousSibling </li></ul>
  25. 25. XML DOM Methods <ul><li>getElementById(id) </li></ul><ul><li>getElementsByTagName(name) </li></ul><ul><li>hasChildNodes() </li></ul><ul><li>getAttribute(name) </li></ul>
  26. 26. Using the DOM Properties/Methods <ul><li>You use the Properties and methods to work your way through the hierarchy of the XML to get to what you want… </li></ul><ul><li>var xmlData = ajaxReq.responseXML; </li></ul><ul><li>var vRows = xmlData.getElementsByTagName(&quot;viewentry&quot;); </li></ul><ul><li>for (var i = 0; i < vRows.length; i++){ </li></ul><ul><li>alert(vRows[i].getAttribute(“position”)); </li></ul><ul><li>} </li></ul><ul><li>Demo this </li></ul>
  27. 27. Using the DOM Properties/Methods <ul><li>To go from 1 st row to its first column: </li></ul><ul><li>var firstColumn = vRows[i].firstChild; </li></ul><ul><li>From first column to the 2 nd column: </li></ul><ul><li>var secondColumn = firstColumn.nextSibling; </li></ul><ul><li>If you know the hierarchy, you can just climb down the tree to the actual values <text>… </li></ul><ul><li>colsVals[1].firstChild.firstSibling.firstChild.nodeValue; </li></ul><ul><li>… almost </li></ul><ul><ul><li>IE and Firefox treat the XML as having different numbers of levels </li></ul></ul>
  28. 28. Solving the problem <ul><li>You must have code which can traverse however many levels there are and return the value </li></ul><ul><li>Your best bet: A recursive function </li></ul><ul><ul><li>Hint: <text> nodes are always at the bottom of the hierarchy </li></ul></ul><ul><li>Demo </li></ul>
  29. 29. What you have <ul><li>At this point, all you have are data elements you can surround with HTML </li></ul><ul><li>But, what more do you need? </li></ul><ul><li>With HTML you have… </li></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>DHTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>And so on </li></ul></ul><ul><li>You have retrieved data from another place, asynchronously, and made it available to whatever you’re doing </li></ul>
  30. 30. Carrying it a bit further <ul><li>Without a lot of additional work, this could become any number of things: </li></ul><ul><ul><li>Entry validation </li></ul></ul><ul><ul><li>NAB picker (demo) </li></ul></ul><ul><ul><li>Type-ahead (demo) </li></ul></ul><ul><ul><li>Or something else </li></ul></ul><ul><li>It’s powerful technology and not all that hard to do </li></ul>
  31. 31. Questions? <ul><li>Scott Good </li></ul><ul><li>Teamwork Solutions </li></ul><ul><li>614.457.7100 extension 200 </li></ul><ul><li>[email_address] </li></ul><ul><li>www.scottgood.com (blog) </li></ul><ul><li>www.notesworkflow.com </li></ul><ul><li>Please turn in your evaluations! </li></ul>

×