哈尔滨工业大学：《网络应用开发》英文版 NAD-chapter6-6

Chapter 6: Web and RPC Based P. Application Development Chapter goal Www and Http Www and hTMl Web Programming RPC and Middleware World wide web Use of Client-Server Paradigm Major application used on the Web server Internet Makes set of pages available Simple interface Uses port 80 Two concepts Web client Called a browser Creates tcp connection Sends requests for items Use of Client-Server Paradigm Use of client-Server Paradigm Primary protocol used between Response from server begins with ASCII browser and server known as Hyper Text Transfer Protocol (HPPT) Status code(200: handled request Http requests sent as text(ascir) HIYPPAA-G 280 oR Date: Mor, 3U Det 2000 01:22:22 GT GET: request an item from the server ad:St,a8cet208001:03:3 HEAD: request status information about Eag:"3e31-3883p9 an item ccept-Rangea: bytes POST: send data to the server Connection: cLose Content-Type: text/plain

1 哈工大计算机学院 李全龙 Network Application Development Server Software Design 1 Chapter 6: Web and RPC Based Application Development Chapter goal: „ WWW and HTTP „ Web Programming „ RPC and Middleware 哈工大计算机学院 李全龙 Network Application Development Server Software Design 2 WWW and HTTP 哈工大计算机学院 李全龙 Network Application Development Server Software Design 3 World Wide Web „ Major application used on the Internet „ Simple interface „ Two concepts „ Point „ Click 哈工大计算机学院 李全龙 Network Application Development Server Software Design 4 Use of Client-Server Paradigm „ Web server „ Makes set of pages available „ Uses port 80 „ Web client „ Called a browser „ Creates TCP connections to server „ Sends requests for items 哈工大计算机学院 李全龙 Network Application Development Server Software Design 5 Use of Client-Server Paradigm „ Primary protocol used between browser and server known as HyperText Transfer Protocol (HPPT) „ HTTP requests sent as text (ASCII) „ GET: request an item from the server „ HEAD: request status information about an item „ POST: send data to the server 哈工大计算机学院 李全龙 Network Application Development Server Software Design 6 Use of Client-Server Paradigm „ Response from server begins with ASCII header „ Status code (200 = handled request)

Web Components Browser Application progra a Web server Users interface to Web Becomes web client to fetch Document representation information from Web server ransfer protocol Displays information for user 工 nside a browser Illustration of a browser Main controller Receives input from user 一m Invokes client and interpreter a Clients One or more built Uses network to fetch items One or more built in Displays items a Browser contains many components Alternative Protocol Example Web Server File transfer service Running program Protocol is FTP Stores set of web documents Example URL Responds to request from browser by ftp: //Etp. cs. purdue. edu/pub/comer/netbook/clientc ding copy of documen Can be used in anchor te

2 哈工大计算机学院 李全龙 Network Application Development Server Software Design 7 Web Components „ Browser „ Web server „ Hypermedia links „ Document representation „ Transfer protocol 哈工大计算机学院 李全龙 Network Application Development Server Software Design 8 Browser „ Application program „ User’s interface to Web „ Becomes Web client to fetch information from Web server „ Displays information for user 哈工大计算机学院 李全龙 Network Application Development Server Software Design 9 Inside a Browser „Main controller „ Receives input from user „ Invokes client and interpreter „ Clients „One or more built into browser „ Uses network to fetch items „ Interpreter „One or more built in „ Displays items 哈工大计算机学院 李全龙 Network Application Development Server Software Design 10 Illustration of a Browser „ Browser contains many components 哈工大计算机学院 李全龙 Network Application Development Server Software Design 11 Alternative Protocol Example „ File transfer service „ Protocol is FTP „ Example URL ftp://ftp.cs.purdue.edu/pub/comer/netbook/client.c „ Can be used in anchor tag 哈工大计算机学院 李全龙 Network Application Development Server Software Design 12 Web Server „ Running program „ Stores set of Web documents „ Responds to request from browser by sending copy of document

Web Document Hypermedia Concept a Called a web page Web document contains mixture of a One web page per file Binary image Selectable pointers to other Web pages Specifies contents and layout Known as Hypertext Markup Language(HTML) Hypermedia Link On A Web document Terminology Associated with object or area on Markup language Gives general layout gu Internally like a symbolic link Does not specify exact placement or Advantage Can reference document on another computer Disadvantage Can become invalid Consequence of Using A Markup Language 事"Moee Web documents use the Document is free-format epresentation Embedded tags give display Instead of specifying a detailed defines document format alows a document to contain genera/ guide lines Tags often appear in pairs for display, and allows a browser to choose details. Consequently, two Beginning tag:<TAGNAME browsers may display an HTML document different

3 哈工大计算机学院 李全龙 Network Application Development Server Software Design 13 Web Document „ Called a web page „ One web page per file „ Can contain „ Binary image „ Text file „ Text standard „ Readable representation ASCII „ Specifies contents and layout „ Known as Hypertext Markup Language (HTML) 哈工大计算机学院 李全龙 Network Application Development Server Software Design 14 Hypermedia Concept „ Web document contains mixture of „ Text „ Images „ Selectable pointers to other Web pages „ Known as hypermedia 哈工大计算机学院 李全龙 Network Application Development Server Software Design 15 Hypermedia Link On A Web Document „ Associated with object or area on screen „ Internally like a symbolic link „ Advantage „ Can reference document on another computer „ Disadvantage „ Can become invalid 哈工大计算机学院 李全龙 Network Application Development Server Software Design 16 Terminology „ Markup language „ Gives general layout guidelines „ Does not specify exact placement or format 哈工大计算机学院 李全龙 Network Application Development Server Software Design 17 Consequence of Using A Markup Language Web documents use the HyperText Markup Language representation. Instead of specifying a detailed document format, HTML allows a document to contain general guidelines for display, and allows a browser to choose details. Consequently, two browsers may display an HTML document differently. 哈工大计算机学院 李全龙 Network Application Development Server Software Design 18 HTML Details „ Document is free-format „ Embedded tags give display guidelines „ Tags often appear in pairs „ Tag format „ Beginning tag: <TAGNAME> „ Ending tag: </TAGNAME>

General Form of HTML Document Document Format HTML source is free-form <T工TL a Previous example equivalent fo thIs text that forms the document title </TITLE> <HTMIX<HEADX<TITLE> text that forms <BODY> title</TITLE></HEADX<BODy>body of body of the document appears here he document appears here</BODY></HTML> </BODY> /HTML> Example HTML Tags Example of HTML Line Break Begin paragraph a Input Hello there. <BR>This is Line break force a new line) example<BR>of HTML Outpu Hello there Main heading(largest, boldest font of HTML Next heading(next largest) Example of hTml Line Break (continued) Example of HTML Headings Inp Hello there. <BRX<BR>Thi Hello. <BrX<HI>This is a shows<BR>HTML spacing eading</H1><BR>Back to normal Output Hello there Hello This shov This is a heading Back to normal HTML spacing

4 哈工大计算机学院 李全龙 Network Application Development Server Software Design 19 General Form of HTML Document <HTML> <HEAD> <TITLE> text that forms the document title </TITLE> </HEAD> <BODY> body of the document appears here </BODY> </HTML> 哈工大计算机学院 李全龙 Network Application Development Server Software Design 20 Document Format <HTML><HEAD><TITLE> text that forms the document title</TITLE></HEAD><BODY>body of the document appears here</BODY></HTML> „ HTML source is free-form „ Previous example equivalent to this 哈工大计算机学院 李全龙 Network Application Development Server Software Design 21 Example HTML Tags „ Begin paragraph <P> „ Line break (force a new line) <BR> „Main heading (largest, boldest font) <H1> … text … </H1> „Next heading (next largest) <H2> … text … </H2> 哈工大计算机学院 李全龙 Network Application Development Server Software Design 22 Example of HTML Line Break „ Input Hello there.<BR>This is an example<BR>of HTML. „ Output Hello there. This is an example of HTML. 哈工大计算机学院 李全龙 Network Application Development Server Software Design 23 Example of HTML Line Break (continued) „ Input Hello there.<BR><BR>This shows<BR>HTML spacing. „ Output Hello there. This shows HTML spacing. 哈工大计算机学院 李全龙 Network Application Development Server Software Design 24 Example of HTML Headings „ Input Hello.<BR><H1>This is a heading</H1><BR>Back to normal. „ Output Hello. This is a heading Back to normal

Other HTML Features Images in HTML Numbered or unnumbered lists Explicitly denoted as image Links to other pages Can specify alignment with text < IMG SRC= sfile name”> Images in HTML Links to Other Pages Here is a picture. <IMG SRC=file name" Symbolic representation ALIGN=MIDDLE> Embedded in HTML document Browser Hides text of link fre icture Associates link with item on page Called Uniform Resource Locator (URL) General Form of url Link in HTML protocol :/ domain name item name Link specified in <A> tag a Applies to successive items protocol to use domain name of path name Ends with </A> server computer Called anchor Only domain name required a Defaults proTocolishttp e Port is 80 Path is index. htm/

5 哈工大计算机学院 李全龙 Network Application Development Server Software Design 25 Other HTML Features „ Numbered or unnumbered lists „ Images „ Links to other pages 哈工大计算机学院 李全龙 Network Application Development Server Software Design 26 Images in HTML „ Explicitly denoted as image „ Specified with image tag „ Can specify alignment with text „ Example image tags <IMG SRC=“file_name”> <IMG SRC=“file_name” ALIGN=MIDDLE> 哈工大计算机学院 李全龙 Network Application Development Server Software Design 27 Images in HTML Here is a picture. <IMG SRC=“file_name” ALIGN=MIDDLE> 哈工大计算机学院 李全龙 Network Application Development Server Software Design 28 Links to Other Pages „ Symbolic representation „ Embedded in HTML document „ Browser „ Hides text of link from user „ Associates link with item on page „ Makes item selectable „ Called Uniform Resource Locator (URL) 哈工大计算机学院 李全龙 Network Application Development Server Software Design 29 General Form of URL „Only domain name required „ Defaults „ Protocol is http „ Port is 80 „ Path is index.html protocol :// domain_name : port / item_name name of access protocol to use domain name of server computer protocol port number path name of item 哈工大计算机学院 李全龙 Network Application Development Server Software Design 30 Link in HTML „ Link specified in <A> tag „ Applies to successive items „ Ends with </A> „ Called anchor