app.js
package.json
models
public/css
public/images
public/js
public/views/*.js
routes
views/*.dust
public
contains static assets downloaded and executed by the browser
Web servers should not ever run
any code sent by a Web browser
Web browsers use a sandbox (secure virtual machine) to run code downloaded from a Web server
How to connect the client with the server?
How to connect the server with the client?
history.pushState(state, "title", URI);
history.replaceState(state, "title", URI);
Write a (new) entry in the browser history
(associate URI
with UI state
)
window.onpopstate = function(event) {
//history state changed, synchronize the UI:
document.location;
document.location.hash; //#URI fragment
event.state //UI state object
};
React to navigation along the history (back/forward)
history.back();
history.forward();
Programmatically navigate along the history
AJAX combines different technologies:
The user waits for the server to process each request
The UI thread is never blocked since server interactions run in the background
function GET(url) {
var r = new XMLHttpRequest();
r.open("GET", url, false);
r.send(null);
//this will continue after the response has arrived
if (r.status == 200)
return r.responseText;
else
//handle error
}
false
= synchronous
responseText
contains the JSON string to be parsed
function GET(url, callback) {
var r = new XMLHttpRequest();
r.open("GET", url, true);
r.onreadystatechange = function() {
if (r.readyState == 4) {
if (r.status == 200)
callback(r.responseText);
else
//handle error
}
}
r.send(null);
//this will continue immediately
}
true
= asynchronous
readyState | |
0 | uninitialized |
1 | opened |
2 | sent |
3 | receiving |
4 | complete |
function POST(url, params, callback) {
var r = new XMLHttpRequest();
r.open("POST", url, true);
r.onreadystatechange = function() {
if (r.readyState == 4) {
if (r.status == 200)
callback(r.responseText);
}
}
r.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
r.send(params);
//this will continue immediately
}
Use a spacebar or arrow keys to navigate