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



passing parameters

6

GET request



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

web technologies and programming cse4461 - hypermedia and multimedia technology fanis tsandilas...

Documents