HCI Web Applications 1 - Hypertext Transfer Protocol

Web Applications Name: __________________________ ( ) Class:_________ Date: _________ Lesson 1: Hypertext Transfer Protocol Instructional Objectives: By the end of this task, you should be able to: ● StatethattheHypertextTransferProtocol(HTTP)is theprotocolusedby browsers to communicate with web servers ● State that under HTTP, each request must start by specifying a HTTP method ● State thatGETandPOSTare examples of HTTP methods ● StatethatunderHTTP, eachresponsestartsbyspecifyinga HTTPstatus code ● State that 200 (OK) and 404 (Not Found) are examples of HTTP status codes ● UsetheDeveloperToolsofa webbrowsertoexaminetherawcontentsof HTTP requests and HTTP responses ● UsethesocketmoduleinPythontosendandreceivebasicHTTPrequests and HTTP responses The World Wide Web (WWW) and Hypertext Transfer Protocol (HTTP) YouhavealreadylearnthowtwoprogramscancommunicateoveranetworkusingInternetsockets.However, sincesocketsonlytransferrawbytesandhavenobuilt-inwaystoindicatethetypeofdatabeingsentorwhy, weusuallyneedtodefineanadditional protocol that is appropriate to the application being developed. Forinstance,ina chatapplication,wemightdesignaprotocolthatlimitseachchatmessagetoa singlelineandindicatestheendofacompletechatmessagewithanewlinecharacter\n. However, for a morecomplexTic-Tac-Toe game,eachmessagemayneedtostartwithoneofseveralpossiblecommands(e.g.,b'MOVE'orb'END') to communicate what each player wants todo in the game. In 1990,a computerscientistnamedTim-BernersLeeworkingat theEuropeanOrganisationforNuclearResearch(alsoknownasCERN)proposedanotherkindofapplicationtofacilitatethesharingandmanagementofinformation.Theapplicationwouldbeasymmetricwithverydifferentclientandserverprograms.Userswouldbe CPDD Computer Education Unit Version: Dec 20181

Web Applications abletoruntheclientprogramandrequestfordocumentsfromcomputersrunningtheserverprogramusingoneofseveralpossiblecommands.Thedocumentssentoverwouldalsobewrittenina newcomputerlanguagetofacilitatehyperlinking,whichis theabilityto referenceonedocumentfromanotherin aneasy-to-followmanner. Tim-BernersLee'sproposalwastremendouslysuccessful,andtoday, wecallthisapplicationtheWorldWideWeb(WWW)orjusttheweb. Tousetheweb,weoftenuseanall-in-oneprogramcalleda webbrowserthatservesasbotha clientforrequestingdocumentsfromwebserversaswellasaviewerforthedocumentsthataresentover. Inparticular, webbrowsersaredesignedtoviewdocumentswrittenusingtheHypertextMarkupLanguage(HTML). In turn,theprotocolusedtorequest for such documents is named theHypertextTransfer Protocol (HTTP). Asoriginallydesigned,requestsandresponsesmadeusingHTTParenotencryptedandcanbereadormodifiedbyanypartyinvolvedinroutingthatdataacrosstheInternet.To preventthis,webrequestsandresponsescanbeencryptedusinganextendedversionofHTTPnamedHTTPS(HTTPSecure). However,HTTPScanbemoredifficultto setupcomparedto plainHTTP, soforlearningpurposeswewillfocusonplainHTTPonly. Nevertheless,beawarethatHTTPSisusuallypreferredand is in fact required for newer versions of HTTP. Locating Web Documents To request for a web document, you need to give a web browser three things: 1. The IP address or domain name of thehostserver thathas the document. 2. The port number that the web server program is listening on. 3. The full name of the document being requested. This is called thepath. CPDD Computer Education Unit Version: Dec 20182

