《Ajax编程技术第一章Ajax简介》由会员分享，可在线阅读，更多相关《Ajax编程技术第一章Ajax简介（21页珍藏版）》请在金锄头文库上搜索。
1、主讲教师：李艺主讲教师：李艺主讲教师：李艺主讲教师：李艺Ajax编程技术第一章Ajax简介中国科大Ajax编程技术1.1 什么是AjaxpAjax：是：是Asynchronous JavaScript and XML(异步异步JavaScript 和和XML技术技术)的简称，是一套特殊的的简称，是一套特殊的Web编编程技术，通过这种技术，开发人员可以使用来自服务器程技术，通过这种技术，开发人员可以使用来自服务器的输入无缝地更新部分的输入无缝地更新部分Web页面或页面或Web应用程序。弥补应用程序。弥补用了用了B/S方式开发交互式方式开发交互式Web页面的不足。页面的不足。pAjax只是一套特殊
2、的编程技术，一种编程思想，不是技只是一套特殊的编程技术，一种编程思想，不是技术规定。术规定。pAjax并不是必须要使用并不是必须要使用XML技术，也并不是必须要异步技术，也并不是必须要异步1- 中国科大Ajax编程技术1.2 Ajax技术涉及的相关技术pAjax技术所涉及的相关技术技术所涉及的相关技术nXHTML和和CSS；n文档对象模型文档对象模型(Document Object Model, DOM)；nJavaScript；nXML和和XSLT；nXMLHttpRequest对象。对象。1- 中国科大Ajax编程技术1.2 Ajax技术涉及的相关技术pXHTMLXHTML可扩展标记语言是
3、可扩展标记语言是HTML语言的前任，主要语言的前任，主要区别是区别是HTML语法不很严格，浏览器负责合理地解释并语法不很严格，浏览器负责合理地解释并显示显示HTML标记中的内容；而标记中的内容；而XHTML现在遵循严格的现在遵循严格的XML规则。例如，规则。例如，XML必须是格式良好的，必须正确地必须是格式良好的，必须正确地打开关闭，必须正确地嵌套：打开关闭，必须正确地嵌套：正确的嵌套： This is a correct nested H1 tag正确的嵌套： This is an incorrect nested H1 tag1- 中国科大Ajax编程技术1.2 Ajax技术涉及的相关技术
4、pCSSCSS层叠式样表，是层叠式样表，是HTML页面的摸板，用来描述页面的摸板，用来描述页面中的数据的呈现方式和布局。页面中的数据的呈现方式和布局。1- 中国科大Ajax编程技术1.2 Ajax技术涉及的相关技术p文档对象模型文档对象模型DOM简单地说，简单地说，DOM是一种是一种Web页面的层级或树型结构页面的层级或树型结构表示。其中页面的每一部分，如图形、文本框、按钮等表示。其中页面的每一部分，如图形、文本框、按钮等都通过浏览器模拟。都通过浏览器模拟。DOM是是W3C(www.w3.org)组织的标准，所有浏览组织的标准，所有浏览器呈现的页面都遵循这种标准。器呈现的页面都遵循这种标准。1
5、- 中国科大Ajax编程技术1.2 Ajax技术涉及的相关技术pJavaScriptJavaScript是一种浏览器脚本语言。必须熟练掌握是一种浏览器脚本语言。必须熟练掌握了这种语言，才能掌握了这种语言，才能掌握Ajax编程技术。编程技术。1- 中国科大Ajax编程技术1.2 Ajax技术涉及的相关技术pXML、XSLT、XPathnXML：一种用语描述和结构化数据的语言；：一种用语描述和结构化数据的语言；nXSLT：一种将：一种将XML文档转换为文档转换为XML其它其它XML文档文档的语言，它也可以将的语言，它也可以将HTML或纯文本指定为其他输或纯文本指定为其他输出格式；出格式；nXPat
6、h：XSLT在实施转换时，使用在实施转换时，使用XPath语言来查语言来查询询XML文档。文档。XPath查询用来定位原始查询用来定位原始XML文档的文档的元素。元素。1- 中国科大Ajax编程技术1.2 Ajax技术涉及的相关技术pXMLHttprequest对象对象这是微软中引入的一个这是微软中引入的一个ActiveX控件，称为控件，称为XMLHttp对象，棒定在对象，棒定在IE5中。中。不久，不久，Mozilla工程师也在工程师也在Mozilla 1 和和 Netscape7创建了相应的东西，即创建了相应的东西，即XMLHttpRequest对象。对象。在在IE7中，除了中，除了Acti
7、veX控件外，还有一个原本的控件外，还有一个原本的XMLHttpRequest对象。对象。在在Safari1.2 和和Opera中，也包含了此对象。中，也包含了此对象。1- 中国科大Ajax编程技术1.2 Ajax技术涉及的相关技术pXMLHttprequest对象是干什么的？对象是干什么的？XMLHttprequest对象用来使开发人员在后台提交对象用来使开发人员在后台提交和接收和接收XML文档。文档。以前可以用隐藏的框架以前可以用隐藏的框架 iframe 来执行这种任务，但来执行这种任务，但现在现在XMLHttprequest对象更精通与此道，它允许发送对象更精通与此道，它允许发送和接收数
8、据。和接收数据。1- 中国科大Ajax编程技术1.2 Ajax技术涉及的相关技术pXMLHttprequest对象缺点对象缺点它还不是标准，单独的方法来创建他们它还不是标准，单独的方法来创建他们nIE7以前的以前的IE，的创建方法是：，的创建方法是：var xHRObject = new ActiveXObject(“microsoft.XMLHTTP”);nIE7和其他浏览器的创建方法是：和其他浏览器的创建方法是：var xHRObject = new XMLHttpRequest();因此，创建因此，创建XMLHttpRequest对象时，必须先检测对象时，必须先检测所使用的浏览器是哪种类
9、型。所使用的浏览器是哪种类型。1- 中国科大Ajax编程技术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; p通常情况下，浏览器功能检测和对象创建的代码类似如下：通常
10、情况下，浏览器功能检测和对象创建的代码类似如下：1- 中国科大Ajax编程技术1.3 Ajax应用程序模型最初，最初，Web只是用来显示只是用来显示HTML文档。当时的应用文档。当时的应用程序模型为：用户在客户端输入数据，发送页面到服务程序模型为：用户在客户端输入数据，发送页面到服务器，等待响应。器，等待响应。这种模型只是用来处理这种模型只是用来处理Web页面，后来出现了同步页面，后来出现了同步通讯问题。通讯问题。1- 中国科大Ajax编程技术HTTP响应响应HTTP请求请求1.3 Ajax应用程序模型p同步同步：Web上，同步意味着用户请求一个上，同步意味着用户请求一个HTML页面，页面，然
11、后浏览器代表用户发送一个然后浏览器代表用户发送一个HTTP请求给请求给Web服务器。服务器。服务器收到请求后进行一些处理，然后将结果以服务器收到请求后进行一些处理，然后将结果以HTML页面返回给发出请求的浏览器。浏览器收到页面后显示页面返回给发出请求的浏览器。浏览器收到页面后显示出这个页面。出这个页面。客户机客户机客户机客户机浏览器浏览器浏览器浏览器WebWebWebWeb服务器服务器服务器服务器HTML页面页面1- 1- 中国科大Ajax编程技术1.3 Ajax应用程序模型p浏览器只发出请求，服务器只响应请求。通讯始终是单浏览器只发出请求，服务器只响应请求。通讯始终是单向的。向的。“请求请求
12、/响应响应”周期是同步的，在此期间，用户只周期是同步的，在此期间，用户只能被动等待。能被动等待。p同步存在的问题同步存在的问题n性能底下：输入性能底下：输入-响应响应-等待的模式造成时间上的浪费；等待的模式造成时间上的浪费；n只要刷新页面，就会发送一个新的请求给服务器，带只要刷新页面，就会发送一个新的请求给服务器，带来额外的服务器响应负担、更高的带宽消耗。来额外的服务器响应负担、更高的带宽消耗。n最根本的问题是，没有提供双向、实时的通信。服务最根本的问题是，没有提供双向、实时的通信。服务器没有办法发起更新器没有办法发起更新1- 中国科大Ajax编程技术1.3 Ajax应用程序模型p同步方案下的
13、同步方案下的Web应用程序的问题应用程序的问题n浏览器（用户）必须等待服务器的响应；浏览器（用户）必须等待服务器的响应；n服务器不能发起更新。服务器不能发起更新。1- 中国科大Ajax编程技术1.3 Ajax应用程序模型pAjax技术：将技术：将“部分屏幕更新部分屏幕更新”技术引用到技术引用到Web应用程应用程序模型中。在序模型中。在Ajax应用程序中，只有包含新信息的用户应用程序中，只有包含新信息的用户界面元素才会被更新，其余部分页面不变。界面元素才会被更新，其余部分页面不变。这意味着不需要发送全部信息，等待时间也缩短。这意味着不需要发送全部信息，等待时间也缩短。1- 中国科大Ajax编程技
14、术1.3 Ajax应用程序模型p什么地方适宜使用什么地方适宜使用Ajax技术技术n部分页面更新；部分页面更新；n不可见的数据检索；不可见的数据检索；n不间断更新；不间断更新；n平滑的界面；平滑的界面；n简单丰富的功能；简单丰富的功能；n拖放拖放1- 中国科大Ajax编程技术1.3 Ajax应用程序模型p什么地方不适宜使用什么地方不适宜使用Ajax技术技术n响应速度慢时，不要用响应速度慢时，不要用Ajax；n需要使用浏览器的后退按钮时，不要用，因为已经被需要使用浏览器的后退按钮时，不要用，因为已经被破坏；破坏；n破坏了书签，阻碍了搜索引擎编制索引；破坏了书签，阻碍了搜索引擎编制索引；n浏览器处理数据的负担加重浏览器处理数据的负担加重1- 中国科大Ajax编程技术1.3 Ajax应用程序模型p使用使用Ajax的条件的条件n高版本的浏览器，高版本的浏览器，IE4+，Mozilla Firefox/Netscape 7+、Safari和和Opera 5+;n不能禁用脚本语言；不能禁用脚本语言；n不能脱机使用浏览器不能脱机使用浏览器1-
