15-437 The HTTP protocol, Ajax and JSON

Transcript

1. The HTTP protocol,
 
 Ajax and JSON Thierry Sans
2. Anatomy of a Web Application Server Side Client Side Web Server Database Web Browser
3. The HTTP protocol
4. The HTTP protocol Network protocol for requesting/receiving data on the Web • Standard TCP protocol on port 80 (by default) • URI/URL specifies what resource is being accessed • The request method specified with a command
5. Let’s look at what a web server does > telnet www.qatar.cmu.edu 80 GET / telnet to a web server enter HTTP requests
6. Anatomy of a URL http://www.qatar.cmu.edu/~tsans/index.php?page=home protocol server query string path resource get parameters
7. HTTP Request Methods • Safe Methods have no side-effects • GET, HEAD, TRACE, and OPTIONS • Idempotent Methods have side-effects: • PUT and DELETE (and aren’t exactly idempotent) • Update Method • POST ➡ Parameters can be passed in GET and POST
8. Ajax
9. Ajax - fetching data without refreshing the page Ajax Javascript id=scACRSm... anything
10. Why do we need Ajax? So far, when we wanted to • send data to the server • or retrieve data from the server ๏ we had to refresh the entire page 
 (i.e reloading HTML, CSS, JS and all media files) ✓ But, why not using Javascript to process the data 
 and perform the necessary page changes?
11. Ajax - Asynchronous Javascript And XML Fetch/push content from/to the server asynchronously 
 i.e without having to refresh the page ๏ Ajax is not a language ✓ It is a simple Javascript command

12. History of Ajax • Patent from Microsoft (filled in 2000, granted in 2006) • XMLHTTP ActiveX control (Internet Explorer 5) • Adopted and adapted by Opera, Mozilla and Apple • XMLHttpRequest Javascript object (standard) • Before / After IE7 ๏ Different code for different browser (emergence of the javascript framework Prototype) ✓ Javascript Object was adopted by IE7
13. Ajax revolutionized the Web ✓ Started with Gmail and Google Maps • Advantages • Low latency • Rich interactions • Consequences • Webapp center of gravity moved to the client side • Javascript engine performance race
14. Ajax made simple using jQuery for reference see http://api.jquery.com/category/ajax/ $.ajax({ type: "POST", url: "www.example.com/resource/", data: "first=John&last=Doe", success: function(data){ $("#results").append(data); } }); $.get and $.post are shortcut methods defined on $.ajax HTTP method URL requested Arguments Callback method to process the result
15. “Hello You !” /?name=CMU “Hello CMU!” Controller def sayHelloGet(request): name = request.GET['name'] return HttpResponse("Hello %s!" % name) function doAjax(){ var name = $("#name").val(); $.get('sayhelloget/', {name: name} , function(data) { $('#result').html(data); }); } Callback method onsuccess
16. Callback methods beforeSend before sending the request error when the request fails success when the request succeed dataFilter when data are received (before success) complete when the request finishes whether in failure or success Warning: Callback methods are executed in a child thread
17. main thread child thread Concurrency issue in Ajax - a typical example function doAjax(){ var name = $("#name").val() var result = “” $.get('sayhelloget/', {name: name} , function(data) { result = data }); $('#result').html(result); } initialization assignment access result will either be “” or “Hello CMU” depending on the execution (non determinism) ➡ Race Condition!
18. JSON
19. Sending structured data How to send a structured data (arrays or dictionaries) through an HTTP request or response? ➡ Only strings are send back and forth ✓ Have a string representation of a complex data structure function sendArray(){ var arr = [“1”,”2”,”3”] $.get('/savearray/', {arg: arr}, ... function saveArray(){ arr = request.GET[‘arg’] GET /arg=??? Javascript object array Python object array must be a string!
20. Why do we need JSON? Original idea: using XML ✓ In practice: JSON is used for its simplicity
21. The JSON standard (RFC 4627) • Lightweight open format to interchange data • Human readable • Used for serializing and transmitting structured data over a network connection (HTTP mostly) • Since 2009 browsers support JSON natively source http://en.wikipedia.org/wiki/JSON
22. Anatomy of JSON • A JSON data structure is either array (indexed array) object (associative array)
 • JSON values are
 string - number - object - array - true - false - null
23. JSON Array image from http://www.json.org/ [ {"name": "Thierry"}, {"name": "Jeff"}, {"name": "Bill"}, {"name": "Mark"}, ] [1, 2, 3, 4, 5] or
24. JSON Object image from http://www.json.org/ { "firstName": "John", "lastName": "Smith", "age": 25, "male": true "address": { "streetAddress": "21 2nd Street", "additionalAddress": null "city": "New York", "state": "NY", "postalCode": "10021" } }
25. Serialization - Deserialization Javascript array GET /arg=”[... JSON array response JSON array Javascript array Python array JSON array Python array JSON array ... Serialization Deserialization
26. JSON in Javascript (natively supported) Serialization Javascript JSON Deserialization Javascript JSON var myObject = JSON.parse(myJSONtext) var myJSONText = JSON.stringify(myObject);
27. Coming soon Passing parameters with HTTP requests Backend development (Web API)