Embed Size (px)
DESCRIPTION
Citation preview
重新认识Web开发
Web之源客户端和服务器端技术杂谈Web 2.0
Promise2008.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.1Host: 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 80cmd > HEAD / HTTP/1.1 #这里敲打两次回车
服务器返回如下：HTTP/1.1 400 Bad RequestDate: Thu, 25 Sep 2008 15:35:12 GMTServer: Apache/2.0.52 (Trustix Secure Linux/Linux) PHP/4.3.10
Connection: closeContent-Type: text/html; charset=iso-8859-1
实验二： GET
同样，使用 Telnet来模拟客户端发出Request:
cmd > telnet www.g.cn 80cmd > 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 headecho Content-type: text/plain#One line for the Empty Contentecho ""# Do some Business Logic here# Output html response or othersecho "<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 Exampleimport 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\">\n" + "<HTML>\n" + "<HEAD><TITLE>Hello WWW</TITLE></HEAD>\n" + "<BODY>\n" + "<H1>Hello WWW</H1>\n" + "</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并未有太大的变化，只是技术的使用手法有所改变，而促使这些改变的，就是全民织网这个概念。围绕这个概念，用户体验之类的技术也会由此而生，从而使得富客户端技术能够飞速发展。
