![Page 1: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/1.jpg)
web technologies and programming
cse4461 - hypermedia and multimedia technology
Fanis Tsandilas
April 3, 2007
![Page 2: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/2.jpg)
2
the HyperText Transfer Protocol
HTTP request(TCP stream)
web client - browserweb server
HTTP response(TCP stream)
TCP port: 80
![Page 3: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/3.jpg)
3
HTTP request
request line (GET, POST, HEAD methods)GET /path/to/file/index.html HTTP/1.0
header lines (info about request, user, etc.)
User-Agent: Mozilla 4.0 (X; I; Linux-2.0.35i586)Host: www.hypermedia-wiki.netAccept: text/html image/gif, image/jpegAuthorization: user fanis:mypassword
request body (content of a form, etc.)
![Page 4: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/4.jpg)
4
GET request
GET /cse4461/index.php?title=Main_Page HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg,*/* Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.01;
Windows NT) Host: www.hypermedia-wiki.net Connection: Keep-Alive
![Page 5: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/5.jpg)
5
GET request
GET /cse4461/index.php?title=Main_Page HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg,*/* Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.01;
Windows NT) Host: www.hypermedia-wiki.net Connection: Keep-Alive
passing parameters
![Page 6: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/6.jpg)
6
GET request
GET /cse4461/index.php?title=Main_Page HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg,*/* Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.01;
Windows NT) Host: www.hypermedia-wiki.net Connection: Keep-Alive
can keep TCP connection open to perform multiple requests(supported by newer browsers)
![Page 7: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/7.jpg)
7
forms and post requests
<form action="/search.php" method="post"> Country: <input name=“country” type=“text”> City: <input name=“city” type=“text”><input type=“submit”> </form>
![Page 8: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/8.jpg)
8
forms and post requests
POST /search.cgi HTTP/1.0 Host: www.example.com User-Agent: HTTPTool/1.0 Content-Type: application/x-www-form-urlencoded Content-Length: 26
country=Canada&city=Toronto+Ontario
<form action="/search.php" method="post"> Country: <input name=“country” type=“text”> City: <input name=“city” type=“text”><input type=“submit”> </form>
![Page 9: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/9.jpg)
9
HTTP response
HTTP/1.1 200 OK Date: Mon, 06 Dec 1999 20:54:26 GMT Server: Apache/1.3.6 (Unix) Last-Modified: Fri, 04 Oct 1996 14:06:11 GMT Content-language: en Connection: close Content-type: text/html Content-length: 1012
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<HTML> … </HTML>
![Page 10: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/10.jpg)
10
HTTP response
status code
header
responsebody
HTTP/1.1 200 OK Date: Mon, 06 Dec 1999 20:54:26 GMT Server: Apache/1.3.6 (Unix) Last-Modified: Fri, 04 Oct 1996 14:06:11 GMT Content-language: en Connection: close Content-type: text/html Content-length: 1012
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<HTML> … </HTML>
![Page 11: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/11.jpg)
11
status codes
200 OK 301 Moved Permanently
400 Bad Request 401 Unauthorized 403 Forbidden 404 Not Found 500 Internal Server Error …
![Page 12: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/12.jpg)
12
authorization
types : HTTP Basic, HTTP Digest
GET /private/index.html HTTP/1.0Host: www.example.comAuthorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
authorization key
![Page 13: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/13.jpg)
13
limitations of HTTP
no build-in security mechanisms
stateless - no support for session management
![Page 14: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/14.jpg)
14
session management
techniques URL rewriting hidden form fields cookies SSL sessions
client server
![Page 15: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/15.jpg)
15
cookies
extension of HTTP - servers can store data on the client limited size, number client may disable them
GET /index.html HTTP/1.1Host: www.example.com
HTTP/1.1 200 OKContent-type: text/htmlSet-Cookie: name=value
(content of page)
GET /pictures.htmlHost: www.example.comCookie: name=valueAccept: */*
client server
![Page 16: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/16.jpg)
16
cookie attributes
Set-Cookie: name=value; expires=date; path=/; domain= example.org
Example
Set-Cookie: RMID=732423sdfs73242; expires=Fri, 31-Dec-2010 23:59:59 GMT; path=/; domain= example.org
![Page 17: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/17.jpg)
17
SSL
SSL: Secure Sockets Layer TLS: Transport Layer Security
(newer)
runs between application layer (e.g., HTTP, FTP, SMTP) and TCP HTTP: accessed by https://….
![Page 18: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/18.jpg)
18
server programming
PHP
ASP (Active Server Pages) Microsoft’s product
Servlets and JSP (JavaServer Pages)
Perl
![Page 19: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/19.jpg)
19
Java Servlet API
Java API for server programming
main classes HttpServlet HttpServletRequest HttpServletResponse HttpSession
![Page 20: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/20.jpg)
20
example: Java servlet
import java.io.*;import javax.servlet.*;import javax.servlet.http.*;
public class Simple extends HttpServlet { public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");PrintWriter out = response.getWriter();
out.println("<HTML><BODY>" + “<h1> Parameters </h1>”+ “<UL>”+ “<LI> Parameter 1: ” + request.getParameter(“param1”)+“\n”;+ “<LI> Parameter 2: ” + request.getParameter(“param2”); + “<UL>” + “</BODY></HTML>");
}}
SimpleServlet.java
![Page 21: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/21.jpg)
21
sessions in servlets
one HttpSession object for each session obtained by getSession in
HttpServletRequest object
session state setAttribute(“name”, value) getAttribute(“name”)
![Page 22: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/22.jpg)
22
JSP
servlets require Java and sophisticated programming
In JSP, web applications are active pages HTML with snippets of code JSP pages are translated into
servlets
![Page 23: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/23.jpg)
23
example: JSP
<%! int add(String x, String y){ return Integer.parseInt(x) + Integer.parseInt(y);
}%>
<html><head><title>Addition</title></hrad><body>
The sum of <%= request.getParameter(“x”) %>and <%= request.getParameter(“y”) %>is <%= add(request.getParameter(“x”),
request.getParameter(“y”)) %></body>
</html>
example.jsp
![Page 24: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/24.jpg)
24
php
open source, mainly used for server-side scripting
example: handling a simple form
This is what you submitted:<p><b>Country:</b> <?php echo $_REQUEST[”country"]; ?> <br><b>City:</b> <?php echo $_REQUEST[”city"]; ?>
example.php
![Page 25: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/25.jpg)
25
SOAP (Simple Object Access Protocol)
communication between remote applications through HTTP
platform/language independent
XML syntax
simple and extensible
will be developed as W3C standard
![Page 26: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/26.jpg)
26
example: SOAP
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body> <getProductDetails xmlns="http://warehouse.example.com/ws">
<productID>235346</productID></getProductDetails>
</soap:Body> </soap:Envelope>
message requesting details for product with ID = 235346
![Page 27: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/27.jpg)
27
example: SOAP
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body> <getProductDetailsResponse
xmlns="http://warehouse.example.com/ws"> <getProductDetailsResult>
<productID>235346</productID><price currency=“CAD”>25.90</price><inStock>true</inStock>
</getProductDetailsResult></getProductDetailsResponse>
</soap:Body> </soap:Envelope>
message giving details for requested product
![Page 28: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/28.jpg)
28
SOAP = XML + HTTP
POST /index.html HTTP/1.1Host: www.example.comContent-Type: application/soap+xml; charset=utf-8Content-Length: 3012
…xml syntax representing a SOAP message…
HTTP/1.1 200 OKContent-Type: application/soap+xml; charset=utf-8Content-Length: 1020
…xml syntax representing another SOAP message…
client server
![Page 29: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/29.jpg)
29
AJAX
AJAX = Asynchronous JavaScript And XML
direct communication of JavaScript with the server through JavaScript XMLHttpRequest
object (Firefox, Safari) or ActiveXObject (IE)
no need to reload a page for every request for a change
![Page 30: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/30.jpg)
30
example: AJAX
<html><body><script type=“text/javascript”>function updateFunction(){ var xmlHttp; try{ xmlHttp = new XMLHttpRequest(); } //Firefox, Opera 8.0+, Safari catch(e) { alert(“browser not supported”); return false;}
// when the request has been completed the time field of // myForm will be updated by the response value xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4) document.myForm.time.value = xmlHttp.responseText;
} // preparing and sending the request to the server // it will be served by time.php xmlHttp.open(“GET”, “time.php”, true); xmlHttp.send(null);}</script>
…</html>
![Page 31: Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007](https://reader037.vdocuments.site/reader037/viewer/2022110209/56649e155503460f94aff013/html5/thumbnails/31.jpg)
31
conclusions