3. 互联网是如何运转的？

序言

偶尔你们会有机会了解一件事情的来龙去脉和其中的内幕，今天你就很幸运，因为我将带你领略当今最热门，同时也可能是你已经熟悉了的技术：万维网。

本篇文章讲述万维网的基本技术，包括：

• 超文本标记语言（HTML）
• 超文本传输协议（HTTP）
• 域名解析系统（DNS）
• Web服务器和Web浏览器
• 静态和动态内容

以上这些内容都是一些最基本的知识，尽管它们对你构建一个更好的Web站点没有太大帮助，但却有助于你使用专业的语言向客户和其他人讲述Web。正如电影《音乐之声》里那个睿智的保姆所说的：“当我们学习阅读时，从ABC开始；而当学习唱歌时，从Do Re Mi开始”。在本篇文章中，我将讲述计算机是如何使用HTTP和TCP/IP协议在互联网上通信的，然后再讲述创建网页需要的各种不同语言。

本章的内容如下：

• 计算机如何通过互联网通信？
  • 剖析请求/响应周期
• 内容的类型
  • 纯文本
  • Web标准
  • 动态网页
  • 需要其它程序或插件的格式
• 静态网站与动态网站的比较
• 总结
• 练习题

计算机如何通过互联网通信？

值得庆幸的是，我们使计算机易于使用。在万维网上，绝大多数网页都是使用同一种语言，即HTML（超文本标记语言）编写的，并且使用一种通用的协议，即HTTP（超文本传输协议）进行传输的。HTTP是常用的互联网规范，它允许一台Window计算机和正在运行着最新版本Linux操作系统的计算机实现无障碍的通信。通过使用Web浏览器（它是一种解释HTTP，并将HTML渲染为人类可读格式的软件），你就可以在任意地点、任意设备上（包括手机、PDA、游戏机等），阅读在任意计算机上以HTML创作的网页。

尽管编写网页的语言相同，但接入互联网的各种设备要能和网络相互通信，却需要有一些规则。这和在教室里学习，问问题要举手的规矩一样，HTTP为互联网确立了这些基本规则。由于有了HTTP，一台客户计算机（如你的计算机）就知道，它就是那台向服务器发出某个网页访问请求的计算机。服务器就是存放Web站点的计算机。当你在浏览器中键入一个网址，服务器就会收到你的请求，找到你想访问的网页，然后将该网页发回到你的计算机，这时网页就会在你的浏览器上显示出来了。

剖析请求/响应周期

以上我已讲述了使计算机能在互联网上通信所需的几个部分，现在我再详细谈谈HTTP的请求/响应周期。为能更有效地掌握一些重要的概念，请遵照以下步骤动手操作一下。

1. 每一次请求/响应，都从在Web浏览器的地址栏上键入统一资源定位符（URL）开始，比如 http://dev.opera.com。请打开浏览器，键入一个URL。

   也许你们还不知道，Web浏览器实际上并不是使用URL向服务器请求Web站点的，而是使用互联网协议或称IP地址（它们和电话号码或邮政编码相似，是用来识别服务器的）。举例来说，http://dev.opera.com这个站点的IP地址就是213.236.208.98。

2. 请打开一个新的浏览器标签页或窗口，键入 http://www.apple.com，然后按回车键；然后再键入 http://17.149.160.10/ 并按回车键，你会发现到的是同一个Web站点。试着在地址栏键入 http://213.236.208.98 并按回车键，这其实也是指向一个服务器地址，但你的浏览器上会显示“禁止访问”错误信息（错误403），这是因为你未被允许访问这个服务器的真实根目录。

   http://www.apple.com 基本上等于是 http://17.149.160.10/ 的别名，但为什么要使用这个别名呢？这是因为人们更容易记住文字，而不是一长串数字。将字母组成的域名解析为数字表示的IP地址，是通过域名解析系统（DNS）实现的。DNS实际上是所有连接到互联网上计算机的自动目录。当你在浏览器的地址栏键入 http://dev.opera.com 并按回车键后，该网址就被发送到一个域名服务器上，由这个服务器去找到相对应的IP地址。由于连接到互联网的计算机数量非常庞大，不是每一台DNS服务器都有一个所有在线机器的列表，因此就有这样一个系统，确保你的请求可以发往正确的服务器，以完成你的请求。

   因此DNS系统就查找 www.opera.com 站点，找到所请求页面的IP地址17.149.160.10，然后把这个IP地址发送回你的Web浏览器。

   你的计算机向位于指定IP地址的计算机发出请求，等待得到响应。如果一切顺利的话，服务器会向客户端发出一条消息说“一切都正常”（见图1），然后将网页发送到客户端。这类消息被包含在HTTP 报头中。

   

   图一: 在这种情况下，一切都正常，服务器传输回正确的网页。

   如果出现了问题，例如你键入的URL不正确，则会传输回HTTP 错误信息，并显示在你的浏览器上，错误404“网页未找到”，就是你可能遇到的常见错误信息。

