Anatomy of a Web Application
Server Side
Client Side
Web Server Database
Web Browser
Slide 3
Slide 3 text
The HTTP protocol
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Let’s look at what a web server does
> telnet www.qatar.cmu.edu 80
GET /
telnet to a web server
enter HTTP requests
Slide 6
Slide 6 text
Anatomy of a URL
http://www.qatar.cmu.edu/~tsans/index.php?page=home
protocol server query string
path
resource
get parameters
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
Ajax
Slide 9
Slide 9 text
Ajax - fetching data without refreshing the page
Ajax
Javascript
id=scACRSm...
anything
Slide 10
Slide 10 text
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?
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
“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
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
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!
Slide 18
Slide 18 text
JSON
Slide 19
Slide 19 text
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!
Slide 20
Slide 20 text
Why do we need JSON?
Original idea: using XML
✓ In practice: JSON is used for its simplicity
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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