Basic Ajax What is Ajax? Ajax Technology Where to use Ajax How to use Ajax Problems with Ajax
What is Ajax? Something everyone is talking about.   but doesn't understand
What is Ajax? The technological foundation of Web 2.0   ... but probably not socialism
What is Ajax? A heroically heroic hero   That has breathed life into JavaScript
What is Ajax? A synchronous   J avaScript   A nd   X ML <ul><li>Represents interrelated technologies </li></ul><ul><li>Jav...
Ajax Technology Web class 99  <ul><li>JavaScript </li></ul><ul><li>XML </li></ul><ul><li>JSON </li></ul><ul><li>CSS </li><...
Ajax Technology: XMLHttpRequest Gives JavaScript the ability to asynchronously perform  Http requests Will be called XHR f...
Ajax Technology: XMLHttpRequest
var request = new XMLHttpRequest(); request.onreadystatechange = function(){ if(request.readyState == 4) document.getEleme...
jQuery jQuery.post( url, [data], [callback], [type] )   jQuery.post( “ /recipes.xml”, { “ recipe[title]” : “Ice Water”, “ ...
Prototype new Ajax.Request(url[, options]) new Ajax.Request (“/recipes.xml”,{ parameters :{ “ recipe[title]” : “Ice Water”...
YUI YAHOO.util.Connect.asyncRequest(method, sUrl, callbacks, data); YAHOO.util.Connect.asyncRequest ( “ POST” “ /recipes.x...
Dojo dojo.io.bind([options]) dojo.io.bind({ method: “POST”, url: “/recipes.xml”, load: function(data){    dojo.byId(&quot;...
Benefits of Ajax <ul><li>Makes your web applications </li></ul><ul><li>More responsive </li></ul><ul><li>Reduce bandwidth ...
Typical Use Cases Use where traditional web applications require a page change,  but new page looks almost identical. <ul>...
How to use Ajax Ajax is typically used to get and manipulate data.  Typically the data comes back in one of two ways: Data...
Ajax Issues <ul><li>Ajax makes some things more difficult </li></ul><ul><li>Back Button / History / Bookmarking </li></ul>...
Ajax Issues Back Button / History / Bookmarking  Problem:  Browser does not capture page changes due to JavaScript. Soluti...
Ajax Issues Duplicate code on the client and server Problem:  Often similar code must be present client and server side wh...
Ajax Issues Clients without JavaScript / Search Engines Problem:  Some people turn off JavaScript.  Most search engines do...
Ajax Issues Developing unobtrusively Rules: 1.  Assume client has JavaScript turned off. 2. JavaScript prevents default be...
Ajax Issues Developing unobtrusively Example : 1.  Create a form that on submit adds an item to a shopping cart. <form id=...
Ajax Issues Testing Problem:  The lack of good automated testing support for JavaScript applications. Solution:   1) Serve...
Ajax Issues Does not support cross domain requests Problem:  The Same Origin Policy prevents XHR from making requests to o...
Upcoming SlideShare
Loading in …5
×

Ajax3

2,020 views

Published on

Ajax slides from Justin Meyers talk at JS.Chi()

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

No Downloads
Views
Total views
2,020
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
94
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Challenges * back button * more javascript (speed concerns w/ files) * SEO
  • Ajax3

    1. 1. Basic Ajax What is Ajax? Ajax Technology Where to use Ajax How to use Ajax Problems with Ajax
    2. 2. What is Ajax? Something everyone is talking about. but doesn't understand
    3. 3. What is Ajax? The technological foundation of Web 2.0 ... but probably not socialism
    4. 4. What is Ajax? A heroically heroic hero That has breathed life into JavaScript
    5. 5. What is Ajax? A synchronous J avaScript A nd X ML <ul><li>Represents interrelated technologies </li></ul><ul><li>JavaScript </li></ul><ul><li>Asynchronous HTTP requests </li></ul><ul><li>XML </li></ul><ul><li>But the term has expanded to include the technologies surrounding Rich Internet Applications in general: </li></ul><ul><li>JSON </li></ul><ul><li>CSS </li></ul><ul><li>HTML </li></ul><ul><li>DOM </li></ul>
    6. 6. Ajax Technology Web class 99 <ul><li>JavaScript </li></ul><ul><li>XML </li></ul><ul><li>JSON </li></ul><ul><li>CSS </li></ul><ul><li>HTML </li></ul><ul><li>DOM </li></ul>Web class 00 <ul><li>JavaScript </li></ul><ul><li>XML </li></ul><ul><li>JSON </li></ul><ul><li>CSS </li></ul><ul><li>HTML </li></ul><ul><li>DOM </li></ul><ul><li>Asynchronous HTTP </li></ul>
    7. 7. Ajax Technology: XMLHttpRequest Gives JavaScript the ability to asynchronously perform Http requests Will be called XHR from now on.
    8. 8. Ajax Technology: XMLHttpRequest
    9. 9. var request = new XMLHttpRequest(); request.onreadystatechange = function(){ if(request.readyState == 4) document.getElementById(“response”).innerHTML = request.responseText } request.open('POST', '/recipes.xml', true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); request.send('recipe[title]=Ice+Water&'+ 'recipe[instructions]=Pour+ice+and+water+in+glass'); Ajax Technology: XMLHttpRequest Create a new recipe and put result HTML in 'response' element.
    10. 10. jQuery jQuery.post( url, [data], [callback], [type] ) jQuery.post( “ /recipes.xml”, { “ recipe[title]” : “Ice Water”, “ recipe[instructions]” : “Pour ice and water in glass” }, function(html){ $(“#response”).text(html) }, “ html” )
    11. 11. Prototype new Ajax.Request(url[, options]) new Ajax.Request (“/recipes.xml”,{ parameters :{ “ recipe[title]” : “Ice Water”, “ recipe[instructions]” : “Pour ice and water in glass” }, onComplete: function(request){ $(“response”).update(request.innerHTML) }, method: “post” })
    12. 12. YUI YAHOO.util.Connect.asyncRequest(method, sUrl, callbacks, data); YAHOO.util.Connect.asyncRequest ( “ POST” “ /recipes.xml”, { onSuccess : function(event,args){ document.getElementById(“response”) = args[0].responseText } }, { “ recipe[title]” : “Ice Water”, “ recipe[instructions]” : “Pour ice and water in glass” } )
    13. 13. Dojo dojo.io.bind([options]) dojo.io.bind({ method: “POST”, url: “/recipes.xml”, load: function(data){ dojo.byId(&quot;title&quot;).innerHTML = data; }, content: { “ recipe[title]” : “Ice Water”, “ recipe[instructions]” : “Pour ice and water in glass” } )
    14. 14. Benefits of Ajax <ul><li>Makes your web applications </li></ul><ul><li>More responsive </li></ul><ul><li>Reduce bandwidth </li></ul><ul><li>More interactive </li></ul><ul><li>Make use of more complex UI state. </li></ul>
    15. 15. Typical Use Cases Use where traditional web applications require a page change, but new page looks almost identical. <ul><li>Adding or removing items from a list. </li></ul><ul><li>Showing more details. </li></ul>Examples:
    16. 16. How to use Ajax Ajax is typically used to get and manipulate data. Typically the data comes back in one of two ways: Data Text XML JSON Markup HTML HTML+JS Yeah well that's just, like, your opinion, man. <ul><li>Enables services </li></ul><ul><li>JSON on both sides </li></ul><ul><li>Faster </li></ul>Send Data and use JSON
    17. 17. Ajax Issues <ul><li>Ajax makes some things more difficult </li></ul><ul><li>Back Button / History / Bookmarking </li></ul><ul><li>Duplicate code on the client and server </li></ul><ul><li>Clients without JavaScript / Web Search Engines </li></ul><ul><li>Testing </li></ul><ul><li>Does not support cross domain requests </li></ul>Ajax and JavaScript share many of the same problems.
    18. 18. Ajax Issues Back Button / History / Bookmarking Problem: Browser does not capture page changes due to JavaScript. Solution: Use a library like Really Simple History (RSH). RSH uses a hidden iframe and changes of the url hash to let JS provide its own history. http://code.google.com/p/reallysimplehistory/
    19. 19. Ajax Issues Duplicate code on the client and server Problem: Often similar code must be present client and server side which adds to the complexity of the application. Typically this is markup generation. Solution: 1) Send back markup generated by the Server. 2) Server never creates markup. Use client side templates to generate markup. Dojo Django templates JavaScriptMVC EJS templates jQuery templates
    20. 20. Ajax Issues Clients without JavaScript / Search Engines Problem: Some people turn off JavaScript. Most search engines don't understand JavaScript. Solution: 1) Ignore. 95% have JavaScript. Many popular websites require it. 2) Develop unobtrusively. 3) Use Rhino server side to generate the pages.
    21. 21. Ajax Issues Developing unobtrusively Rules: 1. Assume client has JavaScript turned off. 2. JavaScript prevents default behavior from happening 3. JavaScript substitutes its own Ajax behavior
    22. 22. Ajax Issues Developing unobtrusively Example : 1. Create a form that on submit adds an item to a shopping cart. <form id='add' action=”add_to_cart”> <input type='hidden' name=”item” value=”2”> <input type=”submit” value=”add to cart”> </form> 2. Use JS to cancel the submit event. $(“#add”).submit(function(){ return false; }) 3. Perform the request, and update the shopping cart total. $(“#add”).submit(function(){ jQuery.post(“ajax_add_to_cart”, {name: this.item.value }, function(html){ $(“#total”).text(html)}, “ html” ) return false; })
    23. 23. Ajax Issues Testing Problem: The lack of good automated testing support for JavaScript applications. Solution: 1) Server side frameworks. 2) Client side testing 3) Rhino based client testing 4) Selenium
    24. 24. Ajax Issues Does not support cross domain requests Problem: The Same Origin Policy prevents XHR from making requests to other domains. This prevents it from being used in mashups. Solution: 1) Wait 2) JSONP 3) window.name 4) Proxy

    ×