Ajax编程技术 第一章 Ajax简介.

Presentation on theme: "Ajax编程技术 第一章 Ajax简介."— Presentation transcript:

1 Ajax编程技术 第一章 Ajax简介

2 1.1 什么是Ajax Ajax：是Asynchronous JavaScript and XML(异步JavaScript 和XML技术)的简称，是一套特殊的Web编程技术，通过这种技术，开发人员可以使用来自服务器的输入无缝地更新部分Web页面或Web应用程序。弥补用了B/S方式开发交互式Web页面的不足。 Ajax只是一套特殊的编程技术，一种编程思想，不是技术规定。 Ajax并不是必须要使用XML技术，也并不是必须要异步 1-2

3 1.2 Ajax技术涉及的相关技术 Ajax技术所涉及的相关技术 XHTML和CSS；
文档对象模型(Document Object Model, DOM)； JavaScript； XML和XSLT； XMLHttpRequest对象。 1-3

4 1.2 Ajax技术涉及的相关技术 XHTML XHTML可扩展标记语言是HTML语言的前任，主要区别是HTML语法不很严格，浏览器负责合理地解释并显示HTML标记中的内容；而XHTML现在遵循严格的XML规则。例如，XML必须是格式良好的，必须正确地打开关闭，必须正确地嵌套： 正确的嵌套： <div> <h1> This is a correct nested H1 tag </h1> </div> 正确的嵌套： <div> <h1> This is an incorrect nested H1 tag </div> </h1> 1-4

5 1.2 Ajax技术涉及的相关技术 CSS CSS层叠式样表，是HTML页面的摸板，用来描述页面中的数据的呈现方式和布局。 1-5

6 1.2 Ajax技术涉及的相关技术 文档对象模型DOM
简单地说，DOM是一种Web页面的层级或树型结构表示。其中页面的每一部分，如图形、文本框、按钮等都通过浏览器模拟。 DOM是W3C( 1-6

7 1.2 Ajax技术涉及的相关技术 JavaScript
JavaScript是一种浏览器脚本语言。必须熟练掌握了这种语言，才能掌握Ajax编程技术。 1-7

8 1.2 Ajax技术涉及的相关技术 XML、XSLT、XPath XML：一种用语描述和结构化数据的语言；
XSLT：一种将XML文档转换为XML其它XML文档的语言，它也可以将HTML或纯文本指定为其他输出格式； XPath：XSLT在实施转换时，使用XPath语言来查询XML文档。XPath查询用来定位原始XML文档的元素。 1-8

9 1.2 Ajax技术涉及的相关技术 XMLHttprequest对象
这是微软中引入的一个ActiveX控件，称为XMLHttp对象，棒定在IE5中。 不久，Mozilla工程师也在Mozilla 1 和 Netscape7创建了相应的东西，即XMLHttpRequest对象。 在IE7中，除了ActiveX控件外，还有一个原本的XMLHttpRequest对象。 在Safari1.2 和Opera中，也包含了此对象。 1-9

10 1.2 Ajax技术涉及的相关技术 XMLHttprequest对象是干什么的？
以前可以用隐藏的框架 iframe 来执行这种任务，但现在XMLHttprequest对象更精通与此道，它允许发送和接收数据。 1-10

11 1.2 Ajax技术涉及的相关技术 XMLHttprequest对象缺点 它还不是标准，单独的方法来创建他们
IE7以前的IE，的创建方法是： var xHRObject = new ActiveXObject(“microsoft.XMLHTTP”); IE7和其他浏览器的创建方法是： var xHRObject = new XMLHttpRequest(); 因此，创建XMLHttpRequest对象时，必须先检测所使用的浏览器是哪种类型。 1-11

12 1.2 Ajax技术涉及的相关技术 通常情况下，浏览器功能检测和对象创建的代码类似如下： var xHRObject = false;
if (window.XMLHttpRequest) // IE7和其它浏览器创建方法 { xHRObject = new XMLHttpRequest(); } else if (window.ActiveXObject) // IE4，IE5，IE6创建方法 { xHRObject = new ActiveXObject("Microsoft.XMLHTTP"); } Else { // Do something else; } 1-12

13 1.3 Ajax应用程序模型 最初，Web只是用来显示HTML文档。当时的应用程序模型为：用户在客户端输入数据，发送页面到服务器，等待响应。
1-13

14 1.3 Ajax应用程序模型 同步：Web上，同步意味着用户请求一个HTML页面，然后浏览器代表用户发送一个HTTP请求给Web服务器。服务器收到请求后进行一些处理，然后将结果以HTML页面返回给发出请求的浏览器。浏览器收到页面后显示出这个页面。 Web服务器 客户机 浏览器 HTTP请求 HTML 页面 HTTP响应 1-14

15

16 1.3 Ajax应用程序模型 浏览器只发出请求，服务器只响应请求。通讯始终是单向的。“请求/响应”周期是同步的，在此期间，用户只能被动等待。
同步存在的问题 性能底下：输入-响应-等待的模式造成时间上的浪费； 只要刷新页面，就会发送一个新的请求给服务器，带来额外的服务器响应负担、更高的带宽消耗。 最根本的问题是，没有提供双向、实时的通信。服务器没有办法发起更新 1-16

17 1.3 Ajax应用程序模型 同步方案下的Web应用程序的问题 浏览器（用户）必须等待服务器的响应； 服务器不能发起更新。 1-17

18 1.3 Ajax应用程序模型 Ajax技术：将“部分屏幕更新”技术引用到Web应用程序模型中。在Ajax应用程序中，只有包含新信息的用户界面元素才会被更新，其余部分页面不变。 这意味着不需要发送全部信息，等待时间也缩短。 1-18

19 1.3 Ajax应用程序模型 什么地方适宜使用Ajax技术 部分页面更新； 不可见的数据检索； 不间断更新； 平滑的界面； 简单丰富的功能；
拖放 1-19

20 1.3 Ajax应用程序模型 什么地方不适宜使用Ajax技术 响应速度慢时，不要用Ajax；
需要使用浏览器的后退按钮时，不要用，因为已经被破坏； 破坏了书签，阻碍了搜索引擎编制索引； 浏览器处理数据的负担加重 1-20

21 1.3 Ajax应用程序模型 使用Ajax的条件 高版本的浏览器，IE4+，Mozilla Firefox/Netscape 7+、Safari和Opera 5+; 不能禁用脚本语言； 不能脱机使用浏览器 1-21