Ajax - a quick introduction
Upcoming SlideShare
Loading in...5
×
 

Ajax - a quick introduction

on

  • 2,203 views

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

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

Statistics

Views

Total Views
2,203
Views on SlideShare
2,091
Embed Views
112

Actions

Likes
0
Downloads
32
Comments
0

10 Embeds 112

http://www.casinopeccio.com 33
https://www.netlight.se 21
http://www.casinopecci.com 21
http://pecciola.com 17
http://www.casinopecciola.com 7
https://rebel.netlight.se 5
http://www.linkedin.com 4
http://www.slideshare.net 2
https://hoot.weisuite.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

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 - a quick introduction Ajax - a quick introduction Presentation Transcript

  • 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/', 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);
  • JSON JavaScript Object Notation
  • { “company”: “Netlight”, “offices”: [ { “location”: “Stockholm”, “count”: 17 }, { “location”: “Oslo”, “count”: 42 } ], “salt”: true }
  • 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
  • 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”> </script> method({ “data”: [1, 2, 3] });
  • 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); };
  • 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); };
  • Demo: JSONP/jQuery
  • Architecture
  • Client Server Web server JavaScript HTML CSS REST Web service
  • Demo: Layer Architecture