3. 试着键入 http://dev.opera.com/joniscool.html，这个网页不存在，因此你的浏览器上就会显示服务器传输回的错误404信息。试试再键入几个不同的Web站点上不存在的网页的网址， 你会发现传输回来的404错误页面各有不同。这是因为一些Web开发员只是让Web服务器传输回默认的错误页面，而另一些Web开发员则编写了自定义的错误页面。这是一项高级技术，未包含在本课程的范围内，不过我们希望在即将发布的一篇文章中包含这一内容。

   最后，说一下有关URL的事情，通常你键入的指向某个站点的第一个URL，在其末尾是没有真正的文件名的（如 http://www.mysite.com/），随后你访问的页面，在其URL的末尾有些有文件名，有些则没有。其实你访问的都是真正的文件，只是有时Web开发员会通过在Web服务器上的设置，让服务器不在URL中显示文件名，这样做通常可以让人们更容易记住URL，使访问站点的用户获得更好的体验。这是一项高级技术，也未包含在本课程的范围内。我们将在后面的文章中，讲述向服务器上载文件以及文件/文件夹目录结构的内容。

内容的类型

以上我已为大家讲述了HTTP请求/响应，现在我将讲述你在互联网上可以看到的不同内容。我把内容划分为四大类：纯文本、Web标准、动态网页，及需要其它程序或插件的格式。

纯文本

在互联网发展的早期阶段，那时还没有任何Web标准或插件，互联网上主要就是图像和纯文本（扩展名为.txt的文件）。当一个纯文本文件被放到互联网上，浏览器只是按原样显示，不进行任何处理。现在大学的站点上，你常常都还能看到纯文本文件。

Web标准

构成万维网的基石就是3个主要的Web标准：HTML（或XHTML——可扩展超文本标记语言，在本文中我将交替使用HTML和XHTML）、CSS、JavaScript。

对于沟通这个用途来说，超文本标记语言是个恰如其分的名字。HTML用于将文档划分为不同的部分，规定文档的内容和结构，并定义每部分的含义（它包含你在网站看到的所有文本等内容），同时，它使用元素来标识页面中的不同部分。

层叠样式表（CSS）使你可以完全控制一个HTML元素如何被显示。CSS很简单，例如，使用样式表声明，可将所有段落改为双倍行距（line-height（行高）: 2em;），或让所有二级标题变为绿色（color: green;）。将页面结构从页面格式中分离出来，会带来非常多的好处，在下一篇文章中我们将详细地讲述。为示范将HTML和CSS结合起来使用所带来的效果，请看图2，在图2的左边显示的是一些纯HTML，未添加任何格式设定；而右边显示的是应用了一些CSS样式后完全相同的HTML。

图2： 左边是纯HTML，右边是应用了CSS的HTML。

最后，JavaScript 为你的Web站点提供了动态功能。你可以写一些将在客户计算机上运行的JavaScript小程序，而不用在服务器上安装任何特别的软件。JavaScript能让你可以向你的Web站点增添一些基本的功能和交互，但它也有局限性，因此我们下面就要谈谈服务器端的编程语言和动态网页。

动态网页

有时当你在浏览互联网时，你会看到一些网页的扩展名不是.html ，而可能是.php、.asp、.aspx、.jsp，或其它奇怪的扩展名。它们都是动态网页技术的例子，动态网页技术可用于创建具有动态代码部分的网页，代码部分将根据从数据库、表格、或其它数据源之中输入的数值，显示不同的结果。我们将在下面的部分比较一下静态网页和动态网页。

需要其它程序或插件的格式

由于Web浏览器只设计用来解析和显示一些特定的技术，如Web标准等，因此如果你请求的地址指向了一个复杂的文件格式，或是包含了某个需要特定插件的网页，那么插件会被要求下载到你的计算机。而如果你的浏览器已安装了该插件，那么此网页会被所需插件所支持并打开。例如：

