1 / 31

web technologies and programming

web technologies and programming. cse4461 - hypermedia and multimedia technology Fanis Tsandilas April 3, 2007. the HyperText Transfer Protocol. HTTP request (TCP stream). TCP port: 80. web client - browser. web server. HTTP response (TCP stream). HTTP request.

petercooper
Download Presentation

web technologies and programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  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. 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 • 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> status code header response body

  11. status codes • 200 OK • 301 Moved Permanently400 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: www.example.com 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 server client

  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) client server GET /pictures.html Host: www.example.com Cookie: name=value Accept: */*

  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 SimpleServlet.java • 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>"); }}

  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 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>

  24. php • open source, mainly used for server-side scripting • example: handling a simple form example.php This is what you submitted:<p> <b>Country:</b> <?php echo $_REQUEST[”country"]; ?> <br> <b>City:</b> <?php echo $_REQUEST[”city"]; ?>

  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 message requesting details for product with ID = 235346 <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>

  27. example: SOAP message giving details for requested product <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>

  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… server client HTTP/1.1 200 OK Content-Type: application/soap+xml; charset=utf-8 Content-Length: 1020 …xml syntax representing another SOAP message…

  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

More Related