Ajax - a quick introduction
     Netlight Tech Talk 20/1
        Stefan Pettersson (@stpe)
Demo: Ajax usage
Ajax

Asynchronous JavaScript and XML
Not just about XML
XMLHttpRequest
// get XHR object (older IE needs workaround)
var xhr = new XMLHttpRequest();

xhr.open('GET', '/my/path/',...
JSON
JavaScript Object Notation
{
    “company”: “Netlight”,
    “offices”: [
       { “location”: “Stockholm”, “count”: 17 },
       { “location”: “Oslo”,...
Same origin policy
      http://www.netlight.se/dir/page.html

http://www.netlight.se/dir/page2.html        OK
http://www....
JSONP
JSON with Padding
{ “data”: [1, 2, 3] }
{ “data”: [1, 2, 3] }


<script
  type=”text/javascript”
  src=”http://domain.com/service?callback=method”>
</script>
{ “data”: [1, 2, 3] }


  <script
    type=”text/javascript”
    src=”http://domain.com/service?callback=method”>
  </scri...
JSONP Call
// simplified implementation
function getJSONP = function(url) {
    // create script element
    var script = ...
JSONP with
       Object References
var refStore = {};
var refCounter = new Date().getTime();

function getJSONP2 = functi...
Demo: JSONP/jQuery
Architecture
Client                  Server


                             Web server


                JavaScript
HTML

        CSS


...
Demo: Layer
Architecture
Ajax - a quick introduction
Upcoming SlideShare
Loading in …5
×

Ajax - a quick introduction

1,785 views

Published on

A quick 20 min tech talk I did at Netlight (www.netlight.se) about Ajax and modern web-architecture.

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
1,785
On SlideShare
0
From Embeds
0
Number of Embeds
115
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Ajax - a quick introduction

    1. 1. Ajax - a quick introduction Netlight Tech Talk 20/1 Stefan Pettersson (@stpe)
    2. 2. Demo: Ajax usage
    3. 3. Ajax Asynchronous JavaScript and XML
    4. 4. Not just about XML
    5. 5. XMLHttpRequest // get XHR object (older IE needs workaround) var xhr = new XMLHttpRequest(); xhr.open('GET', '/my/path/', true); xhr.onreadystatechange = function(event) { if (xhr.readyState == 4) { if (xhr.status == 200) { console.log(xhr.responseText); } else { console.log("Fail"); } } }; // initiate request xhr.send(null);
    6. 6. JSON JavaScript Object Notation
    7. 7. { “company”: “Netlight”, “offices”: [ { “location”: “Stockholm”, “count”: 17 }, { “location”: “Oslo”, “count”: 42 } ], “salt”: true }
    8. 8. Same origin policy http://www.netlight.se/dir/page.html http://www.netlight.se/dir/page2.html OK http://www.netlight.se/dir2/sub/other.html OK https://www.netlight.se/secure.html Fail http://www.netlight.se:81/dir/page.html Fail http://service.netlight.se/dir/page.html Fail
    9. 9. JSONP JSON with Padding
    10. 10. { “data”: [1, 2, 3] }
    11. 11. { “data”: [1, 2, 3] } <script type=”text/javascript” src=”http://domain.com/service?callback=method”> </script>
    12. 12. { “data”: [1, 2, 3] } <script type=”text/javascript” src=”http://domain.com/service?callback=method”> </script> method({ “data”: [1, 2, 3] });
    13. 13. JSONP Call // simplified implementation function getJSONP = function(url) { // create script element var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); // append to <head> var head = document.getElementsByTagName('head')[0]; head.appendChild(script); };
    14. 14. JSONP with Object References var refStore = {}; var refCounter = new Date().getTime(); function getJSONP2 = function(url, callback, that) { // get unique callback name var callbackName = "JSONPCallback" + (refCounter++); // closure invokes original callback refStore[callbackName] = function(data) { callback.call(that, data); // set context refStore[callbackName] = null; // cleanup } getJSONP(url + "callback=refStore." + callbackName); };
    15. 15. Demo: JSONP/jQuery
    16. 16. Architecture
    17. 17. Client Server Web server JavaScript HTML CSS REST Web service
    18. 18. Demo: Layer Architecture

    ×