当前位置：文档库 › AJAX技术总结-深入学习ajax

AJAX技术总结-深入学习ajax

AJAX技术总结

什么是ajaxa技术？

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术：

基于web标准（standards-based presentation）XHTML+CSS的表示；

使用DOM（Document Object Model）进行动态显示及交互；

使用XML 和XSL T 进行数据交换及相关操作；

使用XMLHttpRequest 进行异步数据查询、检索；

使用JavaScript 将所有的东西绑定在一起。

类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。

AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

基于Ajax的应用程序架构

浏览器端框架被划分成两大类：

?应用程序框架：提供浏览器的功能，但是常以包括窗口小部件抽象和另外的部件而出名，其功能主要围绕桌面GUI框架。

?基本结构框架：提供基本的管道和可移植的浏览器抽象，让开发者去创建内容。

Ajax的应用范围

Ajax适用场景

1.表单驱动的交互

传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用Ajax，在点击sunmit按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果，这里没有整个页面刷新的问题。

2.深层次的树的导航

深层次的级联菜单（树）的遍历是一项非常复杂的任务，使用JavaScript来控制显示逻辑，使用Ajax延迟加载更深层次的数据可以有效的减轻服务器的负担。

3.快速的用户与用户间的交流响应

在众多人参与的交流讨论的场景下，最不爽的事情就是让用户一遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最快的速度显示出来，而把用户从分神的刷新中解脱出来，Ajax是最好的选择。

4.类似投票、yes/no等无关痛痒的场景

对于类似这样的场景中，如果提交过程需要达到40秒，很多的用户就会直接忽略过去而不会参与，但是Ajax可以把时间控制在1秒之内，从而更多的用户会加入进来。

5.对数据进行过滤和操纵相关数据的场景

对数据使用过滤器，按照时间排序，或者按照时间和名称排序，开关过滤器等等。任何要求具备很高交互性数据操纵的场合都应该用JavaScript，而不是用一系列的服务器请求来完成。在每次数据更新后，再对其进行查找和处理需要耗费较多的时间，而Ajax可以加速这个过程。

6.普通的文本输入提示和自动完成的场景

在文本框等输入表单中给予输入提示，或者自动完成，可以有效的改善用户体验，尤其是那些自动完成的数据可能来自于服务器端的场合，Ajax是很好的选择。

Ajax不适用场景

1.部分简单的表单

虽然表单提交可以从Ajax获取最大的益处，但一个简单的评论表单极少能从Ajax得到什么明显的改善。而一些较少用到的表单提交，Ajax则帮不上什么忙。

2.搜索

有些使用了Ajax的搜索引擎如https://www.wendangku.net/doc/ae6003779.html,和https://www.wendangku.net/doc/ae6003779.html,不允许使用浏览器的后退按钮来查看前一次搜索的结果，这对已经养成搜索习惯的用户来说是不可原谅的。

3.基本的导航

使用Ajax来做站点内的导航是一个坏主意，为什么不把时间放在让系统程序作的更好上呢？

4.替换大量的文本

使用Ajax可以实现页面的局部刷新，但是如果页面的每个部分都改变了，为什么不重新做一次服务器请求呢？

5.对呈现的操纵

Ajax看起来像是一个纯粹的UI技术，但事实上它不是。它实际上是一个数据同步、操纵和传输的技术。对于可维护的干净的web应用，不使用Ajax来控制页面呈现是一个不错的主意。JavaScript可以很简单的处理XHMTL/HTML/DOM，使用CSS规则就可以很好的表达数据显示。

参考文章：https://www.wendangku.net/doc/ae6003779.html,/topic/38793

xml概论

什么是XML?

●XML是EXtensible Markup Language的缩写

●XML是一种类似于HTML的标记语言

●XML是用来描述数据的(用来存放数据的)

●XML的标记不是在XML中预定义的，你必须定义自己的标记

●XML使用文档类型定义（DTD）或者模式（Schema）来描述数据

●XML使用DTD或者Schema后就是自描述的语言

XML语法

●所有的XML文档必须有一个结束标记。所有元素必须正确的嵌套包含。

