Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas...
-
Upload
darrell-gaines -
Category
Documents
-
view
214 -
download
0
Transcript of Web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas...
web technologies and programming
cse4461 - hypermedia and multimedia technology
Fanis Tsandilas
April 3, 2007
2
the HyperText Transfer Protocol
HTTP request(TCP stream)
web client - browserweb server
HTTP response(TCP stream)
TCP port: 80
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.)
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
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
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)
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>
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>
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>
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>
11
status codes
200 OK 301 Moved Permanently
400 Bad Request 401 Unauthorized 403 Forbidden 404 Not Found 500 Internal Server Error …
12
authorization
types : HTTP Basic, HTTP Digest
GET /private/index.html HTTP/1.0Host: www.example.comAuthorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
authorization key
13
limitations of HTTP
no build-in security mechanisms
stateless - no support for session management
14
session management
techniques URL rewriting hidden form fields cookies SSL sessions
client server
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
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
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://….
18
server programming
PHP
ASP (Active Server Pages) Microsoft’s product
Servlets and JSP (JavaServer Pages)
Perl
19
Java Servlet API
Java API for server programming
main classes HttpServlet HttpServletRequest HttpServletResponse HttpSession
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
21
sessions in servlets
one HttpSession object for each session obtained by getSession in
HttpServletRequest object
session state setAttribute(“name”, value) getAttribute(“name”)
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
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
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
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
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
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
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
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
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>
31
conclusions