重新认识 Web 开发 <ul><ul><li>Web 之源 </li></ul></ul><ul><ul><li>客户端和服务器端技术 </li></ul></ul><ul><ul><li>杂谈 Web 2.0 </li></ul></ul>...
C/S 形式的系统 <ul><ul><li>Client/Server 形式的系统,由客户机和主机组成,主机提供各种服务,客户机通过连接主机获取服务。 </li></ul></ul><ul><ul><li>常见的主要有:数据库编程, Socke...
HTTP 协议 <ul><ul><li>HTTP ( Hypertext Transfer Protocol )是由 W3C ( World Wide Web Consortium )和 ITEF ( Internet Engineering ...
客户端发出请求: GET /index.html HTTP/1.1 Host: www.example.com 服务器端的响应如下: HTTP/1.1 200 OK Date: Mon, 23 May 2005 22:38:34 GMT Ser...
实验一: HEAD <ul><ul><li>使用 telnet 模拟客户端发出 Request 获取页面头部信息,也就是 HTTP 里面的 HEAD : </li></ul></ul><ul><ul><li>cmd > telnet www.f...
实验二: GET <ul><ul><li>同样,使用 Telnet 来模拟客户端发出 Request: </li></ul></ul><ul><ul><li>cmd > telnet www.g.cn 80 </li></ul></ul><ul...
HTML 语言 <ul><ul><li>HTML ( HyperText Markup Language )是 W3C 的一个标准,用来规范 Web 交互的语义,也就是 Browser 和 Web Server 之间的语义。 </li></ul...
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><li>我们平时和 Web Sites 交互的时候都是通过浏览器进行图形和文字化的交互,而不必理会 HTML 语言的细节。那是因为浏览器帮我们做了“翻译”的工作。它的工作就是把这些 HTML 语句转化为一个个图形图...
客户端开发技术 <ul><ul><li>这里说的客户端,指的是浏览器,其他自主开发的客户端不在此次讨论范围。 </li></ul></ul><ul><ul><li>目前客户端开发技术主要有: SilverLight(M$) 、 Flash(Ad...
DHTML <ul><ul><li>DHTML , Dynamic HTML ,是利用现有 Web 表现层技术来进行 客户端 开发,其中涉及到 HTML 、 Javascript 、 CSS 、 DOM(Document Object Mode...
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;> <htm...
AJAX <ul><ul><li>进几年来比较热的词, stands for: asynchronous JavaScript and XML. </li></ul></ul><ul><ul><li>同 DHTML 类似, AJAX 也是利用了...
获取 XMLHttpRequest 对象 <ul><ul><li>/* Create a new XMLHttpRequest object to talk to the Web server */ </li></ul></ul><ul><ul...
服务器端技术 <ul><ul><li>服务器端要做的事情: </li></ul></ul><ul><ul><li>如果客户端请求的文件存在在磁盘上,那么就直接返回它; </li></ul></ul><ul><ul><li>如果客户端请求了一个命...
直白的文件请求 对于第一种情况,比如请求一个静态的 html 文件,就像开头的第一个 HTTP 实验,这样的请求 Web 服务器只要直接返回对应的 html 文件即可,不需要在服务器端进行计算。此时的性能主要也就落在了磁盘 I/O 上面。 第二...
CGI CGI(Common Gateway Interface) 是一个标准协议,用来规然信息服务器 ( 一般就是 WebServer) 调用外部应用程序的规则。它规定了如何把服务器信息和请求发送给被调用的应用程序 ( 用变量和环境变量实现 ...
CGI Bash Example #!/bin/sh #One line of HTTP head echo Content-type: text/plain #One line for the Empty Content echo &quot...
CGI 的不同实现 CGI 有个缺点,就是启动程序的时候需要创建进程,如果每个请求都创建一个解释器的进程,那么效率将会非常低下,此时可以把解释器做成 Web Server 的一部分,在 Apache 中采用模块方式,比如 mod_python,...
Java Servlet Java Servlet 是在 Java 平台上的一种服务器端技术,是 Sun 公司开发的一个规范,其中包括了 Servlet 2.3(JSR 53),2.4,2.5(JSR 154) 以及未来的 3.0(JSR 31...
Servlet Example import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import java...
Web Service 这个又是近两年来提出的一个 Hot-Word ,被 W3C 定义为通过网络实现机器间互相操作的软件系统。
Web Service 的实现方式 Web Service 的实现方式按照通信编码来分有三种: XML-RPC 、 SOAP 、 RESTful( 最近出来的 ) 。 XML-RPC 是 Remote Procedure Call ,由特定格式...
Web 2.0 杂谈 SNS , Wiki , Blog 这类应用都是在贯彻全民织网这个理念, Web 2.0 技术还是这些技术,但是系统体现的主体性有所改变,从以往的集中式信息发布平台转变为个人用户信息发布平台。所以对于技术人员而言, Web...
Upcoming SlideShare
Loading in …5
×

Re Introduce Web Development

641
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
641
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 并未有太大的变化,只是技术的使用手法有所改变,而促使这些改变的,就是全民织网这个概念。围绕这个概念,用户体验之类的技术也会由此而生,从而使得富客户端技术能够飞速发展。

×