●所有的XML文档必须有一个根元素，XML文档中的第一个元素就是根元素。

●元素的属性值必须使用引号""。

●XML标记都是大小写敏感的，这与html不同。

●使用XML,空白将被保留。

●使用XML, 新行总是被标识为LF（Line Feed，换行）。这与unix中换行一致。

●在XML中注释的语法基本上和HTML中的一样。

XML元素指的是从该元素的开始标记到结束标记之间的这部分内容。xml可以创建自己的元素。所有元素嵌套在根元素中。

XML元素有元素内容，混合内容，简单内容或者空内容。每个元素都可以拥有自己的属性。数据可以存储在元素中，也可以存储在元素的属性中。Eg:

Anna

XML的敏感字符

下面是五个在XML文档中预定义好的实体:

< < 小于号

> > 大于号

& & 和

' ' 单引号

" " 双引号

实体必须以符号"&"开头，以符号";"结尾。

注意:只有"<" 字符和"&"字符对于XML来说是严格禁止使用的。剩下的都是合法的，为了减少出错，使用实体是一个好习惯。

xpath

Functions Reference

?Accessor

?Error and Trace ?Numeric

?String ?AnyURI

?Boolean

?Duration/Date/Time ?QName

The default prefix for the function namespace is fn:, and the URI is:

https://www.wendangku.net/doc/ae6003779.html,/2005/02/xpath-functions.

xml内容显示

CSS（叠层样式表）和XSL（可扩展样式语言）都可以定义XML文件的显示.

如果一个XML文件仅仅用于交换信息，就无需考虑它的显示问题。编辑XML文件，我们仅仅需要关注文件的内容、信息的结构，至于它怎么显示，则交给CSS（叠层样式表）和XSL（可扩展样式语言）来完成。此外使用数据岛技术与javascript也能定制xml的内容显示，这就使得用户可以根据需要来定义数据的表现形式。

1）用css来显示xml

具体的语法如下：〈?xml-stylesheet href="URL"type="text/css"?〉其中，xml-stylesheet是关键字，表明引用样式表设定；href="URL"用来指定样式表所在的位置.

使用步骤：

a)建立样式表档案.(*.css)

b)将css连接到xml文件。（使用上面的语法）

示例：https://www.wendangku.net/doc/ae6003779.html,/online/xml/xml_cn/xml_display.asp.htm

2）用xsl来表示xml

XSL是怎样工作的呢？XML文件在展开后是一种树状结构，称为“原始树”，XSL处理器（现在只有IE5支持XSL，在IE5中的处理器叫：XSLStylesheetProcessor）从这个树状结构读取信息，根据XSL样式的指示对这个“原始树”进行排序、复制、过滤、删除、选择、运算等操作后产生另外一个“结果树”，然后在“结果树”中加入一些新的显示控制信息，如表格、其他文字、图形以及一些有关显示格式的信息。XSL处理器根据XSL样式表的指示读取XML文件中的信息，然后再重新组合后转换产生一个Well-Formed的HTML文件。

XSL由三部分组成: XML文档转换（XML Document Transformation ，又叫XSLT）,模式匹配语法（ a pattern matching syntax ，又叫XPath), 格式话对象（a formatting object interpretation，XSL FO）。

具体的语法如下：〈?xml-stylesheet href="URL"type="text/xsl"?〉其中，xml-stylesheet是关键字，表明引用样式表设定；href="URL"用来指定样式表所在的位置.

xmlns:xsl="https://www.wendangku.net/doc/ae6003779.html,/TR/WD-xsl"这一句主要用来说明该XSL样式表是使用W3C所制定的XSL，设定值就是XSL规范所在的URL地址。

1.xsl:stylesheet：作为XSL样式表中的根元素，在每个XSL文件中都必须有。

2.xsl:template：指定XML文件中的特定标记来定义排版样式。

属性：language：指定使用哪种脚本语言。

match：设定从XML文件中哪个标记开始来读取信息，如果值为“/”那么表示从XML文件的根元素开始读取信息。

3.xsl:value-of：从XML文件中的特定标记中将信息读出来。

属性：select：设定读取哪一个标记中的信息。

