1. web technologies and programming cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007

2. 2 the HyperText Transfer Protocol HTTP request (TCP stream) web client - browser web server HTTP response (TCP stream) TCP port: 80

3. 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.net Accept: text/html image/gif, image/jpeg Authorization: user fanis:mypassword  request body (content of a form, etc.)

4. 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. 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. 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. 7 forms and post requests Country: City:

8. 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 Country: City:

9. 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   … 

10. 10 HTTP response status code header response body  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   … 

11. 11 status codes  200 OK  301 Moved Permanently 400 Bad Request  401 Unauthorized  403 Forbidden  404 Not Found  500 Internal Server Error  …

12. 12 authorization types: HTTP Basic, HTTP Digest GET /private/index.html HTTP/1.0 Host: www.example.com Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ== authorization key

13. 13 limitations of HTTP  no build-in security mechanisms  stateless - no support for session management

14. 14 session management  techniques  URL rewriting  hidden form fields  cookies  SSL sessions client server

15. 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: www.example.com HTTP/1.1 200 OK Content-type: text/html Set-Cookie: name=value (content of page) GET /pictures.html Host: www.example.com Cookie: name=value Accept: */* clientserver

16. 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. 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. 18 server programming  PHP  ASP (Active Server Pages)  Microsoft’s product  Servlets and JSP (JavaServer Pages)  Perl

19. 19 Java Servlet API  Java API for server programming  main classes  HttpServlet  HttpServletRequest  HttpServletResponse  HttpSession

20. 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. 21 sessions in servlets  one HttpSession object for each session  obtained by getSession in HttpServletRequest object  session state  setAttribute(“name”, value)  getAttribute(“name”)

22. 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. 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. 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. 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. 26 example: SOAP <soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> 235346 message requesting details for product with ID = 235346

27. 27 example: SOAP <soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> 235346 25.90 true message giving details for requested product

28. 28 SOAP = XML + HTTP POST /index.html HTTP/1.1 Host: www.example.com Content-Type: application/soap+xml; charset=utf-8 Content-Length: 3012 …xml syntax representing a SOAP message… HTTP/1.1 200 OK Content-Type: application/soap+xml; charset=utf-8 Content-Length: 1020 …xml syntax representing another SOAP message… client server

29. 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. 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. 31 conclusions 