Ajax软件开发技术ch1.ppt

Ajax软件开发技术,课程纲要,授课方式 授课教材：Ajax基础教程 理论课时：34学时 试验课时：16学时 考核方式 平时上课考勤及上机实验作业 40% 期末考试笔试 60%,AJAX参考书籍,JavaScript Professional Projects,DHTML手册.chm,AJAX参考书籍,DOM文档对象中文手册.chm,AJAX参考书籍,CSS中文手册.chm,AJAX参考书籍,AJAX For DUMMIES（AJAX傻瓜教程）：,本书编排和版面设计上比较有特色。内容上即介绍了AJAX的基本知识，也介绍了AJAX的一些框架。比较有特色的部分是给出了AJAX开发的十个需要了解的问题以及一些有用的AJAX资源。,AJAX参考书籍,AJAX In Action（AJAX实战）：,国内已有此书的翻译版本。一本将近700页的AJAX图书，和其他AJAX图书相比分量很重，介绍内容非常广泛。可以作为一本AJAX的参考书。书中最后介绍了目前几乎所有的AJAX浏览器及服务器端框架，对于大家选择AJAX框架有一定的帮助。,AJAX参考书籍,这两本书也是国外的作品。 AJAX Design Patterns这本书网上评价也很好，属于中高级的AJAX书籍。 Head Rush AJAX属于Head Rush系列书中的一套，根据以前看过的Head Rush Java来看，Head Rush系列书编排非常有特色，里面有大量的插图和手写文字，内容上比较浅显易懂，作为趣味入门书是个不错的选择。,Ajax软件开发技术,第一章 AJAX 简介,本章内容,Web简介 Ajax概述 Ajax相关技术 Ajax工作原理 Ajax体验,目标,了解Web发展历史 了解Web2.0概念 掌握Ajax技术的概念 掌握Ajax的相关技术 理解Ajax的工作原理及基本原则 了解Ajax的优势以及特征,本章内容,Web简介 Ajax概述 Ajax相关技术 Ajax工作原理 Ajax体验,Web发展史,1990年11月，第一个Web服务器nxoc01.cern.ch开始运行 1991年，正式发布Web技术标准 W3C组织（World Wide Web Consortinum）,Web2.0简介,Web2.0 是相对Web1.0 的新的一类互联网应用的统称。 随着Web2.0的出现，互联网进入了一个更加开放、交互性更强、由用户决定内容并参与共同建设的可读写的网络阶段 Web2.0本身并没有特别明确的标准来进行描述，一般将促成这个阶段的各种技术和相关的产品服务统称为Web2.0,Web2.0简介,传统的Web应用解决方案，将所有操作都集成在服务器端进行，客户端所做的工作只是简单的网页显示。- 胖服务器端和瘦客户端。 Ajax技术的出现，改变了传统Web开发的模式。通过Ajax技术，可以将大量的服务器端工作移植到客户端完成。,本章内容,Web简介 Ajax概述 Ajax相关技术 Ajax工作原理 Ajax体验,Ajax技术概念,Jesse James Garrett 2005年的2月 Ajax: A New Approach to Web Applications XML,A J A X,synchronous,avaScript,nd,ML,Ajax技术概念,Ajax是Web2.0阶段系列技术和相关产品服务中非常重要的一种技术 Ajax (Asynchronous JavaScript and XML)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起。,Ajax技术概念,(1)使用XHTML和CSS的基于标准的表示技术 (2)使用DOM进行动态显示和交互 (3)使用XML和XSLT进行数据交换和处理 (4)使用XMLHttpRequest进行异步数据检索 (5)使用Javascript将以上技术融合在一起,老技术，新思想,Ajax技术概念,本章内容,Web简介 Ajax概述 Ajax相关技术 Ajax工作原理 Ajax体验,XHTML和CSS,XHTML可扩展超文本标记语言 结合了XML中部分强大功能及HTML中的大部分简单特性 设计上显得更严密，可以很自然地实现从HTML到XML的转换 CSS 层叠样式表 弥补HTML在格式修饰中的不足 可以动态控制页面元素的位置、色彩等,DOM,DOM（文档对象模型）是以层次结构组织的节点或信息的集合 DOM是基于树或基于对象的，开发人员在这个结构树中导航寻找特定信息 DOM提供了一个API，允许开发人员添加、编辑、移动或删除树中任意位置的节点，从而创建一个应用程序,XML和XSTL,XML可扩展标记语言 XML允许开发人员自行创建需要的标签 数据存储格式不受显示格式的制约 被广泛运用在软件系统的配置文件中，也日益成为因特网上的标准数据存储格式和交换格式 XSTL可扩展的样式表转换语言 主要功能是将XML转换为HTML,XMLHttpRequest,是Ajax技术中最重要的一个对象，JavaScript脚本通过它和服务器进行通信 在不刷新页面的情况下，通过XMLHttpRequest发送异步请求及获取服务器端的响应数据,JavaScript,一种可以与HTML混合使用的脚本语言 可以在浏览器的支持下跨平台运行 可以调用浏览器及Ajax提供的相关对象，利用这些对象实现页面效果的动态控制,Ajax技术应用,GOOGLE,Ajax技术应用,GOOGLE,Ajax技术应用,Microsoft Yahoo！ Amazone Baidu 163 Sina Sohu 。,本章内容,Web简介 Ajax概述 Ajax相关技术 Ajax工作原理 Ajax体验,Ajax工作原理,Ajax关注的两个问题 借助异步JavaScript实现浏览器和服务器之间的异步交互 对XML文档的解析和处理 Ajax提供了非常方便的客户端处理方式，为在Web应用中实现更加丰富的交互效果奠定了基础,Ajax工作原理,(1)改善表单验证方式，不再需要打开新页面，也不再需要将整个页面数据提交 (2)不需刷新页面就可改变页面内容，减少用户等待时间 。 (3)按需获取数据，每次只从服务器端获取需要的数据 。 (4)读取外部数据，进行数据处理整合 。 (5)异步与服务器进行交互，在交互过程中用户无需等待，仍可继续操作,传统Web应用与Ajax应用的比较,传统Web应用解决方案,在传统的Web应用模型下，大部分的用户操作都会发送一个HTTP请求给服务器，然后服务器开始处理（接收数据，执行业务逻辑，访问数据库等），最后向浏览器返回HTML页面。当服务器处理请求时，用户能够做什么呢？只有等待！,传统Web应用解决方案,在传统的Web应用模型下，客户机 （浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，客户机等待服务器的响应。当客户机等待的时候，会用某种形式通知您正在处理： 沙漏（特别是 Windows 上） 旋转皮球（通常在 Mac 机器上） 应用程序基本上冻结了，然后过一段时间光标变化了 这正是传统Web 应用程序让人感到笨拙或缓慢的原因 缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长。,Ajax解决方案,Ajax应用通过在用户和服务器之间引入一个媒介（Ajax engine）来异步发送请求，消除了传统的发送请求等待发送请求等待的特性，极大的提高了用户体验。,Ajax解决方案,异步请求不等待服务器响应。发送请求后应用程序继续运行。用户仍然可以在Web表单中输入数据，甚至离开表单。没有旋转的皮球或者沙漏，应用程序也没有明显的冻结。服务器悄悄地响应请求，完成后告诉原来的请求者工作已经结束。结果是，应用程序感觉不那么迟钝或者缓慢，而是响应迅速、交互性强，感觉快多了。,Ajax解决方案,Ajax相当于在浏览器客户端与服务器之间架设了一个桥梁 Ajax相关的一个重要对象是XMLHttpRequest Ajax使用XMLHttpRequest对象发送请求并获得服务器端的响应，同时Ajax可以在不重新载入整个页面的情况下用JavaScript操作DOM以实现最终更新页面,Ajax解决方案的优势,基于公开的标准 部分页面更新 不间断更新 跨平台跨浏览器的兼容性 高采用率 技术独立性,Ajax的缺点,不尽人意的响应速度 破环浏览器上的后退按钮 破环书签和阻碍搜索引擎编制索引 浏览器不堪重负,本章内容,Web简介 Ajax概述 Ajax相关技术 Ajax工作原理 Ajax体验,Ajax体验,案例：Web登录身份验证 开发环境 JDK 6.0 Eclipse 3.2 MyEclipse 6.6 Tomcat 6.0,传统Web登录验证,login.jsp,Servlet,提交请求,返回响应,页面在刷新 并且被堵塞,Ajax的实现方式,采用了异步交互方式，在显示验证结果的提示信息时没有页面刷新,Ajax方式实现时间显示窗口,小结,Web2.0代表的是一个新的网络阶段，促成这个阶段的各种技术和相关的产品服务统称为Web2.0。 Ajax是Web2.0阶段非常重要的一种技术。 Ajax 应用程序所用到的技术包括：XHTML和CSS 、JavaScript脚本、DOM、XML和XSTL，XMLHttpRe