例：〈xsl:templateselect="title"〉：表示要从〈title〉标记中将信息读出来。

4.xsl:for-each：将排版样式应用到XML文件中相同的标记（类似于循环语句）。

属性：select：设定从哪一个标记中读取数据。

order-by：在读取信息完成之后，设定依据什么标记来进行排序，值为某一特定标记，如在标记名前用“+”号表示是由大到小的排序，反之用“-”号。

5.xsl:comment：在此元素中的内容，XSL将它作为注释信息，并不显示在浏览器中。

6.xsl:apply-templates：指示XSL处理器在该XSL样式表中寻找合适的〈xsl:template〉中设定的样式来用。

7.xsl:copy：从XML文件中拷贝标记中的信息到输出的文件中。无属性。

8.xsl:if：与一般程序中的If...Then类似。

语法：

属性：

expr ──脚本语言表达式，计算结果为"真"或"假"；如果结果为"真"，且通过test，则在输出中显示其中内容（可省略此项属性）。

language ──expr属性中表达式的脚本语言类型，其取值与HTML标记SCRIPT的LANGUAGE属性的取值相同，缺省为"JScript"。

test ──源数据测试条件。

9.xsl:choose、xsl:when、xsl:otherwise：这三个元素是用来设定较为复杂的条件式，一般共同配合使用。其中xsl:when有script、language、test三种属性，与前面xsl:if中的属性含义是一样的。

10.xsl:attribute和xsl:element：可以在标记中附加一个属性名称或新建一个标记。XSL 样式表不但可以引用HTML标记，而且也可以建立新的标记和属性，然后一起结合XML 文件中的信息来显示。其中，xsl:attribute是在标记中新增一个属性，xsl:element是新建一个标记。它们有共同的属性。

示例：

使用步骤：

c)建立xsl样式档案表

d)将xsl样式表连接到xml文件。（使用上面的语法）

3) xml数据岛技术

xml所谓的数据岛就是在html网页中嵌入XML的一种技术。

使用步骤：

1 将XML文档载入数据岛

使用上面示例代码，可以把cd_catalog.xml文件载入一个叫"xmldso"的数据岛中

2 把XML数据绑定到HTML的表格元素中

把XML数据绑定到table元素，需要在table属性添加一个资源属性，并且在span元素中添加字段属性: 或

元素都可以用来显示XML数据。

此外，ie5以上的浏览器也支持在html文本中加入xml数据格式，然后本地解析。有2种形式：

a)上面那种数据岛的本地数据形式。

Eg:

b)用xsl的遍历来获取数据

Eg:

button

nameBut

按纽中显示的值

title

备注：html文本中的html中的对象在xsl中要表达成这样

TYPE

NAME

V ALUE

此外：xsl中还可自定义元素及属性。

4) 用javascript来显示xml数据

下面的代码可以将一个XML文档或xml字符串载入解析器:

https://www.wendangku.net/doc/ae6003779.html,/online/xml/xml_cn/tryit.asp-filename=note.htm

xml排序

1 xsl:sort

所使用的名字空间：xmlns:xsl='https://www.wendangku.net/doc/ae6003779.html,/1999/XSL/Transform' Syntax

select="expression"

lang="language-code"

data-type="text|number|qname" //数据类型，可支持按数字排序

order="ascending|descending" //排序升序，降序

case-order="upper-first|lower-first"/>

test1.xml

John

Josua

Charles

Alice

Martha

George

test1.xsl

xmlns:xsl='https://www.wendangku.net/doc/ae6003779.html,/1999/XSL/Transform'>

2 for-each的属性ordey-by

所使用的名字空间：xmlns:xsl='https://www.wendangku.net/doc/ae6003779.html,/1999/XSL/Transform' Syntax

点击标题排序：

名称	电子邮件

Nancy

www@https://www.wendangku.net/doc/ae6003779.html,

Peter

dotnet@https://www.wendangku.net/doc/ae6003779.html,

Rachel

billgates@https://www.wendangku.net/doc/ae6003779.html,

Seth

flying@https://www.wendangku.net/doc/ae6003779.html,

