ajax技术总结1

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

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

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

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

使用 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的搜索引擎如Start.com和Live.com不允许使用浏览器的后退按钮来查看前一次搜索的结果，这对已经养成搜索习惯的用户来说是不可原谅的。

3.基本的导航

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

4.替换大量的文本

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

5.对呈现的操纵

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





参考文章：http://www.iteye.com/topic/38793





xml概论
什么是XML?
l         XML是EXtensible Markup Language的缩写

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

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

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

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

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



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

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

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

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

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

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

l         在XML中注释的语法基本上和HTML中的一样。<!-- 这是一个注释 -->



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

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

<person sex="female">               <!—数据female保存在属性中--><firstname>Anna</firstname>  <!—数据Anna保存在元素中-->

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

&lt;
<
小于号

&gt;
>
大于号

&amp;
&
和

&apos;
'
单引号

&quot;
"
双引号



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

注意: 只有"<" 字符和"&"字符对于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:
http://www.w3.org/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文件。（使用上面的语法）

示例：http://www.leftworld.net/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"用来指定样式表所在的位置.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> xmlns:xsl="http://www.w3.org/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类似。

语法：

<xsl:if expr="script-expression" language="language-name" test="pattern">

属性：

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文档载入数据岛

<xml src="cd_catalog.xml" id="xmldso" async="false"></xml>使用上面示例代码，可以把cd_catalog.xml文件载入一个叫"xmldso"的数据岛中



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

把XML数据绑定到table元素，需要在table属性添加一个资源属性，并且在span元素中添加字段属性: <span>或<div>元素都可以用来显示XML数据。

<table datasrc="#xmldso" width="100%" border="1"><td><span datafld="YEAR"></span></td>

<span datasrc="#xmldso" datafld="YEAR"></span>

<div datasrc="#xmldso" datafld="YEAR"></div>

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

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

Eg:

<xml id='ShareInfo'>

  <!-xml data --!

</xml>

<table datasrc="#ShareInfo" >

  <!-用span, div元素，元素属性datafld 来获取数据--!>

</table>



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

Eg:

<XML  id=mxhxsl> 

<?xml  version="1.0"?> 

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> 

<xsl:template  match="/"> 



<table>

<tr>

       <th onclick="sort('Type')"  style="cursor:hand" align="center">                                 

       <xsl:element name="input">

              <xsl:attribute name="type">button</xsl:attribute>

              <xsl:attribute name="name">nameBut</xsl:attribute>

              <xsl:attribute name="value">按纽中显示的值</xsl:attribute>

              <xsl:attribute name="title">title</xsl:attribute>

       </xsl:element>              

       </th>

</tr>

       <xsl:for-each  select="子元素的路径"  order-by="子元素">

       <tr>

          <td ><xsl:value-of  select="子元素"/></td> 

       </tr>

       </xsl:for-each>

</table>  



备注：html文本中的html中的对象<input type="TYPE" name="NAME" value="VALUE">

在xsl中要表达成这样

<xsl:element name="input">

<xsl:attribute name="type">TYPE</xsl:attribute name>

<xsl:attribute name="name">NAME</xsl:attribute name>

<xsl:attribute name="value">VALUE</xsl:attribute name>

</xsl:element>

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

4) 用javascript来显示xml数据
下面的代码可以将一个XML文档或xml字符串载入解析器:

<script type="text/javascript">var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")xmlDoc.async="false"xmlDoc.load("note.xml")　//此处装载为一xml文档，使用loadxmlDoc.loadXML(text)   //var text,此外装载为一xml字符串，使用loadXML // ....... processing the document goes here//nodes=xmlDoc.documentElement.childNodes//to.innerText=    nodes.item(0).text</script>http://www.leftworld.net/online/xml/xml_cn/tryit.asp-filename=note.htm



xml排序
1 xsl:sort
所使用的名字空间：xmlns:xsl='http://www.w3.org/1999/XSL/Transform'

Syntax

<xsl:sort

select="expression"

lang="language-code"

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

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

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



test1.xml

<?xml version="1.0" encoding="GB2312"?>

<?xml-stylesheet type="text/xsl" href="test1.xsl"?>

<source>

<name>John</name>

<name>Josua</name>

<name>Charles</name>

<name>Alice</name>

<name>Martha</name>

<name>George</name>

</source>



test1.xsl

<xsl:stylesheet version = '1.0'

     xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>



<xsl:template match="/">

     <TABLE>

         <xsl:for-each select="//name">

          <xsl:sort order="ascending" select="."/>

                 <TR> <TH><xsl:value-of select="."/></TH> </TR>

         </xsl:for-each>

     </TABLE>

</xsl:template>

</xsl:stylesheet>

2 for-each的属性ordey-by
所使用的名字空间：xmlns:xsl='http://www.w3.org/1999/XSL/Transform'

Syntax

<xsl:for-each select="expression"> 

<!-- Content:(xsl:sort*,template) -->

</xsl:for-each>



<html><head> 

<script> 

var  sig=true 

function  sort(strKey) 

{ 

var  xml1=mxhxml.XMLDocument 

var  xsl1=mxhxsl.XMLDocument 

var  s1=xsl1.selectSingleNode("//xsl:for-each/@order-by") 

if(s1.value==strKey)  s1.value="-"  +  strKey 

else 

s1.value=strKey 

document.all.mxh.innerHTML=xml1.transformNode(xsl1) 

} 

</script> 

</head> 

<body  onload="sort('Name')"> 

<div  id=mxh></div> 

<XML  id=mxhxsl> 

<?xml  version="1.0"?> 

<xsl:stylesheet  xmlns:xsl="http://www.w3.org/TR/WD-xsl"> 

   <xsl:template  match="/"> 

   点击标题排序： 

       <table  border="2"> 

           <tr> 

               <th  onclick="sort('Name')"  style="cursor:hand">名称</th> 

               <th  onclick="sort('Email')"  style="cursor:hand">电子邮件</th> 

           </tr> 

           <xsl:for-each  select="/Custs/Cust"  order-by="Name"> 

               <tr> 

                   <td><xsl:value-of  select="Name"/></td> 

                   <td><xsl:value-of  select="Email"/></td> 

               </tr> 

           </xsl:for-each> 

       </table> 

   </xsl:template> 

</xsl:stylesheet> 

</XML> 



<XML  id=mxhxml> 

<?xml  version="1.0"?> 

<Custs> 

<Cust> 

       <Name>Nancy</Name> 

       <Email>[e-mail]</Email> 

   </Cust> 

   <Cust> 

       <Name>Peter</Name> 

       <Email>[e-mail]</Email> 

   </Cust> 

   <Cust> 

       <Name>Rachel</Name> 

       <Email>[e-mail]</Email> 

   </Cust> 

   <Cust> 

       <Name>Seth</Name> 

       <Email>[e-mail]</Email> 

   </Cust> 

</Custs> 

</XML> 



3 按数字进行排序
1)xsl:sort方式： 只需指定datatype="number"

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

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

<script type="text/javascript">

function taxis(x) 

{ 

    //获取到xml,xsl文档，获取到node: selectSingleNode

    if(x == '指定要排序的数字元素')

       sortField.value='number('+x+')';

    else

       sortField.value=x;

    if (this.rel == '+')

    {

       this.rel = '-';

    }

    else

    {

       sortField.value = '-'+sortField.value;

       this.rel = '+';

    }

    //transformNode

}

</script>

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
服务器返回的状态文本信息