Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Re Introduce Web Development

775 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Re Introduce Web Development

  1. 1. 重新认识 Web 开发 <ul><ul><li>Web 之源 </li></ul></ul><ul><ul><li>客户端和服务器端技术 </li></ul></ul><ul><ul><li>杂谈 Web 2.0 </li></ul></ul>Promise 2008.09.26
  2. 2. C/S 形式的系统 <ul><ul><li>Client/Server 形式的系统,由客户机和主机组成,主机提供各种服务,客户机通过连接主机获取服务。 </li></ul></ul><ul><ul><li>常见的主要有:数据库编程, Socket 编程等,个人认为现在比较热的 B/S ( Browser/Server )结构也是 C/S 结构的一种特殊形式,只是 Client 端应用程序是浏览器。 B/S 带来的好处也是明显的:无须维护客户端应用程序,免去了维护和分发程序的成本。 </li></ul></ul><ul><ul><li>B/S 和 C/S 的本质都是通过 Request - Response 模型来维持两端的通信。 </li></ul></ul>
  3. 3. HTTP 协议 <ul><ul><li>HTTP ( Hypertext Transfer Protocol )是由 W3C ( World Wide Web Consortium )和 ITEF ( Internet Engineering Task Force )共同开发和维护的规范,目前最常用的是 HTTP 1.1 ,也就是 RFC 2616 。 </li></ul></ul><ul><ul><li>HTTP 是一个 Request-Response 规范,上面说过, C/S 结构的系统也是基于 Request-Response 模型,其实 B/S 结构也就是这么出来的, B/S 中的 Browser 就是这么一个客户端,它利用 HTTP 协议来于服务器交互。 </li></ul></ul><ul><ul><li>HTTP 中 Request 的方法有: HEAD , GET , POST , PUT , DELETE , TRACE , OPTIONS , CONNECT ,红色部分是最常见的。 </li></ul></ul><ul><ul><li>客户端和服务器端的一次交互举例: </li></ul></ul>
  4. 4. 客户端发出请求: 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: &quot;3f80f-1b6-3e1cb03b&quot; Accept-Ranges: bytes Content-Length: 438 Connection: close Content-Type: text/html; charset=UTF-8
  5. 5. 实验一: HEAD <ul><ul><li>使用 telnet 模拟客户端发出 Request 获取页面头部信息,也就是 HTTP 里面的 HEAD : </li></ul></ul><ul><ul><li>cmd > telnet www.fudan.edu.cn 80 </li></ul></ul><ul><ul><li>cmd > HEAD / HTTP/1.1 # 这里敲打两次回车 </li></ul></ul><ul><ul><li>服务器返回如下: </li></ul></ul><ul><ul><li>HTTP/1.1 400 Bad Request </li></ul></ul><ul><ul><li>Date: Thu, 25 Sep 2008 15:35:12 GMT </li></ul></ul><ul><ul><li>Server: Apache/2.0.52 (Trustix Secure Linux/Linux) PHP/4.3.10 </li></ul></ul><ul><ul><li>Connection: close </li></ul></ul><ul><ul><li>Content-Type: text/html; charset=iso-8859-1 </li></ul></ul>
  6. 6. 实验二: GET <ul><ul><li>同样,使用 Telnet 来模拟客户端发出 Request: </li></ul></ul><ul><ul><li>cmd > telnet www.g.cn 80 </li></ul></ul><ul><ul><li>cmd > GET webhp </li></ul></ul><ul><ul><li>服务器端就会返回 HTML 代码,也就是 Google 的首页代码。当然,其中不包括图片信息,因为我们的 telnet 只请求了获取一个 HTML 页面,而不是包括了 HTML 页面中图片的所有信息。其中原理就是 Browser 和 HTML 的工作方式。 </li></ul></ul>
  7. 7. HTML 语言 <ul><ul><li>HTML ( HyperText Markup Language )是 W3C 的一个标准,用来规范 Web 交互的语义,也就是 Browser 和 Web Server 之间的语义。 </li></ul></ul><ul><ul><li>HTML 的出现,带来的一个好处就是链接,把一个个网页通过链接集合起来;第二个好处是把图、文、声、影嵌入到了同一个文档中,丰富多彩。 </li></ul></ul>
  8. 8. HTML 基本结构 <ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title>Hello HTML</title> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><span>Hello World!</span> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  9. 9. 浏览器的作用 <ul><ul><li>我们平时和 Web Sites 交互的时候都是通过浏览器进行图形和文字化的交互,而不必理会 HTML 语言的细节。那是因为浏览器帮我们做了“翻译”的工作。它的工作就是把这些 HTML 语句转化为一个个图形图像和文字,也就是我们所说的术语“渲染”。 </li></ul></ul><ul><ul><li>在上面的第二个 HTTP 实验中,如果我们把得到的响应写入到一个文件,比如 test.html ,我们会发现如果用浏览器打开这个 test.html 后只有文字,而没有图片,而且效果也没有直接用浏览器打开 www.g.cn 的效果好看。 </li></ul></ul><ul><ul><li>那是因为浏览器帮助我们做了幕后的工作:下载 HTML 中的图片、声音、视频、 Js 代码、 CSS 代码等文件,并把这些文件结合使用渲染最终效果。 </li></ul></ul>
  10. 10. 客户端开发技术 <ul><ul><li>这里说的客户端,指的是浏览器,其他自主开发的客户端不在此次讨论范围。 </li></ul></ul><ul><ul><li>目前客户端开发技术主要有: SilverLight(M$) 、 Flash(Adobe) 、 Shockwave(Adobe's Director) 、 DHTML 、 AJAX 、 Java Applet 、 JavaFX 。还有一个新发现的东东: Curl ,我也没听说过,有时间可以研究下 :)‏ </li></ul></ul><ul><ul><li>SilverLight 是一个浏览器插件,可以使用 .NET 框架对其进行编程,微软战略产品。 </li></ul></ul><ul><ul><li>JavaFX 是 Sun 公司的战略性产品,出来不久,没用过,暂时不做评价。 </li></ul></ul>
  11. 11. DHTML <ul><ul><li>DHTML , Dynamic HTML ,是利用现有 Web 表现层技术来进行 客户端 开发,其中涉及到 HTML 、 Javascript 、 CSS 、 DOM(Document Object Model) 相关技术。 </li></ul></ul><ul><ul><li>DHTML 相比 HTML ,具有更友好的用户界面,可以使得用户的操作更加便捷,如果说 HTML 是实现了 B/S 的可行性,那么 DHTML 则是提高了 B/S 的可用性。 </li></ul></ul><ul><ul><li>给出一个例子: </li></ul></ul>
  12. 12. <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>DHTML example</title> <script type=&quot;text/javascript&quot;> function init() { myObj = document.getElementById(&quot;navigation&quot;); // .... more code]] } window.onload=init; </script> </head> <body> <div id=&quot;navigation&quot;></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=&quot;text/javascript&quot; src=&quot;myjavascript.js&quot;></script> </body> </html>
  13. 13. AJAX <ul><ul><li>进几年来比较热的词, stands for: asynchronous JavaScript and XML. </li></ul></ul><ul><ul><li>同 DHTML 类似, AJAX 也是利用了一些现有的 Web 技术,从而提高了 Web 的可用性。 </li></ul></ul><ul><ul><li>AJAX 的主要思想就是把用户操作和获取响应异步,使得用户不需要时刻等待数据传送而可以继续操作。在 Javascript 编程实现中最主要的是 XMLHttpRequest 对象,此对象根据浏览器不同而具有不同的实现,就连有些同厂商的浏览器也会因为版本不同而具有不同 XMLHttpRequest 对象的实现,所以获取的时候需要判断浏览器类型。 </li></ul></ul>
  14. 14. 获取 XMLHttpRequest 对象 <ul><ul><li>/* Create a new XMLHttpRequest object to talk to the Web server */ </li></ul></ul><ul><ul><li>var xmlHttp = false; </li></ul></ul><ul><ul><li>try { </li></ul></ul><ul><ul><li>xmlHttp = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); </li></ul></ul><ul><ul><li>} catch (e) { </li></ul></ul><ul><ul><li>try { </li></ul></ul><ul><ul><li>xmlHttp = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); </li></ul></ul><ul><ul><li>} catch (e2) { </li></ul></ul><ul><ul><li>xmlHttp = false; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { </li></ul></ul><ul><ul><li>xmlHttp = new XMLHttpRequest(); </li></ul></ul><ul><ul><li>} </li></ul></ul>
  15. 15. 服务器端技术 <ul><ul><li>服务器端要做的事情: </li></ul></ul><ul><ul><li>如果客户端请求的文件存在在磁盘上,那么就直接返回它; </li></ul></ul><ul><ul><li>如果客户端请求了一个命令程序,并且给定了参数,那么就执行那个程序,并返回运行结果。 </li></ul></ul>
  16. 16. 直白的文件请求 对于第一种情况,比如请求一个静态的 html 文件,就像开头的第一个 HTTP 实验,这样的请求 Web 服务器只要直接返回对应的 html 文件即可,不需要在服务器端进行计算。此时的性能主要也就落在了磁盘 I/O 上面。 第二种情况就是需要服务器端 CPU 计算的技术,典型代表是 CGI , Java Servlet 、 WebService 。
  17. 17. CGI CGI(Common Gateway Interface) 是一个标准协议,用来规然信息服务器 ( 一般就是 WebServer) 调用外部应用程序的规则。它规定了如何把服务器信息和请求发送给被调用的应用程序 ( 用变量和环境变量实现 ) ,以及如何返回应用程序的运算结果和其他相关信息 ( 包括 HTTP 的 head 信息等 ) 。 任何符合 CGI 规范的语言都可以用来编写服务器端程序,比如 UNIX/Linux 的各种 Shell(bash 等 ) , Perl , PHP , Python……
  18. 18. CGI Bash Example #!/bin/sh #One line of HTTP head echo Content-type: text/plain #One line for the Empty Content echo &quot;&quot; # Do some Business Logic here # Output html response or others echo &quot;<html><body>Hello World!</body></html>&quot;
  19. 19. CGI 的不同实现 CGI 有个缺点,就是启动程序的时候需要创建进程,如果每个请求都创建一个解释器的进程,那么效率将会非常低下,此时可以把解释器做成 Web Server 的一部分,在 Apache 中采用模块方式,比如 mod_python,mod_ruby,mod_php 等,这样每次请求就不必都启动一个解释器的进程,也就提高了执行效率。
  20. 20. 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 的模式开发应用系统。
  21. 21. 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(&quot;<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 &quot; + &quot;Transitional//EN&quot;> &quot; + &quot;<HTML> &quot; + &quot;<HEAD><TITLE>Hello WWW</TITLE></HEAD> &quot; + &quot;<BODY> &quot; + &quot;<H1>Hello WWW</H1> &quot; + &quot;</BODY></HTML>&quot;); } }
  22. 22. Web Service 这个又是近两年来提出的一个 Hot-Word ,被 W3C 定义为通过网络实现机器间互相操作的软件系统。
  23. 23. 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 。
  24. 24. Web 2.0 杂谈 SNS , Wiki , Blog 这类应用都是在贯彻全民织网这个理念, Web 2.0 技术还是这些技术,但是系统体现的主体性有所改变,从以往的集中式信息发布平台转变为个人用户信息发布平台。所以对于技术人员而言, Web 2.0 和 1.0 并未有太大的变化,只是技术的使用手法有所改变,而促使这些改变的,就是全民织网这个概念。围绕这个概念,用户体验之类的技术也会由此而生,从而使得富客户端技术能够飞速发展。

×