3 按数字进行排序

1)xsl:sort方式：只需指定datatype="number"

2)ordey-by方式：只需指定ordey-by=number("结点")

3)另外，还需对脚本进行修改：

xml server

在服务器端创建存储xml文档。

XMLHTTPRequest

Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。对于大多数情况，XMLHttpRequest对象和，MS的XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。

XMLHttpRequest的应用：

XMLHttpRequest对象在JS中的应用

var xmlhttp = new XMLHttpRequest();

微软的XMLHTTP组件在JS中的应用

var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);

var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);

XMLHttpRequest 对象方法

方法描述

abort() 停止当前请求

getAllResponseHeaders() 作为字符串返问完整的headers

getResponseHeader("headerLabel") 作为字符串返问单个的header标签

open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数

send(content) 发送请求

setRequestHeader("label", "value") 设置header并和请求一起发送

XMLHttpRequest 对象属性

属性描述onreadystatechange 状态改变的事件触发器

readyState 对象状态(integer):

0 = 未初始化

1 = 读取中

2 = 已读取

3 = 交互中

4 = 完成

responseText 服务器进程返回数据的文本版本

responseXML 服务器进程返回数据的兼容DOM的XML文档对象

status 服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功"

statusText 服务器返回的状态文本信息

javascript编程知识

JavaScript 对象

javaScript 所处理的每一个对象都是属于一个类(class) ，类里边定义了组成对象的数据、属性、方法（即是类里边的一些函数）等，使用类可以增加程序代码的复用性，这在一种程序语言中是很重要的，因为这样可以避免重复开发！

对象的属性(Propertie)：

在java Script 中使用英文句号(.) 来访问对象的属性值。

对象的方法(Method)：

同样的，对象的方法也是通过英文句号(.) 来执行的，在方法后边紧跟一对圆括号()，而在圆括号里边包含了使用该方法所需要的参数。

java Script 中的对象：

javaScript 包含很多预定义对象，一些是可以用来表示不同的数据类型(如数字和字符串对象)，而另一些是在网页中定义的与HTML 标记密切相关的对象(如超链接和图片对象)。

在javaScript 中可供使用的最基本的数据类型被称为核心(core) 对象，这些对象是：Array - 数组对象；

Boolean - 布尔对象；

Date - 时间对象；

Number - 数值对象，可以是整数和浮点数；

String - 字符串对象，可以是单引号(') 或双引号(") 括起来的任何字符串。

JavaScript supports three primitive data types: numbers, booleans, and strings; and two compound data types: object and arrays.

创建一个对象实例时使用new 运算符：

var text = new String("This is my text.");

var max = new Number(4.02);

var today = new Date(); // Date() 是javaScript 的内建对象类

几种相同效果的代码：

1) location在网页加载到客户端时已创建，虽然它是window的子对象，但可直接用了

var url = window.location.href;

var url = location.href;

2)得到网页中第4个image

因为document的属性images是个数组，故可用数组下标来访问；另外image4的name是menu,在保证图片名不重名的情况下，可以通过图片名直接访问。

var abc = document.images[3];

var abc = document.menu;

var abc = document.images["menu"];

注意：document是最最常用的对象，关于它的属性方法有很多，具体的可在网上找一个手册：文档模式中文手册。(此手册里包含document的大量方法使用说明)

DOM对象

【文档中的对象模块】

当页面已经被下载到客户端时，浏览器就会创建几个用来存储页面信息和页面内容的对象。这些对象构成了一个树状结构 (对象的引用也是根据这种树一层一层引用的，引用时使用“.”号)，在这棵“树”中，最高层的对象是 window 对象，在这同时，浏览器还会创建另一个高层的对象叫 navigator，这个对象包含了浏览器的类型、版本、安装的插件等等信息。浏览器在创建 window 和 navigator 对象的同时，也会将 window 的属性 locatio n、history 和 document 创建为高层对象。

附：下面为对象表：total object

对象父

对

象

对象说明对象属性对象方法示例

win dow frames，screen alert()，confi

rm,prompt，setT

imeout

loc wi页面的地址

ati on nd

(URL) 信息；

his tor y wi