Web Applications Allthreepiecesofinformationaresuppliedtothewebbrowserusingasinglestringcalleda UniversalResourceLocator(URL). Forwebdocuments,URLstypicallystartwitha schemethatis eitherhttporhttpsdependingonwhetherHTTPorHTTPSisbeingused,followedbyacolonandtwoslashes,thehostIPaddressordomainname,anoptionalcolonandportnumber, thenfinallythepath.In thiscontext, the scheme is a string that specifies which protocol to use. If thesecondcolonandportnumberareleftout,a defaultportnumberis usedinstead. The default port number is 80 for HTTP and 443 for HTTPS. URLsmustalsomeetotherrequirementsthattreatsomereservedcharactersasspecialandallowonlyunreservedcharacterssuchaslettersandnumericdigitsaswell as the hyphen-, underscore_, period.and tilde~characters to be used. To representallothercharacters,wemustusepercent-encodingbyreplacingthecharacterwithapercentsign%followedbythecharacter’sASCIIcodeconvertedtoa 2-digithexadecimalnumber. Somepercent-encodingsofcommoncharactersareprovided as examples in the following table: Character(space) # % / : ?ASCII Code 32 35 37 47 58 63Percent-Encoding%20 %23 %25 %2F %3A %3F 1 Identifythescheme,host,portnumberandpathcomponentsforeachofthefollowingURLs.Iftheportnumbercomponentismissing,useanappropriatedefault value instead. If the path component is empty, use “(empty)” instead. Example http://www.example.com:8080 Scheme Host Port No. Path CPDD Computer Education Unit Version: Dec 20183

Web Applications http www.example.com 8080 (empty) a) http://www.example.com Scheme Host Port No. Path b) https://secure.example.com:4430/ Scheme Host Port No. Path c) https://example.com:80/example.com Scheme Host Port No. Path d) https://example.org/example.com/example.html Scheme Host Port No. Path e) http://complex.example.org/complex.example.com Scheme Host Port No. Path f) https://www.moe.gov.sg/news/press-releases Scheme Host Port No. Path CPDD Computer Education Unit Version: Dec 20184

Web Applications Inadditiontothescheme,host,portnumberandpathcomponents,aURLcanalsohave two optional components. Afterthepath,theremaybeaquestionmark?followedbyaquerywhichprovidesadditional information to the web server and may modify the server’s response. Afterthequery(orpath,if thereisnoquery),theURLmayalsoendwitha hashcharacter# followedbya fragment. Notethatunlikequeries,fragmentsareNOTsenttothewebserverandareonlymeanttocontrolhowawebbrowserdisplaystheresponse.Changingthefragmentcomponentof a URLwhenmakinga HTTPrequest generally does not change the server’s response. The different parts of a URL are summarised below: 2 Identifythescheme,host,portnumber,path,queryandfragmentcomponentsforeachofthefollowingURLs.Iftheportnumbercomponentismissing,useanappropriatedefaultvalueinstead.If anyof thepath,queryorfragmentcomponents are empty, use “(empty)” instead. a) http://example.net:5000/com?hello=world Scheme Host Port No. Path Query Fragment b) https://sub.domain.example.org/9999/#hello-world Scheme Host Port No. Path Query Fragment c) https://example.org/res/search?keyword=computing#page-1 CPDD Computer Education Unit Version: Dec 20185

Web Applications Scheme Host Port No. Path Query Fragment TheURLfora webdocumentis usuallyenteredintotheaddressbarof a webbrowser. Forconvenience,webbrowserswillusuallyletusersomitthefirstportionoftheURLbeforethehostasitisassumedthatmostusersintendtouseHTTP. (Forexample, you can enterexample.comas a shortcut forhttp://example.com.) Aftera URLis entered,thewebbrowsercreatesa socketandconnectsit tothespecifiedhostandportnumber(80bydefault).Afteraconnectionisestablished,thewebbrowsersendsa requestforthedocumentusingthepathgivenbytheURL.Thisis a HTTPrequest. If allgoeswell,thewebserverthenrespondswiththerequesteddocument.ThisisaHTTPresponse. Theserequestsandresponsesareencoded as bytes using rules defined by the HTTP protocol. 3 In HTTP, what is the difference between a “request” and a “response”? A A HTTP request comes after a HTTP response. B A HTTPrequestis sentfromtheclientto theserverwhilea HTTPresponse is sent from the server to the client. C A HTTPrequestis sentfromtheserverto theclientwhilea HTTPresponse is sent from the client to the server. D A HTTP request must be shorter than a HTTP response. ( ) HTTP Requests SomewebbrowserslikeGoogleChromeandMicrosoftEdgecomewithbuilt-in“DeveloperTools”thatareusefulforlearningaboutHTTP. Theinstructionsinthefollowing tasks are customised for Google Chrome. LaunchGoogleChromeandopenDeveloperToolsfromtheellipsismenuunderthe“More tools” item. CPDD Computer Education Unit Version: Dec 20186

Web Applications With the DeveloperTools open, selectthe “Network”tab. Next, enterhttp://exam