Ajax - a quick introduction
•Télécharger en tant que KEY, PDF•
0 j'aime•563 vues
A quick 20 min tech talk I did at Netlight (www.netlight.se) about Ajax and modern web-architecture.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Ajax - a quick introduction
Similaire à Ajax - a quick introduction (20)
Dernier
Dernier (20)
Ajax - a quick introduction
- 1. Ajax - a quick introduction Netlight Tech Talk 20/1 Stefan Pettersson (@stpe)
- 4. Not just about XML
- 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);
- 7. { “company”: “Netlight”, “offices”: [ { “location”: “Stockholm”, “count”: 17 }, { “location”: “Oslo”, “count”: 42 } ], “salt”: true }
- 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
- 11. { “data”: [1, 2, 3] }
- 12. { “data”: [1, 2, 3] } <script type=”text/javascript” src=”http://domain.com/service?callback=method”> </script>
- 13. { “data”: [1, 2, 3] } <script type=”text/javascript” src=”http://domain.com/service?callback=method”> </script> method({ “data”: [1, 2, 3] });
- 14. 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); };
- 15. 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); };
- 17. Architecture
- 18. Client Server Web server JavaScript HTML CSS REST Web service