web technologies and programming cse hypermedia and multimedia technology Fanis Tsandilas April 3, 2007

2 the HyperText Transfer Protocol HTTP request (TCP stream) web client - browser web 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 i586) Host: Accept: text/html image/gif, image/jpeg Authorization: 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:  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:  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:  Connection: Keep-Alive can keep TCP connection open to perform multiple requests (supported by newer browsers)

7 forms and post requests Country: City:

8 forms and post requests  POST /search.cgi HTTP/1.0  Host:  User-Agent: HTTPTool/1.0  Content-Type: application/x-www-form-urlencoded  Content-Length: 26  country=Canada&city=Toronto+Ontario Country: City:

9 HTTP response  HTTP/ OK  Date: Mon, 06 Dec :54:26 GMT  Server: Apache/1.3.6 (Unix)  Last-Modified: Fri, 04 Oct :06:11 GMT  Content-language: en  Connection: close  Content-type: text/html  Content-length: 1012   … 

10 HTTP response status code header response body  HTTP/ OK  Date: Mon, 06 Dec :54:26 GMT  Server: Apache/1.3.6 (Unix)  Last-Modified: Fri, 04 Oct :06:11 GMT  Content-language: en  Connection: close  Content-type: text/html  Content-length: 1012   … 

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.0 Host: Authorization: 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.1 Host: HTTP/ OK Content-type: text/html Set-Cookie: name=value (content of page) GET /pictures.html Host: Cookie: name=value Accept: */* clientserver

16 cookie attributes Set-Cookie: name=value; expires=date; path=/; domain= example.org Example Set-Cookie: RMID=732423sdfs73242; expires=Fri, 31-Dec :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

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(" " + “ Parameters ” + “ ” + “ Parameter 1: ” + request.getParameter(“param1”)+“\n”; + “ Parameter 2: ” + request.getParameter(“param2”); + “ ” + “ "); } } 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); } %> Addition The sum of and is example.jsp

24 php  open source, mainly used for server-side scripting  example: handling a simple form This is what you submitted: Country: 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=" message requesting details for product with ID =

27 example: SOAP <soap:Envelope xmlns:soap=" true message giving details for requested product

28 SOAP = XML + HTTP POST /index.html HTTP/1.1 Host: Content-Type: application/soap+xml; charset=utf-8 Content-Length: 3012 …xml syntax representing a SOAP message… HTTP/ OK Content-Type: application/soap+xml; charset=utf-8 Content-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 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); } …

31 conclusions 