Re Introduce Web Development

重新认识 Web 开发

Web 之源

客户端和服务器端技术

杂谈 Web 2.0

Promise 2008.09.26

C/S 形式的系统

Client/Server 形式的系统，由客户机和主机组成，主机提供各种服务，客户机通过连接主机获取服务。

常见的主要有：数据库编程， Socket 编程等，个人认为现在比较热的 B/S （ Browser/Server ）结构也是 C/S 结构的一种特殊形式，只是 Client 端应用程序是浏览器。 B/S 带来的好处也是明显的：无须维护客户端应用程序，免去了维护和分发程序的成本。

B/S 和 C/S 的本质都是通过 Request － Response 模型来维持两端的通信。

HTTP 协议

HTTP （ Hypertext Transfer Protocol ）是由 W3C （ World Wide Web Consortium ）和 ITEF （ Internet Engineering Task Force ）共同开发和维护的规范，目前最常用的是 HTTP 1.1 ，也就是 RFC 2616 。

HTTP 是一个 Request-Response 规范，上面说过， C/S 结构的系统也是基于 Request-Response 模型，其实 B/S 结构也就是这么出来的， B/S 中的 Browser 就是这么一个客户端，它利用 HTTP 协议来于服务器交互。

HTTP 中 Request 的方法有： HEAD ， GET ， POST ， PUT ， DELETE ， TRACE ， OPTIONS ， CONNECT ，红色部分是最常见的。

客户端和服务器端的一次交互举例：

客户端发出请求： GET /index.html HTTP/1.1 Host: www.example.com 服务器端的响应如下： HTTP/1.1 200 OK Date: Mon, 23 May 2005 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)‏ Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT Etag: "3f80f-1b6-3e1cb03b" Accept-Ranges: bytes Content-Length: 438 Connection: close Content-Type: text/html; charset=UTF-8

实验一： HEAD

使用 telnet 模拟客户端发出 Request 获取页面头部信息，也就是 HTTP 里面的 HEAD ：

cmd > telnet www.fudan.edu.cn 80

cmd > HEAD / HTTP/1.1 # 这里敲打两次回车

服务器返回如下：

HTTP/1.1 400 Bad Request

Date: Thu, 25 Sep 2008 15:35:12 GMT

Server: Apache/2.0.52 (Trustix Secure Linux/Linux) PHP/4.3.10

Connection: close

Content-Type: text/html; charset=iso-8859-1

实验二： GET

同样，使用 Telnet 来模拟客户端发出 Request:

cmd > telnet www.g.cn 80

cmd > GET webhp

服务器端就会返回 HTML 代码，也就是 Google 的首页代码。当然，其中不包括图片信息，因为我们的 telnet 只请求了获取一个 HTML 页面，而不是包括了 HTML 页面中图片的所有信息。其中原理就是 Browser 和 HTML 的工作方式。

HTML 语言

HTML （ HyperText Markup Language ）是 W3C 的一个标准，用来规范 Web 交互的语义，也就是 Browser 和 Web Server 之间的语义。

HTML 的出现，带来的一个好处就是链接，把一个个网页通过链接集合起来；第二个好处是把图、文、声、影嵌入到了同一个文档中，丰富多彩。

HTML 基本结构

<html>

<head>

<title>Hello HTML</title>

</head>

<body>

<span>Hello World!</span>

</body>

</html>

浏览器的作用

我们平时和 Web Sites 交互的时候都是通过浏览器进行图形和文字化的交互，而不必理会 HTML 语言的细节。那是因为浏览器帮我们做了“翻译”的工作。它的工作就是把这些 HTML 语句转化为一个个图形图像和文字，也就是我们所说的术语“渲染”。

在上面的第二个 HTTP 实验中，如果我们把得到的响应写入到一个文件，比如 test.html ，我们会发现如果用浏览器打开这个 test.html 后只有文字，而没有图片，而且效果也没有直接用浏览器打开 www.g.cn 的效果好看。

那是因为浏览器帮助我们做了幕后的工作：下载 HTML 中的图片、声音、视频、 Js 代码、 CSS 代码等文件，并把这些文件结合使用渲染最终效果。

客户端开发技术

这里说的客户端，指的是浏览器，其他自主开发的客户端不在此次讨论范围。