1. 如果你遇到Word文档、Excel文件、PDF、压缩文件（例如ZIP或SIT 文件）、复杂的图像文件（如Photoshop PSD），或浏览器不认识的其它复杂文件，浏览器通常会问你是否想下载或是打开文件。 这两种方式效果其实是一样的，只是后一种方式，将使浏览器先下载该文件，然后由可以打开该文件的应用程序（如果已安装了的话）打开文件。

2. 如果你遇到的页面含有Flash 电影、MP3或其它格式的音频文件、MPEG或其它格式的视频文件，浏览器将用已安装的插件来播放它们。如果所需的插件并未安装，则浏览器要么显示一个用于安装所需插件的链接，要么将文件下载下来，再通过桌面应用程序来打开文件。

当然，这里也存有一些灰色地带，如SVG（可伸缩矢量图）是一个Web标准，可以在一些浏览器中直接打开，如Opera浏览器。但不能在另外一些浏览器（如Internet Explorer）中直接打开，因为IE需要一个插件来解析SVG。许多的浏览器都将匹配预装插件，因此你也许不会注意到哪些内容是通过插件显示的，而哪些内容是通过浏览器直接被显示的。

静态网站与动态网站的比较

什么是静态网站和动态网站，二者之间有什么差别？与一盒巧克力相似，东西都在里面。

静态Web站点是指这样一种网站，其中的内容、HTML和图形始终都是静态的，任何访问者看到的都是一样的页面，除非创建网站的人决定手动更改存在服务器上的网站副本。我们在本文中讲述的主要是这类静态Web站点。

而在一个动态Web站点上，在服务器上的内容是一样的，但除了包含有HTML外，网站还包含有动态代码，可以显示不同的数据，取决于你向网站输入的信息。让我们看一个例子吧，通过你的Web浏览器访问www.amazon.com，搜索5种不同的产品。亚马逊网站实际上并未将5个不同的网页发送给你，而是将一个相同的网页发送给你了5次，但每次发送给你的网页都带有加入的动态信息。这些不同的信息储存在一个数据库中，在请求时提取相关信息并发送给Web服务器，以插入动态网页。

需要注意的另一件事情是，为创建动态Web站点，必须在服务器上安装特别的软件。一方面普通的静态HTML文件将以.html这一扩展名保存；而那些除了包含HTML内容，还包含有特别动态代码的文件，将以特殊的扩展名进行保存（如PHP文件通常就具有.php这一文件扩展名）。通过这些特殊的扩展名，Web服务器得知，它们在被发送到客户端之前，需要进行额外的处理（例如从数据库中插入数据等）。

现在有很多动态编程语言可供选择，比如我上面提到的PHP，另外比如Python、Ruby on Rails、 ASP.NET、Coldfusion等。实际上所有这些动态编程语言基本上都具有相同的能力，例如与数据库对话、校验输入表格的信息等，不过它们还是有轻微的差异，有各自的优点和缺点。要问哪种最好，还要哪个最适合你。

在本课程中，我们将不再进一步讲述动态编程语言，不过如果你希望深入了解动态编程语言，我在下面列出了一些可对你有帮助的资源：

• Rails: Fernandez, Obie. (2007), The Rails Way. Addison-Wesley Professional Ruby Series.
• Rails screencasts
• PHP: Powers, David (2006), PHP Solutions: Dynamic web development made easy, friends of ED.
• PHP Online documentation
• ASP.NET: Lorenz, Patrick. (2003). ASP.NET 2.0 Revealed. Apress.
• ASP.NET: online ASP.NET documentation and tutorials.

总结

在本篇文章中，我向大家讲述了互联网是如何工作的。虽然它只是就本课程包含的很多主题泛泛地讲述了一番，但还有很有用的，因为通过将所有这些主题大致梳理一遍，可以看到它们之间是如何联系在一起的，又是如何共同工作的。关于HTML、CSS 和JavaScript，还有很多实际的语法要学习。在下一篇文章中，我们将重点讲述用于Web开发的“Web标准”所包括的几部分，即HTML、CSS 和JavaScript，并讲述一下网页代码。

练习题

• 给出HTML和HTTP的简明定义，并说明二者之间的差别。
• 说明Web浏览器的功能。
• 花5－10分钟上网，试着找出一些不同类型的内容，如纯文本、图像、HTML、动态网页（如PHP 和 .Net网页--.aspx）、PDF、Word文件、Flash电影等。访问其中一些内容，并思考你的计算机是如何显示这些内容的。
• 静态网页和动态网页的差别是什么？
• 找一个HTTP错误代码列表，列出其中5种，并解释每个错误代码的意思。