《计算机网络应用教学课件》计算机网络应用之四.ppt

计算机网络应用,课程安排,搜索引擎的原理与使用技巧文件传输共享与FTP服务器的配置和使用电子邮件原理与邮件客户端的配置和使用WWW服务、网页设计基础及WEB服务器的配置和使用流媒体基础知识及流媒体服务器的配置和使用路由器与网络连接共享等常用网络配置技巧Windows常用网络命令实验报告一次(两项),Web的基本概念,Web是什么？Web是World Wide Web（WWW）的简称，译为万维网，它是因特网上的一种分布式信息服务系统，并已成为集成其他信息服务的门户。,Web的基本概念,Web的特点1.Web是非线性的：想要了解网页上某一个主题的内容只要在这个主题上点击一下，就可以跳转到关于这一主题的网页上。文本不再象书一样是线性的，而是可以从一个位置跳到另外的位置。2.Web是分布式的：Web可以使不同站点的信息在逻辑上一体化，从用户看来这些信息是一体的。3.Web是多媒体化的：Web可以将数据、文本、图形、动画、视频和音频集成在一起。4.Web是可以交互的：用户通过填写表单向服务器提交请求，服务器可以根据用户的请求返回相应信息。5.Web是平台无关的：无论从Windows、Linux、UNIX、Macintosh还是别的什么平台，都可以通过浏览器（browser）访问Web。,Web的基本概念,Web技术发展简史1989年，欧洲粒子物理实验室（CERN）的Tim Berners-Lee构思了Web（万维网）。他提出了HTTP协议和HTML语言，编写了世界上第一个Web服务器HTTPD和第一个浏览器，并全部放在互联网上免费传播。,1994年，欧洲粒子物理实验室（CERN）和麻省理工学院（MIT）签订协议成立World Wide Web Consortium（即W3C，网址是），由Tim Berners-Lee任主席。,Web的基本概念,Web技术的应用现状Web页面简单易用，推动了因特网的普及，加快了世界信息化的进程。Web页面标准通用，简化了网络软件的开发，引起了软件业的革命。Web 1.0传统的主要为单向向用户传递信息的Web应用Web 2.0 核心:互动、分享与关系（不是一个技术标准）The term Web 2.0 is commonly associated with web applications that facilitate interactive information sharing,interoperability,user-centered design and collaboration on the World Wide Web.博客、百科、社交网站、P2P、IMWeb 3.0关于如何定义Web 3.0，及其所代表的含义的争论非常激烈无处不联网：移动互联网网络计算：SaaS软件即服务，网格计算、云计算Web vs Native AppWeb：跨平台、即需即用、一致性、自由开放、实现和分发新产品新内容成本低Native App:性能、用户体验,Web的基本概念,Web系统的构成Web服务器Web浏览器超文本传输协议HTTP(HyperText Transfer Protocol)超文本标记语言HTML(HyperText Markup Language),Web系统的工作过程,因特网,服务器,链接到URL的超链,HTTP 使用此 TCP 连接,浏览器 程序,服务器 程序,HTTP,客户,北京邮电大学,用户点击鼠标后所发生的事件,(1)浏览器分析超链指向页面的 URL。(2)浏览器向 DNS 请求解析 的 IP 地址。(3)域名系统 DNS 解析出北京邮电大学服务器的 IP 地址。(4)浏览器与服务器建立 TCP 连接(5)浏览器发出取文件命令：GET index.html。(6)服务器给出响应，把文件 index.html 发给浏览器。(7)TCP 连接释放。(8)浏览器显示“北京邮电大学主页”文件 index.html 中的所有文本。,万维网必须解决的问题,(1)怎样标志分布在整个因特网上的万维网文档？使用统一资源定位符 URL(Uniform Resource Locator)来标志万维网上的各种文档。使每一个文档在整个因特网的范围内具有唯一的标识符 URL。,:/:/,使用 HTTP 的 URL,使用 HTTP 的 URL 的一般形式 http:/:/,HTTP 的默认端口号是 80，通常可省略,http:/:/,若再省略文件的项，则 URL 就指到因特网上的某个主页(home page)。,万维网必须解决的问题,(2)用何协议实现万维网上各种超链的链接？在万维网客户程序与万维网服务器程序之间进行交互所使用的协议，是超文本传送协议 HTTP(HyperText Transfer Protocol)。HTTP 是一个应用层协议，它使用 TCP 连接进行可靠的传送。HTTP 有两类报文：请求报文从客户向服务器发送请求报文。响应报文从服务器到客户的回答。由于 HTTP 是面向正文的(text-oriented)，因此在报文中的每一个字段都是一些 ASCII 码串，因而每个字段的长度都是不确定的。,万维网必须解决的问题,(3)怎样使各种万维网文档都能在因特网上的各种计算机上显示出来，同时使用户清楚地知道在什么地方存在着超链？超文本标记语言 HTML(HyperText Markup Language)使得万维网页面的设计者可以很方便地用一个超链从本页面的某处链接到因特网上的任何一个万维网页面，并且能够在自己的计算机屏幕上将这些页面显示出来。HTML 定义了许多用于排版的命令（即标签）。HTML 把各种标签嵌入到万维网的页面中。这样就构成了所谓的 HTML 文档。HTML 文档是一种可以用任何文本编辑器创建的 ASCII 码文件。,HTML 文档中标签的用法,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,HTML 文档中标签的用法,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,首部开始,HTML 文档中标签的用法,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,标题,HTML 文档中标签的用法,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,首部结束,HTML 文档中标签的用法,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,主体开始,HTML 文档中标签的用法,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,1 级标题,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,HTML 文档中标签的用法,第一个段落,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,HTML 文档中标签的用法,第二个段落,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,HTML 文档中标签的用法,一个本地链接,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,HTML 文档中标签的用法,一个远程链接,HTML 文档中标签的用法,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,主体结束,HTML 文档中标签的用法,我的主页 我的计网实验示例网页 我的学号：*我的姓名：*我的第二个页面 我同学*的主页,HTML 文档结束,Web客户端Internet Explorer（微软）Firefox(Mozilla)Safari(Apple)Chrome(Geogle)Opera(Opera)遨游、搜狗浏览器、世界之窗 Web服务端1.windows系统自带的IIS服务2.Apache3.Tomcat网页制作工具DreamWeaver等,WEB服务器安装与配置,1.从如下网址下载Windows版 apache WEB服务器安装程序http:/httpd.apache.org/download.cgi#apache222.如果计算机已安装IIS的Web服务器，请进入控制面板管理工具IIS默认web站点将其关闭。或者修改即将安装的Apache Web服务器工作在其它未使用的端口3.运行安装程序安装apache WEB服务器。4.安装成功后，打开IE输入地址 看能否出现测试页面。,WEB服务器安装与配置,5.若需修改页面文件存放路径可修改apache的配置文件主配置文件在安装路径下apache2.2confhttpd.conf文件，在apache2.2confextra下面还有其它专项配置。配置文件中以#开头的行为注释行，仅起说明作用。修改httpd.conf第178行的DocumentRoot 将路径指定到自己主站点的页面存储位置，请注意表示路径的斜杠用“/”而不是“”修改httpd.conf第206行修改主站点的的目录为自己设定的目录修改第219行为 Options Indexes FollowSymLinks此处为修改主站点目录的访问权限，Indexes:表示当用户访问该目录时，如果用户找不到Directoryindex指定的主页文件，则返回该目录下的文件列表给用户。还可修改confextrahttpd-languages.conf文件设置默认语言为中文 DefaultLanguage zh-cn修改完配置文件必须重启Web服务器才能生效在开始Apache HTTP Server2.2Configure Apache Server里面有Test Configuration工具用来检查配置文件是否正确。如配置文件正确Dos窗口会一闪而过，如错误会显示错误信息。,WEB系统进阶,如何更简单快捷的设置页面显示格式？CSSCSS层叠样式表单（Cascading Style Sheets）可以辅助HTML更简易地设置页面元素的显示格式，并解决HTML无法解决的页面元素的精确定位、重叠、滤镜等效果，已成为与HTML不可分割的一项技术。核心目的实现页面内容与样式分离DIV+CSSDIV是HTML中的一个标签，表示它是一个“块”元素，这个块中所含元素的特性有DIV标签的属性来控制。,WEB系统进阶,实现数据交互的一种重要方式表单 是实现交互功能的主要方式，用户一般通过form向服务器提交信息。可设以下属性：method设置提交表单内容到服务器的HTTP方法，可以选get和post。get传送的数据量最大4000字符，表单提交时表单域数值将在地址栏显示。post传送的数据量不受限制，表单提交时表单域数值将不会在地址栏显示。action设置表单处理程序的URL。,text 设置单行文本域password 设置密码域file 文件输入域，这时form应设属性method=post enctype=multipart/form-datahidden 隐藏域，用于发送几个不用浏览者填写，但是处 理程序需要的数据，比如一份调查问卷的期次。checkbox 设置复选框radio 设置单选按钮，同名单选按钮只允许选择一个。button 一般按钮image 图像按钮，当被点击时，发送的是点击处的坐标，形式如name.x=x值，name.y=y值。reset 设置重置按钮，点此按钮将把所有表单域的值恢 复为缺省值。submit 设置提交按钮，这是每个表单都有的，表示开始 提交信息，激活服务器端的脚本程序。,设置表单域，可设以下属性：type 可取如下值：,name 表单域标识，作为“名称/取值对”的一部分传给服务器程序。value 输入的值 对text和hidden类型，是表单域的缺省值。对checkbox和radio类型，是被选择后传给CGI 程序的取值。对reset和submit类型，是按钮上显示的文字。checked 设置初始时被选中，无取值（适用于check、radio类型）size 可视的文本输入字符数（适用于text、password 类型）maxlength 能输入的最大字符数（适于text、password类型）alt 输入域描述（适于text类型）src 图像的URL（适于image类型）tabindex tab键次序参见示例代码：formdemo.html,表单域的主要属性,WEB系统进阶,网页要想有一定的动态与交互性怎么办？Q：比如网站注册新用户时某一必填项没填，或者两次输入的密码不同S：在页面中嵌入一些简单的代码，即“脚本语言”程序用户访问含有脚本程序的网页时，服务器将程序代码与其他内容一起发给客户端，由客户端浏览器的脚本语言解释器解释执行。一定程度上减少了客户机和服务器之间的通信开销，占用服务器的资源少，执行灵活快速。JavaScript与VBScript,万维网服务器,浏览器 程序,万维网客户,服务器 程序,HTTP,含有代码的HTML文档,含有代码的HTML文档,代码只在客户端运行,WEB系统进阶-JavaScript,JavaScript受Java启发而设计的，语法也和Java很相似但二者的本质是不同的JavaScript是一种脚本语言。它可以嵌入在html文件内，被客户端浏览器解释执行，用以实现不依赖Web服务器的动态页面效果。Java是一种面向对象的通用语言，它即可以做成Applets嵌到网页中，也可以做独立应用程序参见示例网页 second.html,WEB系统进阶动态页面技术,服务器如何根据用户的需求动态生成页面？Q：比如登陆教务处成绩查询系统，看到的成绩页面需各不相同S：在服务器端放置一些程序代码，让其分析用户提交的参数，然后从数据库等服务器获取相应业务数据，并动态的将网页和数据组合拼装成网页的HTML传输到客户端浏览器CGI-（Common Gateway Interface，公共网关接口）是第一个用于建立动态网页的实用技术。使用CGI服务器调用某一个程序来响应客户请求。被改进为FASTCGIASP-（Active Server Pages）是Microsoft 于1996年推出的动态页面生成技术。它通过在HTML文档中嵌套脚本代码生成动态页面。升级的框架是ASP.NET，事先编译好，运行效率更高，界面设计与程序设计分离，易用重用和维护。JSP-（Java Server Pages）包含JAVA程序片的html文件，在服务器端对这些JAVA程序片进行处理，然后将生成的HTML页面返回给客户端。PHP-（超文本预处理语言），是一种HTML内嵌式语言，在服务器端执行嵌入HTML文档的脚本语言，然后将生成的HTML页面返回给客户端。,为ApacheWEB服务器添加PHP支持,下载PHP安装包 注意需要下载PHP5.3 VC6 X86 Thread Safe的版本。想手动配置的可下载Zip格式。想自动配置的可下载Installer格式,为ApacheWEB服务器添加PHP支持,运行PHP安装程序后同意协议并选择安装路径后出现如下界面，供选择加入的Web服务器类型，选第一项，以模块形式加入版本的服务器,为ApacheWEB服务器添加PHP支持,运行PHP安装程序后同意协议并选择安装路径后出现如下界面，供选择加入的Web服务器类型，选第一项，以模块形式加入版本的服务器,为ApacheWEB服务器添加PHP支持,点击下一步后出现如下页面供用户设定Apache Web服务器的配置文件httpd.conf文件所在的文件夹，安装程序会自动对httpd.conf进行修改。若Apache为默认安装的话文件夹应指向：C:Program FilesApache Software FoundationApache2.2conf,为ApacheWEB服务器添加PHP支持,安装成功后，重启Apache Web服务器，即可加载PHP模块，实现对PHP脚本语言的支持。此时可用记事本新建一个文件内容为将其保存为phptest.php放到Web服务器的网站跟目录里，在浏览器中输入http:/localhost/phptest.php，若出现如下页面则安装成功,PHP示例参见submit.php,WEB系统进阶,服务器如何知道用户以前登陆过？Q：比如登陆论坛，可以选择记住用户名与密码，下次直接输入论坛的网址，服务器就知道是哪个用户登陆。S：Cookies 与SESSIONCookies是一种能够让网站服务器把少量数据存放在客户端硬盘或者内存中的技术。当用户再次浏览该网站时，网站通过读取Cookies，得知相关信息，就可以做出相应的动作。SESSION，把与用户连接有关的信息存放在服务器，开始与用户登陆，结束于用户离开，也可设置SEESION的有效期。,WEB系统进阶Web2.0的UI技术,C/S与传统的B/SCS缺点是C部分庞大，部署麻烦，且平台兼容性不好传统的BS缺点是B部分实时交互性较难实现，信息展示能力太弱，比如表格排序。实时的交互性，内容丰富效果绚丽的更良好的用户体验？AJAX传统的WEB应用程序模型：用户的界面操作触发HTTP请求，服务器在接收到请求之后进行一些业务逻辑处理，然后向客户端返回一个HTML页面。缺点：等待、不流畅、数据传输量大AJAX只和服务器交换有用的数据，页面显示等不必要的数据则不重新加载。当会话开始时，浏览器下载一个用JavaScript编写的Ajax引擎，这个引擎代替用户和服务器进行通讯。RIA（Rich Internet Applications,富互联网应用）Flex04年发布，基于Flash平台。SilverLight07年，微软，可方便的与 web系统集成JavaFx08年发布，可方便的与J2EE系统集成和交互。HTML5,