1. Web-Technology
Lecture 10

2. Persistent express.JS sessions with SQLite
Installing:
Options:
table='sessions' Database table name
db='sessionsDB' Database file name
dir='.' Directory to save '.db' file
npm install connect-sqlite3
var session = require('express-session');
var SQLiteStore = require('connect-sqlite3')(session);
app.configure(function() {
// .. Other configuration
app.use(session({
store: new SQLiteStore,
secret: 'your secret',
}));
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
Lennart Herlaar - UU

3. Persistent sessions with FileStore()
npm install session-file-store
var session = require('express-session');
var FileStore = require('session-file-store')(session);
app.use(session({
store: new FileStore(),
secret: 'your secret',
}));

4. AJAX – Asynchronous JavaScript And XML

5. Page-request-based interaction

6. More interactive way

7. Stateful Web with AJAX No need to reload the entire page
Asynchronous communication between Client and Server
User’s interactions are sent, the webpage reacts based on the server responses
State can be divided between client and server
Position within the application (the flow) in the client
Temporary and dynamic session data is on the client
Persistent and stable session data is on the server
Lennart Herlaar - UU

8. Classic Web application model
Synchronous

9. AJAX Web application model

10. AJAX workflow
1. An event occurs in a web page (the page is loaded, a button is clicked)
2. An XMLHttpRequest object is created by JavaScript
3. The XMLHttpRequest object sends a request to a web server
4. The server processes the request
5. The server sends a response back to the web page
6. The response is read by JavaScript
7. Proper action (like page update) is performed by JavaScript
Not always

11. XMLHttpRequest Object
Supported by all modern browsers
Built-in object
var req = new XMLHttpRequest()
IE5 & IE6
var req = new ActiveXObject(“Microsoft.XMLHTTP”)

12. Handling all browsers var req; if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest(); }
else {// code for IE6, IE5
req = new ActiveXObject("Microsoft.XMLHTTP");
else { //everything else
alert("Your browser does not support XMLHTTP!");

13. Send a Request to a server
var req = new XMLHttpRequest()
This object is used to exchange data with a server
req.open(“GET”,”server.js”, true)
Specifies the type of request, the URL, and if the request should be handled asynchronously or not
Method: GET or POST
URL: the location of the file on the server
async: true or false
req.send(string)
Sends the request off to the server
String: only used for POST requests. Includes parameters
Why not for GET?

14. GET / POST requests GET POST
req.open("GET",“server.js?fname=Sergey&lname=Sodsnovsky",true);
req.send();
POST
req.open("POST",“server.js",true);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send("fname=Sergey&lname=Sosnovsky");

15. Server response var response = req.responseText
responseText or responseXML property of XMLHttpRequest object include the response from a server
responseText: get the response data as a string
Can be used to send JSON formatted response
responseXML: get the response data as XML data
var response = req.responseText

16. readyState property and onreadystatechange event
XMLHttpRequest.readyState property holds the state of the AJAX request on the client:
onreadystatechange event is triggered every time the readyState changes
Value
State
Description
UNSENT
request not initialized 1
OPENED
open() has been called; setRequestHeader() method and the send() method can be called 2
HEADERS_RECEIVED
send() has been called; response headers have been received 3
LOADING
processing request; responseText holds partial data 4
DONE
request finished and response is ready

17. status property
XMLHttpRequest.status will hold the HTTP code of the response (when available)
200: "OK"
404: Page not found
What is the value of XMLHttpRequest.readyState then

18. Processing the response
req.onreadystatechange=function() {   if (req.readyState==4 && req.status==200) {     var response = req.responseText;   } }

19. Interface

20. HTML (index.html)
<!DOCTYPE HTML> <html> <head></head> <body> <form id="login"> <p>First name: <input type="text" id="fname" placeholder="First_Name" /></p> <p>Last name: <input type="text" id="lname" placeholder="Last_Name"/></p> <p><input class="button" type="submit" value="Log in" onclick="mylogin();return false"/></p> </form> </body> </html>

21. Javascript – event handler
function mylogin() { var fname = document.getElementById("fname").value; var lname = document.getElementById("lname").value; var url = "getdata.js?fname="+fname+"&lname="+lname; get(url, function (req) { alert("Welcome to the site, "+ req.responseText); }); return false; }

22. Javascript - AJAX
function get(url,fn) { var req; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTPP"); else { alert("your browser doe not support XMLHTTP!"); req.open("GET", url, true); req.onreadystatechange = function () { if (req.readyState === 4 && req.status === 200) { fn(req); req.send(null);
req.addEventListener("event", fn); /*
Events:
- “load” – once response loads
- “error” – an error thrown
- “abort” – loading aborted
- “loadend”: either of the above
... */
What is another way to process XMLHttpRequest events?

23. Node.js (getData()) var app = require("express")();
var join = require('path').join;
var staticPath = join(__dirname, "public/html");
app.use(express.static(staticPath));
app.get('getdata.js', function (req, res) {
res.send(req.query.fname + " " + req.query.lname); })
app.listen(8081);

24. jQuery + AJAX jQuery supports AJAX Variants of one basic method
In at least 6 different ways ...
Variants of one basic method
load() – Loads a piece of HTML into an element
$.getJSON() – Loads JSON via GET
$.getScript() – Loads JavaScript and runs it
$.get() – Performs a generic GET AJAX call
$.post() – Performs a generic POST AJAX call
$.ajax() – Performs a generic AJAX call
Lennart Herlaar - UU

25. jQuery revisited <script type="text/javascript"> $(function(){
$("button").click(function(){
$("div").load('test.js');
});
</script>
...
<body>
<div>
<h2>Let AJAX change this text</h2>
</div>
<button>Change Content</button>
</body>
var ajaxload = "<img src='load.gif' alt='loading...'/>";
$(function(){
$("button").click(function(){
$("div").html(ajaxload).load('test.js');
});
Lennart Herlaar - UU

26. Midterm preparation

27. Midterm The exam is digital Where: EDUC-GAMMA
When: from to 15.00
Until 15:30 for students with learning-related disabilities
Clock starts ticking at 13:30 - be there in advance
Do visit facilities in advance
Bring your student IDs (physical) + photo IDs (if your student ID has no photo)

28. Midterm The exam is closed-book You can use scratch paper
Closed-slides
Closed-notes
Closed-laptop
Closed-phone
Closed-neighbour
Open Chromebook provided for you in the exam room
You can use scratch paper
Neither paper nor pens/pencils will be provided

29. Scope: 6 first lectures of the course
History of Internet
Internet architecture
Internet and Web protocols
Brief intro into HTML
HTML(5)
CSS(3)
JavaScript
DOM
Event Loop
jQuery
JSON

30. Types of question: Conceptual understanding
Which of the following statements are not true?
a. You can have only one event handler per DOM element
b. You can have only one event handler per DOM element per event
c. You can have only one event listener per DOM element per event

31. Types of questions: Code analysis
Given the following JavaScript code:
x = "3" + "14";
alert(x);
What will be presented in the alert box?

32. Types of questions: CU + CA
Put the following ways of event handlers in order of desirability, most desirable (top) to least desirable (bottom). E.g. “a, b, c”.
Order of desirability:______________
a. myimg.onload = myFunc;
b. <img id="myimg" onload="myFunc()" src="myimage.jpg"/>
c. myimg.addEventListener("load", myFunc, false);

33. Types of questions: Code completion
The following server code is vulnerable to SQL injection.
// …
String query = "SELECT user_id FROM user_data WHERE "
+ user_name = '" + req.getParameter("user") +
"' AND user_password = '" + req.getParameter("password") +"'";
Specify which input should be placed in the query string within the empty rectangle to exploit this vulnerability.
  &password=“whatever”

34. Grading the exam Questions will have different weights
Weights are not known to you in advance
The exam grade will be curved
Minimal requirement
Show effort
Midterm is 20% of the final course grade, but:
If you know you will Retake, you can skip the Midterm
You cannot skip both the retake and the