SlideShare a Scribd company logo
1 of 24
重新认识 Web 开发 ,[object Object],[object Object],[object Object],Promise 2008.09.26
C/S 形式的系统 ,[object Object],[object Object],[object Object]
HTTP 协议 ,[object Object],[object Object],[object Object],[object Object]
客户端发出请求: 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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
实验二: GET ,[object Object],[object Object],[object Object],[object Object]
HTML 语言 ,[object Object],[object Object]
HTML 基本结构 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
浏览器的作用 ,[object Object],[object Object],[object Object]
客户端开发技术 ,[object Object],[object Object],[object Object],[object Object]
DHTML ,[object Object],[object Object],[object Object]
<!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>
AJAX ,[object Object],[object Object],[object Object]
获取 XMLHttpRequest 对象 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
服务器端技术 ,[object Object],[object Object],[object Object]
直白的文件请求 对于第一种情况,比如请求一个静态的 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 &quot;&quot; # Do some Business Logic here # Output html response or others echo &quot;<html><body>Hello World!</body></html>&quot;
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(&quot;<!DOCTYPE HTML PUBLIC amp;quot;-//W3C//DTD HTML 4.0 &quot; + &quot;Transitional//ENamp;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;); } }
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 并未有太大的变化,只是技术的使用手法有所改变,而促使这些改变的,就是全民织网这个概念。围绕这个概念,用户体验之类的技术也会由此而生,从而使得富客户端技术能够飞速发展。

More Related Content

Similar to Re Introduce Web Development

[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
Html5 最重要的部分
Html5 最重要的部分Html5 最重要的部分
Html5 最重要的部分Tom Fan
 
ASP.NET Core 2.1設計新思維與新發展
ASP.NET  Core 2.1設計新思維與新發展ASP.NET  Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展江華 奚
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介peterju
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5 Tony Deng
 
Web server and_cgi
Web server and_cgiWeb server and_cgi
Web server and_cgixu liwei
 
Real World ASP.NET MVC
Real World ASP.NET MVCReal World ASP.NET MVC
Real World ASP.NET MVCjeffz
 
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Gelis Wu
 
PHP & AppServ
PHP & AppServPHP & AppServ
PHP & AppServHt Wang
 
布局原理
布局原理布局原理
布局原理enmaai
 
腾讯大讲堂24 qq show2.0重构历程
腾讯大讲堂24 qq show2.0重构历程腾讯大讲堂24 qq show2.0重构历程
腾讯大讲堂24 qq show2.0重构历程areyouok
 
腾讯大讲堂24 qq show2.0重构历程
腾讯大讲堂24 qq show2.0重构历程腾讯大讲堂24 qq show2.0重构历程
腾讯大讲堂24 qq show2.0重构历程topgeek
 
Ajax应用开发最佳实践
Ajax应用开发最佳实践Ajax应用开发最佳实践
Ajax应用开发最佳实践Fu Cheng
 
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用luolonghao
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScriptSanji Zhang
 

Similar to Re Introduce Web Development (20)

[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
Html5 最重要的部分
Html5 最重要的部分Html5 最重要的部分
Html5 最重要的部分
 
ASP.NET Core 2.1設計新思維與新發展
ASP.NET  Core 2.1設計新思維與新發展ASP.NET  Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5
 
Web server and_cgi
Web server and_cgiWeb server and_cgi
Web server and_cgi
 
Real World ASP.NET MVC
Real World ASP.NET MVCReal World ASP.NET MVC
Real World ASP.NET MVC
 
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
 
Intro to REST
Intro to RESTIntro to REST
Intro to REST
 
Intro to rest
Intro to restIntro to rest
Intro to rest
 
Webrtc
WebrtcWebrtc
Webrtc
 
PHP & AppServ
PHP & AppServPHP & AppServ
PHP & AppServ
 
布局原理
布局原理布局原理
布局原理
 
Ria lqj
Ria lqjRia lqj
Ria lqj
 
腾讯大讲堂24 qq show2.0重构历程
腾讯大讲堂24 qq show2.0重构历程腾讯大讲堂24 qq show2.0重构历程
腾讯大讲堂24 qq show2.0重构历程
 
腾讯大讲堂24 qq show2.0重构历程
腾讯大讲堂24 qq show2.0重构历程腾讯大讲堂24 qq show2.0重构历程
腾讯大讲堂24 qq show2.0重构历程
 
Ajax应用开发最佳实践
Ajax应用开发最佳实践Ajax应用开发最佳实践
Ajax应用开发最佳实践
 
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
 
Html5
Html5Html5
Html5
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScript
 

Re Introduce Web Development

  • 1.
  • 2.
  • 3.
  • 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.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 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.
  • 14.
  • 15.
  • 16. 直白的文件请求 对于第一种情况,比如请求一个静态的 html 文件,就像开头的第一个 HTTP 实验,这样的请求 Web 服务器只要直接返回对应的 html 文件即可,不需要在服务器端进行计算。此时的性能主要也就落在了磁盘 I/O 上面。 第二种情况就是需要服务器端 CPU 计算的技术,典型代表是 CGI , Java Servlet 、 WebService 。
  • 17. CGI CGI(Common Gateway Interface) 是一个标准协议,用来规然信息服务器 ( 一般就是 WebServer) 调用外部应用程序的规则。它规定了如何把服务器信息和请求发送给被调用的应用程序 ( 用变量和环境变量实现 ) ,以及如何返回应用程序的运算结果和其他相关信息 ( 包括 HTTP 的 head 信息等 ) 。 任何符合 CGI 规范的语言都可以用来编写服务器端程序,比如 UNIX/Linux 的各种 Shell(bash 等 ) , Perl , PHP , Python……
  • 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. CGI 的不同实现 CGI 有个缺点,就是启动程序的时候需要创建进程,如果每个请求都创建一个解释器的进程,那么效率将会非常低下,此时可以把解释器做成 Web Server 的一部分,在 Apache 中采用模块方式,比如 mod_python,mod_ruby,mod_php 等,这样每次请求就不必都启动一个解释器的进程,也就提高了执行效率。
  • 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. 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 amp;quot;-//W3C//DTD HTML 4.0 &quot; + &quot;Transitional//ENamp;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. Web Service 这个又是近两年来提出的一个 Hot-Word ,被 W3C 定义为通过网络实现机器间互相操作的软件系统。
  • 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. Web 2.0 杂谈 SNS , Wiki , Blog 这类应用都是在贯彻全民织网这个理念, Web 2.0 技术还是这些技术,但是系统体现的主体性有所改变,从以往的集中式信息发布平台转变为个人用户信息发布平台。所以对于技术人员而言, Web 2.0 和 1.0 并未有太大的变化,只是技术的使用手法有所改变,而促使这些改变的,就是全民织网这个概念。围绕这个概念,用户体验之类的技术也会由此而生,从而使得富客户端技术能够飞速发展。