web应用开发【ppt】

1HTML•HTML是什么•超文本标记语言（HypertextMarkupLanguage）•基本文本格式•简易可扩展•平台无关•HTML版本•HTML4•浏览器兼容性•HTML52HTML•CSS•层叠样式表（CascadingStyleSheets）•精确定位和布局•增强HTML页面的表现力示例：linkhref=/css/Mystyles.cssrel=stylesheettype=text/css/styletype=text/cssbody{background:grey;}/style3HTML•DOM•文档对象模型（DocumentObjectModel）•动态修改网页结构•改善页面交互性•与平台无关4HTML•JavaScript•网页脚本语言•动态操作网页元素•改善用户界面•有安全限制•兼容性问题•基于DOM模型5AJAX•AJAX是什么•超文本标记语言AJAX即“AsynchronousJavaScriptandXML”（异步JavaScript和XML)，AJAX并非缩写词，而是由JesseJamesGaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。•AJAX是一种独立于Web服务器软件的浏览器技术。•Ajax的核心是JavaScript对象XmlHttpRequest。该对象在InternetExplorer5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。6AJAX是多种技术组合AJAX并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。1.使用CSS和XHTML来表示。2.使用DOM模型来交互和动态显示。3.使用XMLHttpRequest来和服务器进行异步通信。4.使用javascript来绑定和调用。在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。7AJAX应用意义•AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。•通过AJAX，您的JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象，您的JavaScript可在不重载页面的情况与Web服务器交换数据。•AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。•AJAX可使因特网应用程序更小、更快，更友好。8AJAX.JS简介1functionAjax(){this.nameArray=newArray(0);this.valueArray=newArray(0);this.xmlHttp;this.method=GET;this.url;this.asyn=true;this.callback;this.extraArray=newArray();}Ajax.prototype.setParameter=function(a,b){this.nameArray.push(a);this.valueArray.push(b);}Ajax.prototype.setCallback=function(a){this.callback=a;}9AJAX.JS简介2Ajax.prototype.setMethod=function(a){this.method=a;}Ajax.prototype.setUrl=function(a){this.url=a;}Ajax.prototype.setAsyn=function(a){this.asyn=a;}Ajax.prototype.sendRequest=function(){...........}10HTML5•HTML5是什么•HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本•广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-basedrichinternetapplication，RIA)，如AdobeFlash、MicrosoftSilverlight，与OracleJavaFX的需求，并且提供更多能有效增强网络应用的标准集•强化了Web网页的表现性能•追加了本地数据库等Web应用的功能•仍处于发展阶段,但大部分浏览器已经支持某些HTML5技术11HTML5优点•提高可用性和改进用户的友好体验•自适应网页设计，解决了传统的一种局面——网站为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/iPad版本•有几个新的标签，这将有助于开发人员定义重要的内容•可以给站点带来更多的多媒体元素(视频和音频)•可以很好的替代FLASH和Silverlight•当涉及到网站的抓取和索引的时候，对于SEO很友好•将被大量应用于移动应用程序和游戏12HTML5发展趋势•HTML5规范开发完成时，将成为主流。•据统计2013年全球将有10亿手机浏览器支持HTML5，同时HTMLWeb开发者数量将达到200万。毫无疑问，HTML5将成为未来5-10年内，移动互联网领域的主宰者。•据IDC的调查报告统计，截至2012年5月，有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。•2012年12月，万维网联盟宣布已经完成对HTML5标准以及Canvas2D性能草案的制定，这就意味着开发人员将会有一个稳定的“计划和实施”目标。有很多的文章都在号召使用HTML5，并大力宣传它的的好处。此前，站长之家曾经做过一期调查，调查显示只有36.16%的站长正在学习中，另外的63.76%表示正在观望中。•从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。第一，从用户可读性上说，原先一大堆东西，像初学者第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。13支持HTML5的浏览器•支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。14WEB应用•Web客户端•浏览器•移动程序•桌面程序•Web组件•Servlet•JSP页面•Web服务端点15WEB服务器•部署Web应用（Web容器）•请求调度•安全性•并发性•生命周期管理•命名JNDI等•Weblogic、Websphere、Tomcat、JBoss16WEB模块17WEB模块•上下文根（contextroot）：标识Web应用，在部署Web模块时指定。必须以/作为开始，并以一个字符串作为结束。•Web.xml：Web应用部署描述符。包含Servlet、过滤器或监听器等配置。•*.tld：标签库描述符文件。•classes：包含服务器端类及程序包目录：Servlet、工具类和JavaBeans组件。•tag：包含标签文件的目录，这些标签文件是标签库的实现。•lib：包含由服务器端类所调用库的jar文件。•可全部打包为.war文件。•同一个Web模块在不同的Web服务器上部署方法并不一样。18Servlet•动态处理请求和构建响应•适合面向服务的应用的服务端点•适合面向表示的应用的控制功能•是所有JavaWeb应用技术的基础19Servlet生命周期•所有的Servlet必须实现Servlet接口（定义了生命周期方法）。•GenericServlet类：service()方法•HttpServlet类：doGet()、doPost()…方法•Servlet的加载：–某个请求被映射到某个Servlet。–如果该Servlet的实例不存在，则创建一个实例。–调用init方法来初始化Servlet实例。–调用service方法，传递请求和响应对象。•并发性：同一个Servlet实例同时响应多个请求。20Servlet处理过程以HttpServlet.doPost()为例：1.从HttpServletRequest请求对象获取请求参数。Stringparam=request.getParameter(param);2.执行业务处理。3.从HttpServletResponse响应对象获取一个输出流。PrintWriterout=response.getWriter();4.以HTML格式输出业务处理结果。out.println(“html……/html”);HttpServletResponse响应对象可以通过HTTP响应头给客户端浏览器设置Cookie。21Servlet地位在MVC架构中，处理C端，即控制端。MVC是一个框架模式，它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型、视图、控制器。它们各自处理自己的任务。最典型的MVC就是JSP+servlet+javabean的模式。22MVC简介视图视图是用户看到并与之交互的界面。对老式的Web应用程序来说，视图就是由HTML元素组成的界面，在新式的Web应用程序中，HTML依旧在视图中扮演着重要的角色，但一些新的技术已层出不穷，它们包括AdobeFlash和像XHTML，XML/XSL，WML等一些标识语言和Webservices.MVC好处是它能为应用程序处理很多不同的视图。在视图中其实没有真正的处理发生，不管这些数据是联机存储的还是一个雇员列表，作为视图来讲，它只是作为一种输出数据并允许用户操纵的方式。[6]模型模型表示企业数据和业务规则。在MVC的三个部件中，模型拥有最多的处理任务。例如它可能用像EJBs和ColdFusionComponents这样的构件对象来处理数据库，被模型返回的数据是中立的，就是说模型与数据格式无关，这样一个模型能为多个视图提供数据，由于应用于模型的代码只需写一次就可以被多个视图重用，所以减少了代码的重复性。[6]控制器控制器接受用户的输入并调用模型和视图去完成用户的需求，所以当单击Web页面中的超链接和发送HTML表单时，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。23MVC优劣•优点•耦合性低•重用性高•生命周期成本低•部署快•可维护性高•有利软件工程化管理24MVC优劣•缺点•没有明确的定义•不适合小型，中等规模的应用程序•增加系统结构和实现的复杂性•视图与控制器间的过于紧密的连接•视图对模型数据的低效率访问•一般高级的界面工具或构造器不支持模式25过滤器过滤器（Filter）是一种可以对请求或响应的报头和主体内容进行转换的对象。本身通常不负责创建响应，但可以提供“附加”到任何Web资源的功能。主要功能：•查询请求并进行相应的操作。•阻塞请求－响应对，使其不能进一步被传递。•修改其请求报头和数据。•修改响应报头和数据。•和外部资源进行交互。过滤器链由零个、一个或多个按照特定顺序的过滤器组成。26过滤器常见用途：认证、审计、转码、压缩、加密等。过滤器由容器进行实例化、初始化和销毁。Web容器使用过滤器映射来决定如何将过滤器应用到Web资源。过滤器映射通过名称将过滤器与Web组件相匹配，或者是通过URL模式将过滤器与Web资源相匹配。过滤器映射在web.xml中进行定义。用户可将过滤器映射到一个或多个Web资源中，并且可以将多个过滤器映射到一