目前客户端开发技术主要有： SilverLight(M$) 、 Flash(Adobe) 、 Shockwave(Adobe's Director) 、 DHTML 、 AJAX 、 Java Applet 、 JavaFX 。还有一个新发现的东东： Curl ，我也没听说过，有时间可以研究下 :)‏

SilverLight 是一个浏览器插件，可以使用 .NET 框架对其进行编程，微软战略产品。

JavaFX 是 Sun 公司的战略性产品，出来不久，没用过，暂时不做评价。

DHTML

DHTML ， Dynamic HTML ，是利用现有 Web 表现层技术来进行客户端开发，其中涉及到 HTML 、 Javascript 、 CSS 、 DOM(Document Object Model) 相关技术。

DHTML 相比 HTML ，具有更友好的用户界面，可以使得用户的操作更加便捷，如果说 HTML 是实现了 B/S 的可行性，那么 DHTML 则是提高了 B/S 的可用性。

给出一个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DHTML example</title> <script type="text/javascript"> function init() { myObj = document.getElementById("navigation"); // .... more code]] } window.onload=init; </script> </head> <body> <div id="navigation"></div> <pre> Often the code is stored in an external file; this is done by linking the file that contains the JavaScript. This is helpful when several pages use the same script: </pre> <script type="text/javascript" src="myjavascript.js"></script> </body> </html>

AJAX

进几年来比较热的词， stands for: asynchronous JavaScript and XML.

同 DHTML 类似， AJAX 也是利用了一些现有的 Web 技术，从而提高了 Web 的可用性。

AJAX 的主要思想就是把用户操作和获取响应异步，使得用户不需要时刻等待数据传送而可以继续操作。在 Javascript 编程实现中最主要的是 XMLHttpRequest 对象，此对象根据浏览器不同而具有不同的实现，就连有些同厂商的浏览器也会因为版本不同而具有不同 XMLHttpRequest 对象的实现，所以获取的时候需要判断浏览器类型。

获取 XMLHttpRequest 对象

/* Create a new XMLHttpRequest object to talk to the Web server */

var xmlHttp = false;

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

xmlHttp = false;

}

}

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {

xmlHttp = new XMLHttpRequest();

}

服务器端技术

服务器端要做的事情：

如果客户端请求的文件存在在磁盘上，那么就直接返回它；

如果客户端请求了一个命令程序，并且给定了参数，那么就执行那个程序，并返回运行结果。

直白的文件请求对于第一种情况，比如请求一个静态的 html 文件，就像开头的第一个 HTTP 实验，这样的请求 Web 服务器只要直接返回对应的 html 文件即可，不需要在服务器端进行计算。此时的性能主要也就落在了磁盘 I/O 上面。第二种情况就是需要服务器端 CPU 计算的技术，典型代表是 CGI ， Java Servlet 、 WebService 。

CGI CGI(Common Gateway Interface) 是一个标准协议，用来规然信息服务器 ( 一般就是 WebServer) 调用外部应用程序的规则。它规定了如何把服务器信息和请求发送给被调用的应用程序 ( 用变量和环境变量实现 ) ，以及如何返回应用程序的运算结果和其他相关信息 ( 包括 HTTP 的 head 信息等 ) 。任何符合 CGI 规范的语言都可以用来编写服务器端程序，比如 UNIX/Linux 的各种 Shell(bash 等 ) ， Perl ， PHP ， Python……

CGI Bash Example #!/bin/sh #One line of HTTP head echo Content-type: text/plain #One line for the Empty Content echo "" # Do some Business Logic here # Output html response or others echo "<html><body>Hello World!</body></html>"

CGI 的不同实现 CGI 有个缺点，就是启动程序的时候需要创建进程，如果每个请求都创建一个解释器的进程，那么效率将会非常低下，此时可以把解释器做成 Web Server 的一部分，在 Apache 中采用模块方式，比如 mod_python,mod_ruby,mod_php 等，这样每次请求就不必都启动一个解释器的进程，也就提高了执行效率。

Java Servlet Java Servlet 是在 Java 平台上的一种服务器端技术，是 Sun 公司开发的一个规范，其中包括了 Servlet 2.3(JSR 53),2.4,2.5(JSR 154) 以及未来的 3.0(JSR 315) 。由于 Java 的平台无关性，所以 Servlet 具有天生的夸平台特性 WriteOnce-Run Everywhere 。 Servlet 需要在对应的容器中部署，由容器掌管它的生命周期。 JSP 技术也是基于 Servlet 的，不过是另外一套规范，为开发者提供了更友好的开发模式，一般都是结合 Servlet 一起使用，以 MVC2 的模式开发应用系统。

Servlet Example import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)‏ throws ServletException, IOException { PrintWriter out = response.getWriter(); out.println("<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 " + "Transitional//EN"> " + "<HTML> " + "<HEAD><TITLE>Hello WWW</TITLE></HEAD> " + "<BODY> " + "<H1>Hello WWW</H1> " + "</BODY></HTML>"); } }

Web Service 这个又是近两年来提出的一个 Hot-Word ，被 W3C 定义为通过网络实现机器间互相操作的软件系统。

Web Service 的实现方式 Web Service 的实现方式按照通信编码来分有三种： XML-RPC 、 SOAP 、 RESTful( 最近出来的 ) 。 XML-RPC 是 Remote Procedure Call ，由特定格式的 XML 描述，比如 WSDL 格式。 SOAP 是基于 SOAP 协议的 Web Service ，也就是 Simple Object Access Protocal 协议。 RESTful(Representational state transfer ) 是充分利用了 HTTP 协议 (GET,PUT,DELETE...) 实现 Web Service 。

Web 2.0 杂谈 SNS ， Wiki ， Blog 这类应用都是在贯彻全民织网这个理念， Web 2.0 技术还是这些技术，但是系统体现的主体性有所改变，从以往的集中式信息发布平台转变为个人用户信息发布平台。所以对于技术人员而言， Web 2.0 和 1.0 并未有太大的变化，只是技术的使用手法有所改变，而促使这些改变的，就是全民织网这个概念。围绕这个概念，用户体验之类的技术也会由此而生，从而使得富客户端技术能够飞速发展。