27
CS4273: Distributed System Technologies and Programming I Lecture 1: Introduction to WWW
CS4273: Distributed System Technologies and Programming I
Lecture 1: Introduction to WWW
2
WWW, HTTP and Java
• The world wide web (WWW) is an architecture for accessing linked documents all over the Internet.
• The earliest web system was developed by a group of researchers in physics at CERN (European Nuclear Research Center) in 89. It’s for the easy distribution of information, such as reports, blueprints, photos, etc. The 1st demo on hypertext was in 91.
• A graphical web browser Mosaic was released in Feb 1993 (by NCSA). One of the authors left the group to form a company Netscape Communications Corp. A year later Netscape went public in 1995 (sold to America on-Line in 98).
• A WWW consortium was set up in 1994, aiming at further developing the Web, standardizing protocols, etc. Its home page: http://www.w3.org
3
Architecture of WWW
• A typical Client/Server model.• Client: a web browser that speaks HTTP and understands hypertext.• Server: a server process listening to TCP port 80 (port for HTTP svr)
for incoming requests. It keeps hypertext (or hypermedia) files for clients’ retrievals.
client server server
disk disk
Internet
hyper link
4
How does a web page get displayed in your web browser?
When you click link http://www.cs.cityu.edu.hk/~jia/cs4273/cs4273.html:
1. browser gets the URL from your input.
2. browser asks DNS for the IP address of www.cs.cityu.edu.hk.
3. DNS replies with 144.214.120.3.
4. browser makes a TCP connection to port 80 on 144.214.120.3.
5. it sends a GET /~jia/cs4273/cs4273.html request (http protocol).
6. HTTP server on 144.214.120.3 sends file cs4273.html back to the client
7. browser processes the format of cs4273.html and displays it.
8. browser fetches & displays images embedded in cs4273.html one by one by using GET.
9. TCP connection closes after a timeout.Client
DNS Web Server
5
HTTP (Hyper Text Transfer Protocol)
HTTP is an ASCII protocol, use telnet to try HTTP commands:
slx1% telnet www.cs.cityu.edu.hk 80
Trying 144.214.120.3...
Connected to www.cs.cityu.edu.hk.
Escape character is '^]'.
GET /~jia/cs4273/cs4273.html HTTP/1.1 <cr>
Host: www.cs.cityu.edu.hk <cr> <cr>
6
HTTP (Cont.)
HTTP/1.1 200 Document followsDate: Mon, 24 Mar 1997 02:08:05 GMTServer: NCSA/1.4.2Content-type: text/htmlLast-modified: Mon, 24 Mar 1997 02:07:11 GMTContent-length: 380<html><head><title> Xiaohua Jia's Home Page</title></head><body><li> DSc in Information Science, The Univ of Tokyo, Japan, 1991<li> Msc in Computer Science, The Univ of Sci & Tech of China, 1986</body></html>Connection closed by foreign host.slx1%
7
HTTP Built-in Methods
Method Description
GET request to read a web page
HEAD request to read a web page’s header information
PUT request to store the content of a web page
POST append the content to a named web page
DELETE remove the web page
LINK connect two existing resources
UNLINK break the existing link
8
URL (Uniform Resource Locators)
• The browser needs to access different types of data all over the Internet. In order to retrieve a piece of information from the Internet, the browser needs to specify:– what is the data (naming) ?
– where it is (locating) ?
– what protocol does the server speak ?
• URL effectively serves as a page’s worldwide name. It has 3 parts:– protocol name
– DNS name (server’s location)
– local file name
• http://www.cs.cityu.edu.hk/~jia, the same as:
http://www.cs.cityu.edu.hk/home/lec/jia/www/index.html
9
Protocols in URL
name used for example
http hyper text http://www.cs.cityu.edu.hk/~jia
ftp ftp ftp://ftp.cs.vu.nl/pub/minix/README
file local file access file:///C/My Documents/java/fox6.jpg
news news group news:comp.os.minix
gopher Gopher gopher://gopher.tc.umn.edu/lib
mailto sending mails mailto:[email protected]
10
HTML (Hyper Text Markup Language)
• By embedding standard markup commands within an HTML file, browsers can display web pages in nice formats.
• It is different from word processing software, such as MS-word, which is “What You See Is What You Get”.
• HTML is an application of ISO standard 8879, SGML (Standard Generalized Markup Language).
• You can view the source file of a displayed web page, and you also can save it and use it as the template to write your own web page!
For more about HTML, http://www.ncsa.uiuc.edu/General/Internet/WWW
11
Example of a home page in HTML
<html><head><TITLE>A Simple HTML Example</TITLE></head><body><H1>HTML is Easy To Learn</H1><P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P><P>And this is the second paragraph.</P></body></html>
12
Main Features of HTML
• HTML is static, only for displaying information.
• HTML can load image files.
• HTML has fill-out forms to collect information from clients and pass it back to the server (a CGI program) for processing.
• There are many tools to help you design web pages, such as FrontPage, Dreamweaver, etc.
13
Limitations of HTML
• Lack of extensibility. It does not allow you to define your own tags or attributes.
• Lack of structure or data description. It has no schema description and no support for checking structural validity.
• Mixture of data & display formats. It is difficult for data search and not efficient for data transfer (redundant transmission of formatting statements).
14
XML (Extensible Markup Language)
• XML was developed to enhance data description and data exchange over the Internet.
• XML is an intermediate language for data exchange. It is NOT a language for end-presentation. An XML document need be converted into other languages for end-presentation, such as HTML, WML (Wireless ML), CML (Commerce ML), MathML (Mathematical ML), SpeechML, etc.
• Both XML and HTML come from SGML. HTML is an “application” of SGML, while XML is a subset of SGML. XML contains about 20% of SGML’s syntax but has over 80% of its power.
• XML is a meta language, which allows you to define your own markup language.
15
A Silly Example of Using XML
//silly.html, embedding xml tags in HTML file<html> <body><xml id="cdcat"><CATALOG><CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST></CD><CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST></CD></CATALOG></xml><table border="1" datasrc="#cdcat" align="center"><tr><td><span datafld="ARTIST"></span></td><td><span datafld="TITLE"></span></td></tr></table></body> </html>Demo at http://www.cs.cityu.edu.hk/~jia/xml/silly.html
16
A More Sensible Example of Embedding XML in HTML
XML separates the data from HTML (formatting statements). In the following example, xml data are in a separate file “CDdata.xml”.
<html><body><xml id="cdcat" src=“CDdata.xml"></xml><table border="1" datasrc="#cdcat" align="center"><tr><td><span datafld="ARTIST"></span></td><td><span datafld="TITLE"></span></td><td><span datafld="YEAR"></span></td></tr></table></body></html>
Demo at http://www.cs.cityu.edu.hk/~jia/xml/CDdata.html
17
XML document
An XML document usually consists of three parts (files):
• Document Type Definition (DTD): define the logical structure and storage layout.– See an example in www/xml/book.dtd
• Entities (XML): entities are data, whose types are defined in .dtd. It has a pointer to the .xsl file to display it.– See an example in www/xml/book.xml
• Display format (XSL): a program to process and display XML data.– See an example in www/xml/book.xsl
18
XSL (eXtensible Style-sheet Language)
XSL was proposed to specify the display format of an XML document:
• XSL is almost a fully fledged programming language, which allows you to program the processing / formatting of XML data. It has instructions such as, apply-templates, for-each, value-of, etc.
• XSL files take extension “.xsl”. The same set of XML data can have multiple “.xsl” files for different display format.
• XML data is separated from display format, which makes transmission of XML data efficient and clean (easy to search & read).
See demo at– http://www.cs.cityu.edu.hk/~jia/xml/book.xml
– a different display style in book1.xsl
19
Web Programming Technologies at Client – Server Sides
Client side technologies Server side technologies
JavaScript/JScript
VBScript ASP (Active Server Page)
Java Applet Java Servlet / JSP (JavaServer Page)
CGI (in C, C++, Java, Perl, etc.)
Perl (Practical extraction & report lang) Script
20
Client Side Technology – JavaScript
• JavaScript was originally created by Netscape. Jscript is Microsoft’s version of JavaScript.
• It is a script language, used in HTML documents and executed in a web browser. IE and Netscape contain the JavaScript interpreter.
• It is a fully powered programming language, which has complex data types, control structures, function definitions, event handlings.
• It is a de facto standard of client side script language.
Demo at http://www.cs.cityu.edu.hk/~jia/JavaScript/Janimation.html or JScriptTest.html
21
Client Side Technology – VBScript
• VBScript (Visual Basic Script) is a subset of Microsoft Visual Basic.
• VBScript is particularly valuable when it is used with Microsoft ASP (Active Server Pages), a server side program that creates dynamic content sent to the client’s browsers.
• VBScript is the de facto language for ASP.
Demo at http://www.cs.cityu.edu.hk/~jia/ASP/VBScriptTest.html
22
An Example of Server-side Technology: ASP
<%@ Language = "VBScript" %><html> <head> <title > An ASP Example </title></head> <body> <form name="form1" method=“POST"> <input name="TextBox1" type="text" id="TextBox1" /> <%
ss = Request.Form("TextBox1") %>
<input name="TextBox2" type="text" id="TextBox2" value="<%= ss %>" />
<input type="submit" name="Button1" value="Button" id="Button1" /> </form> </body> </html>N.B. ASP statements are enclosed by <% %>.
Demo at http://msec2.cs.cityu.edu.hk/jia/ASP/ASPtest.asp
23
Client Scripting vs. Server Scripting
• Client-side scripting interacts directly with end-users, which reduces the number of trips to the server and makes uses of browser’s functions for display control.
• Client scripting is browser dependent.• Client scripts are viewable.• Server-side scripts, e.g. ASP, are executed on the server, which
generates responses sent to the browser for display (web server must have the script parser).
• When a client requests an ASP file, it is parsed by an ActiveX component, and scripting codes (i.e., ASP statements) are executed as they are encountered.
• Each time when there’s a client event, e.g., button-click or data-input, the browser asks the server to process the event and send back the new display file.
24
Java Applet (a Client Side Technology)
Java Architecture
• Java is a programming language which is Object Oriented, platform-independent, interpreted, multithreading, fast, secure, robust, ……
• A Java source program is compiled to Java byte-code.
• A Java virtual machine sitting on each platform, interpreting Java byte-code to local machine instructions and executing them.
JavaComplie
r
JavaVirtual Machine
Java Source Code
NativeMachine
Instructions
JavaByte-code(Applets)
25
An easy start of Java
Edit a Java program in file “helloJava.java”:class helloJava {
public static void main(String args[]) {System.out.println(“Hello Java!”);
}}
Compile the program:slx1% javac helloJava.javait generates a file “helloJava.class” which is Java byte-code (note: the .class file takes the same name as the .java program file).
Run Java interpreter to execute it:slx1% java helloJava // no need of extension name .class
26
An Easy Start of Java Applet
Two kinds of Java programs:
• Ordinary application programs: run independently as an application.
• Applets: require supporting environment like IE or AppletViewer.
27
Our First Java Applet
Edit the applet program in a file “helloApplet.java” (note: the file name must be the same as the applet name in the program!):
import java.awt.*;import javax.swing.*;public class helloApplet extends JApplet {
public void paint(Graphics g) {g.drawString(“Hello Java Applet!”, 5, 50);
}}
Compile the program:slx1% javac helloApplet.javait produces a file “helloApplet.class”.
Embed the applet into an HTML file:….<applet code=”helloApplet.class” width=150 height=25></applet>Demo at http://www.cs.cityu.edu.hk/~jia/java/gui/test.html
