博客开通第61天
2013-05-23 11:04
190 查看
ajax简单写法
方法一：
<script type="text/javascript" language="javascript" src="/js/prototype-1.3.1.js"></script>
function doChange(formObj,gid){
noChange=false;
//var cid=formObj.xid.value;
var url="/game.do";
var pars="method=brand&gameid="+gid+"&brandid="+formObj.pid.value;
new Ajax.Updater("mm", url, {method: 'post', parameters: pars});
}
方法二：
function selectCB(f, gid)
{
if(f.pid.value ==0 ){
alert("请选择手机品牌！");
return;
}
var postParam="method=brand&gameid="+gid+"&brandid="+f.pid.value ;
var url="/game.do";
var reqMode="POST";
var resObjId="null";
//alert(url);
var res=sendForHTML(reqMode,url,false,postParam,resObjId);
alert(res);
if(res!="")
{
createSelectOption(res);
}
else
{
alert("获取手机型号信息有误！");
}
}
function sendForHTML(reqMode,reqUrl,aSync,postParam,returnToObjId){
var reqObj=getHttpRequest();
var resText="";
if(!reqObj){
alert("browser does not support ajax");
return;
}
reqObj.onreadystatechange = function() {
if (reqObj.readyState == 4) {
if (reqObj.status == 200) {
resText = reqObj.responseText;
} else {
alert('response2HTML:There was a problem with the request. return status='+reqObj.status);
}
}
};
reqObj.open(reqMode, reqUrl, aSync);
if('POST'==reqMode){
reqObj.setRequestHeader('Content-type','application/x-www-form-urlencoded');
reqObj.send(postParam);
}
else{
reqObj.send(null);
}
return resText;
}
function getHttpRequest()
{
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return http_request;
}
2.
Ajax这个概念的最早提出者Jesse James Garrett认为：
Ajax是Asynchronous JavaScript and XML的缩写。
Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括：
·使用XHTML和CSS标准化呈现;
·使用DOM实现动态显示和交互;
·使用XML和XSLT进行数据交换与处理;
·使用XMLHttpRequest进行异步数据读取;
·最后用JavaScript绑定和处理所有数据;
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
三、概述
虽然Garrent列出了7条Ajax的构成技术，但个人认为，所谓的Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，如果所用数据格式为XML的话，还可以再加上XML这一项(Ajax从服务器端返回的数据可以是XML格式，
也可以是文本等其他格式)。
在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。
而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载（白屏）的等待。
1、XMLHTTPRequest
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。
最早应用XMLHTTP的是微软,IE（IE5以上）通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。Mozilla（Mozilla1.0以上及NetScape7以上）做出的回应是创建它自己的继承XML代理类：XMLHttpRequest类。Konqueror (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。
XMLHttpRequest的应用：
·XMLHttpRequest对象在JS中的应用
·微软的XMLHTTP组件在JS中的应用
XMLHttpRequest 对象方法
XMLHttpRequest 对象属性
2、JavaScript
JavaScript是一在浏览器中大量使用的编程语言，，他以前一直被贬低为一门糟糕的语言（他确实在使用上比较枯燥），以在常被用来作一些用来炫耀的小玩意和恶作剧或是单调琐碎的表单验证。但事实是，他是一门真正的编程语言，有着自已的标准并在各种浏览器中被广泛支持。
3、DOM
Document Object Model。
DOM是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述，让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。
所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现（例如，document 就代表“文件本身“这个对像，table 对象则代表 HTML 的表格对象等等）。这些对象可以由当今大多数的浏览器以 Script 来取用。
一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM（Document Object Model）中，DOM提供了网页中各个对象的读写的支持。
4、XML
可扩展的标记语言（Extensible Markup Language）具有一种开放的、可扩展的、可自描述的语言结构，它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言，就正如他的名字一样。他使对某些结构化数据的定义更加容易，并且可以通过他和其他应用程序交换数据。
5、综合
Jesse James Garrett提到的Ajax引擎，实际上是一个比较复杂的JavaScript应用程序，用来处理用户请求，读写服务器和更改DOM内容。
JavaScript的Ajax引擎读取信息，并且互动地重写DOM，这使网页能无缝化重构，也就是在页面已经下载完毕后改变页面内容，这是我们一直在通过JavaScript和DOM在广泛使用的方法，但要使网页真正动态起来，不仅要内部的互动，还需要从外部获取数据，在以前，我们是让用户来输入数据并通过DOM来改变网页内容的，但现在，XMLHTTPRequest，可以让我们在不重载页面的情况下读写服务器上的数据，使用户的输入达到最少。
基于XML的网络通讯也并不是新事物，实际上FLASH和JAVA Applet都有不错的表现，现在这种富交互在网页上也可用了，基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序。
Ajax是传统WEB应用程序的一个转变。以前是服务器每次生成HTML页面并返回给客户端（浏览器）。在大多数网站中，很多页面中至少90%都是一样的，比如：结构、格式、页头、页尾、广告等，所不同的只是一小部分的内容，但每次服务器都会生成所有的页面再返回给客户端，这无形之中是一种浪费，不管是对于用户的时间、带宽、CPU耗用，还是对于ISP的高价租用的带宽和空间来说。如果按一页来算，只能几K或是几十K可能并不起眼，但像SINA每天要生成几百万个页面的大ISP来说，可以说是损失巨大的。而AJAX可以所为客户端和服务器的中间层，来处理客户端的请求，并根据需要向服务器端发送请求，用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于纯后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低，基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序，所以Ajax对于用户和ISP来说是双盈的。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），而在以前两者是没有清晰的界限的，数据与呈现分离的分离，有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理。
四、应用
Ajax理念的出现，揭开了无刷新更新页面时代的序幕，并有代替传统web开发中采用form(表单)递交方式更新web页面的趋势，可以算是一个里程碑。但Ajax都不是适用于所有地方的，它的适用范围是由它的特性所决定的。
举个应用的例子，是关于级联菜单方面的Ajax应用。
我们以前的对级联菜单的处理是这样的：
为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用JavaScript来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为冗余数据而浪费用户的资源，特别是在菜单结构复杂、数据量大的情况下（比如菜单有很多级、每一级菜又有上百个项目），这种弊端就更为突出。
如果在此案中应用Ajax后，结果就会有所改观：
在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操作一级菜单其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据，如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，以此类推……这样，用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低。
此外，Ajax由于可以调用外部数据，也可以实现数据聚合的功能（当然要有相应授权），比如微软刚刚在3月15日发布的在线RSS阅读器BETA版；还可以利于一些开放的数据，开发自已的一些应用程序，比如用Amazon的数据作的一些新颖的图书搜索应用。
总之，Ajax适用于交互较多，频繁读数据，数据分类良好的WEB应用。
五、Ajax的优势
1、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担；
2、无刷新更新页面，减少用户实际和心理等待时间；
首先，“按需取数据”的模式减少了数据的实际读取量，打个很形象的比方，如果说重载的方式是从一个终点回到原点再到另一个终点的话，那么Ajax就是以一个终点为基点到达另一个终点；
图5－1
图5－2
其次，即使要读取比较大的数据，也不用像RELOAD一样出现白屏的情况，由于Ajax是用XMLHTTP发送请求得到服务端应答数据，在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面的，所以在读取数据的过程中，用户所面对的也不是白屏，而是原来的页面状态（或者可以加一个LOADING的提示框让用户了解数据读取的状态），只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的，用户几乎感觉不到。总之用户是很敏感的，他们能感觉到你对他们的体贴，虽然不太可能立竿见影的效果，但会在用户的心中一点一滴的积累他们对网站的依赖。
3、更好的用户体验；
4、也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本；
5、Ajax由于可以调用外部数据；
6、基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序；
7、Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离）；
8、对于用户和ISP来说是双盈的。
六、Ajax的问题
1、一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax；
2、用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事；
3、Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等；
4、对流媒体的支持没有FLASH、Java Applet好；
七、结束语
更好的Ajax应用，需要更多的客户端的开发，和对当前的WEB应用理念的思考，而且良好的用户体验，来源于为处处用户考虑的理念，而不单纯是某种技术。
3. AJAX控件Properties
Accordion控件时的常用属性标签
AccordionPane控件时的常用属性标签
AlwaysVisibleControl控件时的常用属性标签(控件适合做广告条^_^)
TargetControlID – 控件的ID
HorizontalOffset – 控件距离浏览器的水平边距. 默认是0px。
HorizontalSide - 水平停靠方向。可选择(Left, Center, or Right)。默认是Left
VerticalOffset -控件距离浏览器的垂直边距. 默认是0px。
VerticalSide -垂直停靠方向。可选择(Top, Middle, or Bottom)。默认是Top。
ScrollEffectDuration –控件复位时间，默认时间是0.1，单位是秒。
Animation控件的常用属性标签( 用来美化、装饰网站)
OnLoad：表示要触发的事件是加载页面时。
OnClick：表示要触发的事件是单击控件时。
OnMouseOver：表示要触发的事件是鼠标滑过时。
OnMouseOut：表示要触发的事件是鼠标移走时。
OnHoverOver：与OnMouseOver类似，对特定控件而言。
OnHoverOut：与OnMouseOut类似，对特定控件而言。
1．变色颜色的动画效果
本例要实现的是当鼠标滑过Panel时，Panel的颜色发生变化，当鼠标移走时，Panel的颜色又发生了变化，这需要“Color Animation”。Color Animation动画的属性主要有4个：
Duration：动画显示效果的时间间隔。
PropertyKey：要设置的属性值。
StartValue：属性的开始值。
EndValue：属性的结束值。
2．淡入淡出合并的动画效果
淡入淡出效果是网站中经常看到的效果，本例使用“Fade Animation”来实现这样的效果，“Fade Animation”的属性主要有4个：
duration：动画效果的时间间隔。
Fps：帧/秒的显示速度。
maximumOpacity：最大透明度。
minimumOpacity：最小透明度。
3．淡入和淡出分开的动画效果
上一个实例中，当鼠标滑过时，其实是完成两步：淡入和淡出。通常在实际应用中，淡入和淡出是分开的。本例要演示的是当鼠标滑过时，实现淡入效果，当鼠标移出时，实现淡出效果。
此功能需要使用“FadeIn Animation”和“FadeOut Animation”，其中两个动画控件有着相同的属性，属性内容如下：
duration：动画效果的时间间隔。
Fps：帧/秒的显示速度。
maximumOpacity：最大透明度。
minimumOpacity：最小透明度。
4．可伸缩的动画效果
本例要实现的效果是，当单击Panel时，变化Panel的高度和宽度。这需要使用“Resize Animation”动画控件。其属性主要有5个：
duration：动画效果的时间间隔。
Fps：帧/秒的显示速度。
width：变化后的宽度。
height：变化后的高度。
unit：高度和宽度的单位，通常为“px”。
AutoComplete控件的常用属性标签
1、TargetControlID:指定要实现提示功能的控件。
2、ServicePath:WebService的路径，提取数据的方法是写在一个WebService中的。
3、ServeiceMethod:写在WebService中的用于提取数据的方法的名字。
4、MinimumPrefixLength:用来设置用户输入多少字母才出现提示效果。
5、CompletionSetCount:设置提示数据的行数。
6、CompletionInterval:从服务器获取书的时间间隔，单位是毫秒。
Calendar控件常用属性标签
TargetControlID：用来显示选择日期的控件，改控件必需为TextBox
CssClass：设置日历的样式
Format：显示日期的格式，如yyMMdd,会显示071105
PopupButtonID：当日期是通过选定某个按钮弹出的时候，为改按钮的ID，一般为一个日历图片
CascadingDropDown主要属性
CollapsiblePanel控件------（可收缩面版）功能： 可以让页面中的某个区域变得可折叠，即用户可以根据喜好展开或折叠其中的内容。
属性：
TargetControlID：该扩展器目标控件ID，即将要实现折叠、展开功能的控件的ID
ExpandControlID：指定一个服务器控件的ID，当用户点击该控件时，该扩展器的目标Panel控件将展开
CollapseControlID:指定一个服务器控件的ID，当用户点击该控件时，该扩展器的目标Panel控件将折叠
Collapsed：目标Panel控件的初始化状态，true代表折叠，false代表展开
TextLabelID：指定一个服务器Label控件的ID，用来显示此时目标Panel控件的折叠/展开状态
ImageControlID：指定一个服务器端Image控件的ID，用来告知用户此时目标Panel控件的折叠、展开状态
ExpandedText：当目标Panel控件为展开状态时，TextLabelID属性所指定的Label控件中的文字
CollapsedText：当目标Panel控件为折叠时，TextLabelID属性所指定的Label控件中的文字
ExpandedImage：当目标Panel控件为展开状态时，ImageControlID属性所指定的Image控件中图片的URL
CollapsedImage：当目标Panel控件为折叠状态时，ImageControlID属性所指定的Image控件中图片的URL
ConfirmButton控件主要属性
TargetControlID - 该属性指定一个控件（LinkButton、Button等），点击是出现确认对话框
ConfirmText - 确认对话框显示的提示文字(注: 可以使用html代码(如: " " 表示换行))
OnClientCancel –取消时，执行的js函数。
ConfirmOnFormSubmit - 直到页面被提交之前才弹出:换句话说就是等页面上的验证全部通过的时候才弹出这个对话框
MaskedEditExtender控件(用来设置文本框显示时的一些格式，主要是为了控制用户输入的内容格式。)
TargetControlID 拥有屏蔽编辑功能的文本控件ID
MaskType 屏蔽类型：None – 无屏蔽Number – 数字屏蔽Date – 日期屏蔽Time – 时间屏蔽DateTime – 日期+时间屏蔽
InputDirection:文本输入方向，从左到右或者从右到左
AcceptNegative:是否接受负数符号“-”
DisplayMoney:显示金额符号的位置
MessageValidatorTip:是否提示验证消息
PromptChararacter:没有输入完时的提示字符
OnInvalidCssClass:当被验证控件验证失败时应用的样式
OnFocusCssClass:当被验证控件获得焦点时应用的样式
MaskedEditValidator控件用来难用户输入的内容，与普通控件相似。
属性列表：
ControlExtender:被控制的MaskedEditExtender的ID
ControlToValidate:被验证的控件ID
IsValidEmpty:是否能为空
EmptyValueMessage:空值时提示的信息
InvalidValueMessage:验证没有通过提示的信息
ValidationGroup:验证组
Display:验证控件的显示模式
TooltipMessage:当被验证控件获得焦点，并且内容为空时显示信息
MutuallyExclusiveCheckBox常用属性标签
Rating控件时的常用属性标签
ReorderList控件时的常用属性标签
4.JS的正则表达式
//校验是否全由数字组成
//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
//校验用户姓名：只能输入1-30个以字母开头的字串
//校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-”
//校验手机号码：必须以数字开头，除数字外，可含有“-”
//校验邮政编码
//校验搜索关键字
正则表达式
正则表达式使用详解
简介
简单的说，正则表达式是一种可以用于模式匹配和替换的强有力的工具。其作用如下：
测试字符串的某个模式。例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。
替换文本。可以在文档中使用一个正则表达式来标识特定文字，然后可以全部将其删除，或者替换为别的文字。
根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字。
基本语法
在对正则表达式的功能和作用有了初步的了解之后，我们就来具体看一下正则表达式的语法格式。
正则表达式的形式一般如下：
/love/ 其中位于“/”定界符之间的部分就是将要在目标对象中进行匹配的模式。用户只要把希望查找匹配对象的模式内容放入“/”定界符之间即可。为了能够使用户更加灵活的定制模式内容，正则表达式提供了专门的“元字符”。所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符，可以用来规定其前导字符（即位于元字符前面的字符）在目标对象中的出现模式。
较为常用的元字符包括： “+”， “*”，以及 “?”。
“+”元字符规定其前导字符必须在目标对象中连续出现一次或多次。
“*”元字符规定其前导字符必须在目标对象中出现零次或连续多次。
“?”元字符规定其前导对象必须在目标对象中连续出现零次或一次。
下面，就让我们来看一下正则表达式元字符的具体应用。
/fo+/ 因为上述正则表达式中包含“+”元字符，表示可以与目标对象中的 “fool”, “fo”, 或者 “football”等在字母f后面连续出现一个或多个字母o的字符串相匹配。
/eg*/ 因为上述正则表达式中包含“*”元字符，表示可以与目标对象中的 “easy”, “ego”, 或者 “egg”等在字母e后面连续出现零个或多个字母g的字符串相匹配。
/Wil?/ 因为上述正则表达式中包含“？”元字符，表示可以与目标对象中的 “Win”, 或者“Wilson”,等在字母i后面连续出现零个或一个字母l的字符串相匹配。
有时候不知道要匹配多少字符。为了能适应这种不确定性，正则表达式支持限定符的概念。这些限定符可以指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。
{n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。
{n,} n 是一个非负整数。至少匹配 n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
除了元字符之外，用户还可以精确指定模式在匹配对象中出现的频率。例如，/jim {2,6}/ 上述正则表达式规定字符m可以在匹配对象中连续出现2-6次，因此，上述正则表达式可以同jimmy或jimmmmmy等字符串相匹配。
在对如何使用正则表达式有了初步了解之后，我们来看一下其它几个重要的元字符的使用方式。
（说明：我们可以把/s和/S以及/w和/W看作互为逆运算）
下面，我们就通过实例看一下如何在正则表达式中使用上述元字符。
//s+/ 上述正则表达式可以用于匹配目标对象中的一个或多个空格字符。
//d000/ 如果我们手中有一份复杂的财务报表，那么我们可以通过上述正则表达式轻而易举的查找到所有总额达千元的款项。
除了我们以上所介绍的元字符之外，正则表达式中还具有另外一种较为独特的专用字符，即定位符。定位符用于规定匹配模式在目标对象中的出现位置。 较为常用的定位符包括： “^”, “$”, “/b” 以及 “/B”。
同样，我们也可以把“^”和“$”以及“/b”和“/B”看作是互为逆运算的两组定位符。举例来说： /^hell/ 因为上述正则表达式中包含“^”定位符，所以可以与目标对象中以 “hell”, “hello”或“hellhound”开头的字符串相匹配。 /ar$/ 因为上述正则表达式中包含“$”定位符，所以可以与目标对象中以 “car”, “bar”或 “ar” 结尾的字符串相匹配。 //bbom/ 因为上述正则表达式模式以“/b”定位符开头，所以可以与目标对象中以 “bomb”, 或 “bom”开头的字符串相匹配。/man/b/ 因为上述正则表达式模式以“/b”定位符结尾，所以可以与目标对象中以 “human”, “woman”或 “man”结尾的字符串相匹配。
为了能够方便用户更加灵活的设定匹配模式，正则表达式允许使用者在匹配模式中指定某一个范围而不局限于具体的字符。例如：
这里需要提醒用户注意的一点就是可以在正则表达式中使用 “()” 把字符串组合在一起。“()”符号包含的内容必须同时出现在目标对象中。因此，上述正则表达式将无法与诸如 “abc”等的字符串匹配，因为“abc”中的最后一个字符为字母而非数字。
如果我们希望在正则表达式中实现类似编程逻辑中的“或”运算，在多个不同的模式中任选一个进行匹配的话，可以使用管道符 “|”。例如：/to|too|2/ 上述正则表达式将会与目标对象中的 “to”, “too”, 或 “2” 相匹配。
正则表达式中还有一个较为常用的运算符，即否定符 “[^]”。与我们前文所介绍的定位符 “^” 不同，否定符 “[^]”规定目标对象中不能存在模式中所规定的字符串。例如：/[^A-C]/ 上述字符串将会与目标对象中除A，B，和C之外的任何字符相匹配。一般来说，当“^”出现在 “[]”内时就被视做否定运算符；而当“^”位于“[]”之外，或没有“[]”时，则应当被视做定位符。
最后，当用户需要在正则表达式的模式中加入元字符，并查找其匹配对象时，可以使用转义符“/”。例如：/Th/*/ 上述正则表达式将会与目标对象中的“Th*”而非“The”等相匹配。
在构造正则表达式之后，就可以象数学表达式一样来求值，也就是说，可以从左至右并按照一个优先级顺序来求值。优先级如下：
使用实例
在JavaScript 1.2中带有一个功能强大的RegExp()对象，可以用来进行正则表达式的匹配操作。其中的test()方法可以检验目标对象中是否包含匹配模式，并相应的返回true或false。
我们可以使用JavaScript编写以下脚本，验证用户输入的邮件地址的有效性。
正则表达式对象
本对象包含正则表达式模式以及表明如何应用模式的标志。
参数
re
必选项。将要赋值为正则表达式模式的变量名。
Pattern
必选项。要使用的正则表达式模式。如果使用语法 1，用 "/" 字符分隔模式。如果用语法 2，用引号将模式引起来。
Flags
可选项。如果使用语法 2 要用引号将 flag 引起来。标志可以组合使用，可用的有：
示例
下面的示例创建一个包含正则表达式模式及相关标志的对象(re)，向您演示正则表达式对象的用法。在本例中，作为结果的正则表达式对象又用于 match 方法中：
返回值： ain,ain,ain,ain//
属性 lastIndex 属性 | source 属性//
方法 compile 方法 | exec 方法 | test 方法//
要求 版本 3//
请参阅 RegExp 对象 | 正则表达式语法 | String 对象//
exec 方法
用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。
rgExp.exec(str)
参数
rgExp
必选项。包含正则表达式模式和可用标志的正则表达式对象。
str
必选项。要在其中执行查找的 String 对象或字符串文字。
说明//
如果 exec 方法没有找到匹配，则它返回 null。如果它找到匹配，则 exec 方法返回一个数组，并且更新全局 RegExp 对象的属性，以反映匹配结果。数组的0元素包含了完整的匹配，而第1到n元素中包含的是匹配中出现的任意一个子匹配。这相当于没有设置全局标志 (g) 的 match 方法。
如果为正则表达式设置了全局标志，exec 从以 lastIndex 的值指示的位置开始查找。如果没有设置全局标志，exec 忽略 lastIndex 的值，从字符串的起始位置开始搜索。
exec 方法返回的数组有三个属性，分别是 input、index 和 lastIndex。Input 属性包含了整个被查找的字符串。Index 属性中包含了整个被查找字符串中被匹配的子字符串的位置。LastIndex 属性中包含了匹配中最后一个字符的下一个位置。
示例//
下面的例子举例说明了 exec 方法的用法：
返回值：0-3The 4-8rain 9-11in 12-17Spain 18-23falls 24-30mainly 31-33in 34-37the 38-43plain
test 方法//
返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。
rgexp.test(str)
参数//
rgexp
必选项。包含正则表达式模式或可用标志的正则表达式对象。
str
必选项。要在其上测试查找的字符串。
说明
test 方法检查在字符串中是否存在一个模式，如果存在则返回 true，否则就返回 false。
全局 RegExp 对象的属性不由 test 方法来修改。
示例
下面的例子举例说明了 test 方法的用法：
函数调用：document.write (TestDemo(/ain+/ ,"The rain in Spain falls mainly in the plain."));
返回值：'The rain in Spain falls mainly in the plain.' contains 'ain+'
match 方法
使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。//
stringObj.match(rgExp)
参数//
stringObj
必选项。对其进行查找的 String 对象或字符串文字。
rgExp
必选项。为包含正则表达式模式和可用标志的正则表达式对象。也可以是包含正则表达式模式和可用标志的变量名或字符串文字。
说明//
如果 match 方法没有找到匹配，返回 null。如果找到匹配返回一个数组并且更新全局 RegExp 对象的属性以反映匹配结果。
match 方法返回的数组有三个属性：input、index 和 lastIndex。Input 属性包含整个的被查找字符串。Index 属性包含了在整个被查找字符串中匹配的子字符串的位置。LastIndex 属性包含了最后一次匹配中最后一个字符的下一个位置。
如果没有设置全局标志 (g)，数组的 0 元素包含整个匹配，而第 1 到 n 元素包含了匹配中曾出现过的任一个子匹配。这相当于没有设置全局标志的 exec 方法。如果设置了全局标志，元素 0 到 n 中包含所有匹配。
示例//
下面的示例演示了match 方法的用法：
返回值：ain
本示例说明带 g 标志设置的 match 方法的用法。
返回值：ain,ain,ain,ain
上面几行代码演示了字符串文字的 match 方法的用法。
返回值：The rain in Canada
search 方法
返回与正则表达式查找内容匹配的第一个子字符串的位置。
stringObj.search(rgExp)
参数//
stringObj
必选项。要在其上进行查找的 String 对象或字符串文字。
rgExp
必选项。包含正则表达式模式和可用标志的正则表达式对象。
说明
search 方法指明是否存在相应的匹配。如果找到一个匹配，search 方法将返回一个整数值，指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配，则返回 -1。
示例//
下面的示例演示了 search 方法的用法。
返回值：18
正则表达式语法
一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。
这里有一些可能会遇到的正则表达式示例：
下表是元字符及其在正则表达式上下文中的行为的一个完整列表：
字符 描述
/ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'/n' 匹配一个换行符。序列 '//' 匹配 "/" 而 "/(" 则匹配 "("。
^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '/n' 或 '/r' 之后的位置。
$ 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '/n' 或 '/r' 之前的位置。
* 匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。
+ 匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。
? 匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。
{n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。
{n,} n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。刘， "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。
. 匹配除 "/n" 之外的任何单个字符。要匹配包括 '/n' 在内的任何字符，请使用象 '[./n]' 的模式。
(pattern) 匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '/(' 或 '/)'。
(?:pattern) 匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。
(?=pattern) 正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。
(?!pattern) 负向预查，在任何不匹配Negative lookahead matches the search string at any point where a string not matching pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始
x|y 匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。
[xyz] 字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。
[^xyz] 负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'。
[a-z] 字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。
/b 匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er/b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。
/B 匹配非单词边界。'er/B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。
/cx 匹配由x指明的控制字符。例如， /cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。
/d 匹配一个数字字符。等价于 [0-9]。
/D 匹配一个非数字字符。等价于 [^0-9]。
/f 匹配一个换页符。等价于 /x0c 和 /cL。
/n 匹配一个换行符。等价于 /x0a 和 /cJ。
/r 匹配一个回车符。等价于 /x0d 和 /cM。
/s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ /f/n/r/t/v]。
/S 匹配任何非空白字符。等价于 [^ /f/n/r/t/v]。
/t 匹配一个制表符。等价于 /x09 和 /cI。
/v 匹配一个垂直制表符。等价于 /x0b 和 /cK。
/w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
/W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。
/xn 匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如， '/x41' 匹配 "A"。'/x041' 则等价于 '/x04' & "1"。正则表达式中可以使用 ASCII 编码。.
/num 匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)/1' 匹配两个连续的相同字符。
/n 标识一个八进制转义值或一个后向引用。如果 /n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。
/nm 标识一个八进制转义值或一个后向引用。如果 /nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 /nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 /nm 将匹配八进制转义值 nm。
/nml 如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。
/un 匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， /u00A9 匹配版权符号 (?)。
优先权顺序
在构造正则表达式之后，就可以象数学表达式一样来求值，也就是说，可以从左至右并按照一个优先权顺序来求值。
下表从最高优先级到最低优先级列出各种正则表达式操作符的优先权顺序：
普通字符
普通字符由所有那些未显式指定为元字符的打印和非打印字符组成。这包括所有的大写和小写字母字符，所有数字，所有标点符号以及一些符号。
最简单的正则表达式是一个单独的普通字符，可以匹配所搜索字符串中的该字符本身。例如，单字符模式 'A' 可以匹配所搜索字符串中任何位置出现的字母 'A'。这里有一些单字符正则表达式模式的示例：
等价的 VBScript 单字符正则表达式为：
可以将多个单字符组合在一起得到一个较大的表达式。例如，下面的 JScript 正则表达式不是别的，就是通过组合单字符表达式 'a'、'7'以及 'M' 所创建出来的一个表达式。
/a7M/
等价的 VBScript 表达式为：
"a7M"
请注意这里没有连接操作符。所需要做的就是将一个字符放在了另一个字符后面。
方法一：
<script type="text/javascript" language="javascript" src="/js/prototype-1.3.1.js"></script>
function doChange(formObj,gid){
noChange=false;
//var cid=formObj.xid.value;
var url="/game.do";
var pars="method=brand&gameid="+gid+"&brandid="+formObj.pid.value;
new Ajax.Updater("mm", url, {method: 'post', parameters: pars});
}
方法二：
function selectCB(f, gid)
{
if(f.pid.value ==0 ){
alert("请选择手机品牌！");
return;
}
var postParam="method=brand&gameid="+gid+"&brandid="+f.pid.value ;
var url="/game.do";
var reqMode="POST";
var resObjId="null";
//alert(url);
var res=sendForHTML(reqMode,url,false,postParam,resObjId);
alert(res);
if(res!="")
{
createSelectOption(res);
}
else
{
alert("获取手机型号信息有误！");
}
}
function sendForHTML(reqMode,reqUrl,aSync,postParam,returnToObjId){
var reqObj=getHttpRequest();
var resText="";
if(!reqObj){
alert("browser does not support ajax");
return;
}
reqObj.onreadystatechange = function() {
if (reqObj.readyState == 4) {
if (reqObj.status == 200) {
resText = reqObj.responseText;
} else {
alert('response2HTML:There was a problem with the request. return status='+reqObj.status);
}
}
};
reqObj.open(reqMode, reqUrl, aSync);
if('POST'==reqMode){
reqObj.setRequestHeader('Content-type','application/x-www-form-urlencoded');
reqObj.send(postParam);
}
else{
reqObj.send(null);
}
return resText;
}
function getHttpRequest()
{
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return http_request;
}
2.
Ajax这个概念的最早提出者Jesse James Garrett认为：
Ajax是Asynchronous JavaScript and XML的缩写。
Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括：
·使用XHTML和CSS标准化呈现;
·使用DOM实现动态显示和交互;
·使用XML和XSLT进行数据交换与处理;
·使用XMLHttpRequest进行异步数据读取;
·最后用JavaScript绑定和处理所有数据;
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
三、概述
虽然Garrent列出了7条Ajax的构成技术，但个人认为，所谓的Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，如果所用数据格式为XML的话，还可以再加上XML这一项(Ajax从服务器端返回的数据可以是XML格式，
也可以是文本等其他格式)。
在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。
而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载（白屏）的等待。
1、XMLHTTPRequest
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。
最早应用XMLHTTP的是微软,IE（IE5以上）通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。Mozilla（Mozilla1.0以上及NetScape7以上）做出的回应是创建它自己的继承XML代理类：XMLHttpRequest类。Konqueror (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。
XMLHttpRequest的应用：
·XMLHttpRequest对象在JS中的应用
| var xmlhttp = new XMLHttpRequest(); |
| var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP); XMLHttpRequest 对象方法 /** * Cross-browser XMLHttpRequest instantiation. */ if (typeof XMLHttpRequest == ’undefined’) { XMLHttpRequest = function () { var msxmls = [’MSXML3’, ’MSXML2’, ’Microsoft’] for (var i=0; i < msxmls.length; i++) { try { return new ActiveXObject(msxmls[i]+’.XMLHTTP’) } catch (e) { } } throw new Error("No XML component installed!") } } function createXMLHttpRequest() { try { // Attempt to create it "the Mozilla way" if (window.XMLHttpRequest) { return new XMLHttpRequest(); } // Guess not - now the IE way if (window.ActiveXObject) { return new ActiveXObject(getXMLPrefix() + ".XmlHttp"); } } catch (ex) {} return false; }; |
| 方法 | 描述 |
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 作为字符串返问完整的headers |
| getResponseHeader("headerLabel") | 作为字符串返问单个的header标签 |
| open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) | 设置未决的请求的目标 URL, 方法, 和其他参数 |
| send(content) | 发送请求 |
| setRequestHeader("label", "value") | 设置header并和请求一起发送 |
| 属性 | 描述 |
| onreadystatechange | 状态改变的事件触发器 |
| readyState | 对象状态(integer): 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 |
| responseText | 服务器进程返回数据的文本版本 |
| responseXML | 服务器进程返回数据的兼容DOM的XML文档对象 |
| status | 服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功" |
| statusText | 服务器返回的状态文本信息 |
JavaScript是一在浏览器中大量使用的编程语言，，他以前一直被贬低为一门糟糕的语言（他确实在使用上比较枯燥），以在常被用来作一些用来炫耀的小玩意和恶作剧或是单调琐碎的表单验证。但事实是，他是一门真正的编程语言，有着自已的标准并在各种浏览器中被广泛支持。
3、DOM
Document Object Model。
DOM是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述，让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。
所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现（例如，document 就代表“文件本身“这个对像，table 对象则代表 HTML 的表格对象等等）。这些对象可以由当今大多数的浏览器以 Script 来取用。
一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM（Document Object Model）中，DOM提供了网页中各个对象的读写的支持。
4、XML
可扩展的标记语言（Extensible Markup Language）具有一种开放的、可扩展的、可自描述的语言结构，它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言，就正如他的名字一样。他使对某些结构化数据的定义更加容易，并且可以通过他和其他应用程序交换数据。
5、综合
Jesse James Garrett提到的Ajax引擎，实际上是一个比较复杂的JavaScript应用程序，用来处理用户请求，读写服务器和更改DOM内容。
JavaScript的Ajax引擎读取信息，并且互动地重写DOM，这使网页能无缝化重构，也就是在页面已经下载完毕后改变页面内容，这是我们一直在通过JavaScript和DOM在广泛使用的方法，但要使网页真正动态起来，不仅要内部的互动，还需要从外部获取数据，在以前，我们是让用户来输入数据并通过DOM来改变网页内容的，但现在，XMLHTTPRequest，可以让我们在不重载页面的情况下读写服务器上的数据，使用户的输入达到最少。
基于XML的网络通讯也并不是新事物，实际上FLASH和JAVA Applet都有不错的表现，现在这种富交互在网页上也可用了，基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序。
Ajax是传统WEB应用程序的一个转变。以前是服务器每次生成HTML页面并返回给客户端（浏览器）。在大多数网站中，很多页面中至少90%都是一样的，比如：结构、格式、页头、页尾、广告等，所不同的只是一小部分的内容，但每次服务器都会生成所有的页面再返回给客户端，这无形之中是一种浪费，不管是对于用户的时间、带宽、CPU耗用，还是对于ISP的高价租用的带宽和空间来说。如果按一页来算，只能几K或是几十K可能并不起眼，但像SINA每天要生成几百万个页面的大ISP来说，可以说是损失巨大的。而AJAX可以所为客户端和服务器的中间层，来处理客户端的请求，并根据需要向服务器端发送请求，用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于纯后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低，基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序，所以Ajax对于用户和ISP来说是双盈的。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），而在以前两者是没有清晰的界限的，数据与呈现分离的分离，有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理。
四、应用
Ajax理念的出现，揭开了无刷新更新页面时代的序幕，并有代替传统web开发中采用form(表单)递交方式更新web页面的趋势，可以算是一个里程碑。但Ajax都不是适用于所有地方的，它的适用范围是由它的特性所决定的。
举个应用的例子，是关于级联菜单方面的Ajax应用。
我们以前的对级联菜单的处理是这样的：
为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用JavaScript来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为冗余数据而浪费用户的资源，特别是在菜单结构复杂、数据量大的情况下（比如菜单有很多级、每一级菜又有上百个项目），这种弊端就更为突出。
如果在此案中应用Ajax后，结果就会有所改观：
在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操作一级菜单其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据，如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，以此类推……这样，用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低。
此外，Ajax由于可以调用外部数据，也可以实现数据聚合的功能（当然要有相应授权），比如微软刚刚在3月15日发布的在线RSS阅读器BETA版；还可以利于一些开放的数据，开发自已的一些应用程序，比如用Amazon的数据作的一些新颖的图书搜索应用。
总之，Ajax适用于交互较多，频繁读数据，数据分类良好的WEB应用。
五、Ajax的优势
1、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担；
2、无刷新更新页面，减少用户实际和心理等待时间；
首先，“按需取数据”的模式减少了数据的实际读取量，打个很形象的比方，如果说重载的方式是从一个终点回到原点再到另一个终点的话，那么Ajax就是以一个终点为基点到达另一个终点；
图5－1
图5－2
其次，即使要读取比较大的数据，也不用像RELOAD一样出现白屏的情况，由于Ajax是用XMLHTTP发送请求得到服务端应答数据，在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面的，所以在读取数据的过程中，用户所面对的也不是白屏，而是原来的页面状态（或者可以加一个LOADING的提示框让用户了解数据读取的状态），只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的，用户几乎感觉不到。总之用户是很敏感的，他们能感觉到你对他们的体贴，虽然不太可能立竿见影的效果，但会在用户的心中一点一滴的积累他们对网站的依赖。
3、更好的用户体验；
4、也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本；
5、Ajax由于可以调用外部数据；
6、基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序；
7、Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离）；
8、对于用户和ISP来说是双盈的。
六、Ajax的问题
1、一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax；
2、用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事；
3、Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等；
4、对流媒体的支持没有FLASH、Java Applet好；
七、结束语
更好的Ajax应用，需要更多的客户端的开发，和对当前的WEB应用理念的思考，而且良好的用户体验，来源于为处处用户考虑的理念，而不单纯是某种技术。
3. AJAX控件Properties
Accordion控件时的常用属性标签
| [align=center]属性标签名[/align] | [align=center]描 述[/align] |
| SelectedIndex | 该控件初次加载时展开的AccordionPane面板的索引值 |
| HeaderCssClass | 该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS Class |
| ContentCssClass | 该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSS Class |
| AutoSize | 在展开具有不同高度的AccordionPane面板时，该Accordion的总高度的变化方式。可选如下3个值： r None：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短 r Limit：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短，不过最高不会超过Accordion的Height属性设定值。若是其内容高度超过了Height属性设定值，则将自动显示滚动条 r Fill：该Accordion的高度将固定为Height属性的设定值，不随当前展开的不同高度的AccordionPane面板而变化。若是某个AccordionPane的内容高度超过了Height属性设定值，则将自动显示滚动条 |
| FadeTransitions | 若该属性值设置为true，则在切换当前展开的AccordionPane面板时，将带有淡入淡出效果 |
| TransitionDuration | 展开/折叠一个AccordionPane面板的过程所花费的时间，单位为毫秒 |
| FramesPerSecond | 播放展开/折叠AccordionPane面板动画的每秒钟帧数 |
| DataSourceID | 页面中某个DataSource控件的ID，用于通过数据绑定自动生成AccordionPane面板 |
| <Panes> | 该标签内将包含一系列的<ajaxToolkit:AccordionPane>标签，即Accordion- Pane的声明，用来表示Accordion中包含的面板 |
| <HeaderTemplate> | 在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的标题区域中的内容模板 |
| <ContentTemplate> | 在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的正文区域中的内容模板 |
| [align=center]属性标签名[/align] | [align=center]描 述[/align] |
| HeaderCssClass | 该AccordionPane面板的标题区域所应用的CSS Class，将覆盖声明在Accordion中的同名属性 |
| ContentCssClass | 该AccordionPane面板的内容区域所应用的CSS Class，将覆盖声明在Accordion中的同名属性 |
| <Header> | 该标签内将定义此AccordionPane标题区域中的内容 |
| <Content> | 该标签内将定义此AccordionPane正文区域中的内容 |
TargetControlID – 控件的ID
HorizontalOffset – 控件距离浏览器的水平边距. 默认是0px。
HorizontalSide - 水平停靠方向。可选择(Left, Center, or Right)。默认是Left
VerticalOffset -控件距离浏览器的垂直边距. 默认是0px。
VerticalSide -垂直停靠方向。可选择(Top, Middle, or Bottom)。默认是Top。
ScrollEffectDuration –控件复位时间，默认时间是0.1，单位是秒。
Animation控件的常用属性标签( 用来美化、装饰网站)
OnLoad：表示要触发的事件是加载页面时。
OnClick：表示要触发的事件是单击控件时。
OnMouseOver：表示要触发的事件是鼠标滑过时。
OnMouseOut：表示要触发的事件是鼠标移走时。
OnHoverOver：与OnMouseOver类似，对特定控件而言。
OnHoverOut：与OnMouseOut类似，对特定控件而言。
1．变色颜色的动画效果
本例要实现的是当鼠标滑过Panel时，Panel的颜色发生变化，当鼠标移走时，Panel的颜色又发生了变化，这需要“Color Animation”。Color Animation动画的属性主要有4个：
Duration：动画显示效果的时间间隔。
PropertyKey：要设置的属性值。
StartValue：属性的开始值。
EndValue：属性的结束值。
2．淡入淡出合并的动画效果
淡入淡出效果是网站中经常看到的效果，本例使用“Fade Animation”来实现这样的效果，“Fade Animation”的属性主要有4个：
duration：动画效果的时间间隔。
Fps：帧/秒的显示速度。
maximumOpacity：最大透明度。
minimumOpacity：最小透明度。
3．淡入和淡出分开的动画效果
上一个实例中，当鼠标滑过时，其实是完成两步：淡入和淡出。通常在实际应用中，淡入和淡出是分开的。本例要演示的是当鼠标滑过时，实现淡入效果，当鼠标移出时，实现淡出效果。
此功能需要使用“FadeIn Animation”和“FadeOut Animation”，其中两个动画控件有着相同的属性，属性内容如下：
duration：动画效果的时间间隔。
Fps：帧/秒的显示速度。
maximumOpacity：最大透明度。
minimumOpacity：最小透明度。
4．可伸缩的动画效果
本例要实现的效果是，当单击Panel时，变化Panel的高度和宽度。这需要使用“Resize Animation”动画控件。其属性主要有5个：
duration：动画效果的时间间隔。
Fps：帧/秒的显示速度。
width：变化后的宽度。
height：变化后的高度。
unit：高度和宽度的单位，通常为“px”。
AutoComplete控件的常用属性标签
1、TargetControlID:指定要实现提示功能的控件。
2、ServicePath:WebService的路径，提取数据的方法是写在一个WebService中的。
3、ServeiceMethod:写在WebService中的用于提取数据的方法的名字。
4、MinimumPrefixLength:用来设置用户输入多少字母才出现提示效果。
5、CompletionSetCount:设置提示数据的行数。
6、CompletionInterval:从服务器获取书的时间间隔，单位是毫秒。
Calendar控件常用属性标签
TargetControlID：用来显示选择日期的控件，改控件必需为TextBox
CssClass：设置日历的样式
Format：显示日期的格式，如yyMMdd,会显示071105
PopupButtonID：当日期是通过选定某个按钮弹出的时候，为改按钮的ID，一般为一个日历图片
CascadingDropDown主要属性
| [align=center]属性[/align] | [align=center]说明[/align] |
| TargetControlID | 指定要扩展的DropDownList的ID |
| Category | DropDownList表示的类别名称，在WebMethod中会用到 |
| PromptText | 没有选择时显示的文字 |
| LoadingText | 加载数据时显示的文字 |
| ServicePath | 获取数据的Web Service，为每个DropDownList都要指定 |
| ServiceMethod | 获取数据的Web Method |
| ParentControlID | 要扩展的DropDownList的父控件ID |
| SelectedValue | 默认的选择项的值 |
属性：
TargetControlID：该扩展器目标控件ID，即将要实现折叠、展开功能的控件的ID
ExpandControlID：指定一个服务器控件的ID，当用户点击该控件时，该扩展器的目标Panel控件将展开
CollapseControlID:指定一个服务器控件的ID，当用户点击该控件时，该扩展器的目标Panel控件将折叠
Collapsed：目标Panel控件的初始化状态，true代表折叠，false代表展开
TextLabelID：指定一个服务器Label控件的ID，用来显示此时目标Panel控件的折叠/展开状态
ImageControlID：指定一个服务器端Image控件的ID，用来告知用户此时目标Panel控件的折叠、展开状态
ExpandedText：当目标Panel控件为展开状态时，TextLabelID属性所指定的Label控件中的文字
CollapsedText：当目标Panel控件为折叠时，TextLabelID属性所指定的Label控件中的文字
ExpandedImage：当目标Panel控件为展开状态时，ImageControlID属性所指定的Image控件中图片的URL
CollapsedImage：当目标Panel控件为折叠状态时，ImageControlID属性所指定的Image控件中图片的URL
ConfirmButton控件主要属性
TargetControlID - 该属性指定一个控件（LinkButton、Button等），点击是出现确认对话框
ConfirmText - 确认对话框显示的提示文字(注: 可以使用html代码(如: " " 表示换行))
OnClientCancel –取消时，执行的js函数。
ConfirmOnFormSubmit - 直到页面被提交之前才弹出:换句话说就是等页面上的验证全部通过的时候才弹出这个对话框
MaskedEditExtender控件(用来设置文本框显示时的一些格式，主要是为了控制用户输入的内容格式。)
TargetControlID 拥有屏蔽编辑功能的文本控件ID
MaskType 屏蔽类型：None – 无屏蔽Number – 数字屏蔽Date – 日期屏蔽Time – 时间屏蔽DateTime – 日期+时间屏蔽
InputDirection:文本输入方向，从左到右或者从右到左
AcceptNegative:是否接受负数符号“-”
DisplayMoney:显示金额符号的位置
MessageValidatorTip:是否提示验证消息
PromptChararacter:没有输入完时的提示字符
OnInvalidCssClass:当被验证控件验证失败时应用的样式
OnFocusCssClass:当被验证控件获得焦点时应用的样式
MaskedEditValidator控件用来难用户输入的内容，与普通控件相似。
属性列表：
ControlExtender:被控制的MaskedEditExtender的ID
ControlToValidate:被验证的控件ID
IsValidEmpty:是否能为空
EmptyValueMessage:空值时提示的信息
InvalidValueMessage:验证没有通过提示的信息
ValidationGroup:验证组
Display:验证控件的显示模式
TooltipMessage:当被验证控件获得焦点，并且内容为空时显示信息
MutuallyExclusiveCheckBox常用属性标签
| 属性 | 描 述 |
| TargetControlID | 目标控件 |
| Key | 同一个key为同一组关联复选框 |
| [align=center]属性标签名[/align] | [align=center]描 述[/align] |
| CurrentRating | 该Rating控件当前的评级，即当前选中了几颗星 |
| MaxRating | 该Rating控件支持的最高评级数，即最多有几颗星 |
| RatingAlign | 星形图标的排列方向，可选Vertical（垂直）和Horizontal（水平） |
| RatingDirection | 星形图标的起始方向，可选LeftToRightTopToBottom（从左到右/从上到下）和RightToLeftBottomToTop（从右到左/从下到上） |
| ReadOnly | 若该属性值设置为true，则该Rating控件为只读的，用户不能对评级进行修改 |
| StarCssClass | 星形图标所应用的CSS Class |
| WaitingStarCssClass | 在用户对评级有所改变，且这个改变尚处于异步提交回服务器保存的过程中时星形图标所应用的CSS Class |
| FilledStarCssClass | 选中的星形图标所应用的CSS Class |
| EmptyStarCssClass | 未选中的星形图标所应用的CSS Class |
| OnChanged | 指定Changed事件的处理函数。Changed事件将在用户改变评级时触发，并通过异步而不是整页地回送发送回服务器。这样，在服务器端的事件处理函数中即可得到当前的所选值，并做后续操作 |
| Tag | 一个作为附加信息的上下文字符串，该附加信息将传递给Changed事件的服务器端处理程序，这样即可在其中根据需要使用这个值 |
| [align=center]属性标签名[/align] | [align=center]描 述[/align] |
| DataSourceID | 页面中某个DataSource控件的ID，用于通过数据绑定自动生成列表项目 |
| DataKeyField | 数据源中键字段的名称，该字段中的值应该在所在记录中是唯一且不变的，ReorderList将用条目中该字段的值作为记录的标志，将在更新/删除中使用 |
| AllowReorder | 是否允许用户对列表中的项目进行重新排序，若指定了<ReorderTemplate>，则该属性将自动设置为true |
| SortOrderField | 数据源中作为排序字段的名称。在用户进行重新排序之后，ReorderList将自动修改需要更新的条目的该字段 |
| DragHandleAlignment | 条目的可拖动区域与条目之间的相对位置关系，可选Top（上部）、Bottom（下部）、Left（左边）和Right（右边） |
| PostBackOnReorder | 若该属性值设置为true，则当用户对列表中的项目进行重新排序之后，将自动引发一次整页的回送；否则将以异步回调的方式向服务器端发送请求 |
| EditItemIndex | 列表中当前处于编辑模式下的项目的索引值 |
| ShowInsertItem | 若该属性值为true，则列表中将显示出一个用来添加新条目的特殊行，即<InsertItemTemplate>模板中定义的内容 |
| ItemInsertLocation | 插入的新行在整个列表中的位置，可选Beginning（第一项）或End（最后一项） |
| <ItemTemplate> | 该标签内将定义列表中普通条目的模板 |
| <DragHandleTemplate> | 该标签内将定义列表条目中可拖放区域的模板。用户只有在该区域中拖放才能够对该条目进行重排序 |
| <ReorderTemplate> | 该标签内将定义拖动列表条目时列表中可投放区域的模板 |
| <InsertItemTemplate> | 该标签内将定义用来添加新条目的特殊行的模板 |
| <EditItemTemplate> | 该标签内将定义处于编辑状态中的列表条目的模板 |
| <EmptyListTemplate> | 该标签内将定义空列表的模板。若列表中没有任何条目，则将显示该模板中定义的内容 |
//校验是否全由数字组成
function isDigit(s)
{
var patrn=/^[0-9]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
function isRegisterUserName(s)
{
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
if (!patrn.exec(s)) return false
return true
}//校验用户姓名：只能输入1-30个以字母开头的字串
function isTrueName(s)
{
var patrn=/^[a-zA-Z]{1,30}$/;
if (!patrn.exec(s)) return false
return true
}
}}
//校验密码：只能输入6-20个字母、数字、下划线
[code]
function isPasswd(s)
{
var patrn=/^(/w){6,20}$/;
if (!patrn.exec(s)) return false
return true
}//校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-”
function isTel(s)
{
//var patrn=/^[+]{0,1}(/d){1,3}[ ]?([-]?(/d){1,12})+$/;
var patrn=/^[+]{0,1}(/d){1,3}[ ]?([-]?((/d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}//校验手机号码：必须以数字开头，除数字外，可含有“-”
function isMobil(s)
{
var patrn=/^[+]{0,1}(/d){1,3}[ ]?([-]?((/d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}//校验邮政编码
function isPostalCode(s)
{
//var patrn=/^[a-zA-Z0-9]{3,12}$/;
var patrn=/^[a-zA-Z0-9 ]{3,12}$/;
if (!patrn.exec(s)) return false
return true
}//校验搜索关键字
function isSearch(s)
{
var patrn=/^[^`~!@#$%^&*()+=|///][/]/{/}:;'/,.<>/?]{1}[^`~!@$%^&()+=|///]
[/]/{/}:;'/,.<>?]{0,19}$/;
if (!patrn.exec(s)) return false
return true
}
function isIP(s) //by zergling
{
var patrn=/^[0-9.]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}正则表达式
"^//d+$" //非负整数（正整数 + 0） "^[0-9]*[1-9][0-9]*$" //正整数 "^((-//d+)|(0+))$" //非正整数（负整数 + 0） "^-[0-9]*[1-9][0-9]*$" //负整数 "^-?//d+$" //整数 "^//d+(//.//d+)?$" //非负浮点数（正浮点数 + 0） "^(([0-9]+//.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*//.[0-9]+)|([0-9]*[1-9][0-9]*))$" //正浮点数 "^((-//d+(//.//d+)?)|(0+(//.0+)?))$" //非正浮点数（负浮点数 + 0） "^(-(([0-9]+//.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*//.[0-9]+)|([0-9]*[1-9][0-9]*)))$" //负浮点数 "^(-?//d+)(//.//d+)?$" //浮点数 "^[A-Za-z]+$" //由26个英文字母组成的字符串 "^[A-Z]+$" //由26个英文字母的大写组成的字符串 "^[a-z]+$" //由26个英文字母的小写组成的字符串 "^[A-Za-z0-9]+$" //由数字和26个英文字母组成的字符串 "^//w+$" //由数字、26个英文字母或者下划线组成的字符串 "^[//w-]+(//.[//w-]+)*@[//w-]+(//.[//w-]+)+$" //email地址 "^[a-zA-z]+://(//w+(-//w+)*)(//.(//w+(-//w+)*))*(//?//S*)?$" //url "^[A-Za-z0-9_]*$"
正则表达式使用详解
简介
简单的说，正则表达式是一种可以用于模式匹配和替换的强有力的工具。其作用如下：
测试字符串的某个模式。例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。
替换文本。可以在文档中使用一个正则表达式来标识特定文字，然后可以全部将其删除，或者替换为别的文字。
根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字。
基本语法
在对正则表达式的功能和作用有了初步的了解之后，我们就来具体看一下正则表达式的语法格式。
正则表达式的形式一般如下：
/love/ 其中位于“/”定界符之间的部分就是将要在目标对象中进行匹配的模式。用户只要把希望查找匹配对象的模式内容放入“/”定界符之间即可。为了能够使用户更加灵活的定制模式内容，正则表达式提供了专门的“元字符”。所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符，可以用来规定其前导字符（即位于元字符前面的字符）在目标对象中的出现模式。
较为常用的元字符包括： “+”， “*”，以及 “?”。
“+”元字符规定其前导字符必须在目标对象中连续出现一次或多次。
“*”元字符规定其前导字符必须在目标对象中出现零次或连续多次。
“?”元字符规定其前导对象必须在目标对象中连续出现零次或一次。
下面，就让我们来看一下正则表达式元字符的具体应用。
/fo+/ 因为上述正则表达式中包含“+”元字符，表示可以与目标对象中的 “fool”, “fo”, 或者 “football”等在字母f后面连续出现一个或多个字母o的字符串相匹配。
/eg*/ 因为上述正则表达式中包含“*”元字符，表示可以与目标对象中的 “easy”, “ego”, 或者 “egg”等在字母e后面连续出现零个或多个字母g的字符串相匹配。
/Wil?/ 因为上述正则表达式中包含“？”元字符，表示可以与目标对象中的 “Win”, 或者“Wilson”,等在字母i后面连续出现零个或一个字母l的字符串相匹配。
有时候不知道要匹配多少字符。为了能适应这种不确定性，正则表达式支持限定符的概念。这些限定符可以指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。
{n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。
{n,} n 是一个非负整数。至少匹配 n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
除了元字符之外，用户还可以精确指定模式在匹配对象中出现的频率。例如，/jim {2,6}/ 上述正则表达式规定字符m可以在匹配对象中连续出现2-6次，因此，上述正则表达式可以同jimmy或jimmmmmy等字符串相匹配。
在对如何使用正则表达式有了初步了解之后，我们来看一下其它几个重要的元字符的使用方式。
/s：用于匹配单个空格符，包括tab键和换行符； /S：用于匹配除单个空格符之外的所有字符； /d：用于匹配从0到9的数字； /w：用于匹配字母，数字或下划线字符； /W：用于匹配所有与/w不匹配的字符； . ：用于匹配除换行符之外的所有字符。
（说明：我们可以把/s和/S以及/w和/W看作互为逆运算）
下面，我们就通过实例看一下如何在正则表达式中使用上述元字符。
//s+/ 上述正则表达式可以用于匹配目标对象中的一个或多个空格字符。
//d000/ 如果我们手中有一份复杂的财务报表，那么我们可以通过上述正则表达式轻而易举的查找到所有总额达千元的款项。
除了我们以上所介绍的元字符之外，正则表达式中还具有另外一种较为独特的专用字符，即定位符。定位符用于规定匹配模式在目标对象中的出现位置。 较为常用的定位符包括： “^”, “$”, “/b” 以及 “/B”。
“^”定位符规定匹配模式必须出现在目标字符串的开头 “$”定位符规定匹配模式必须出现在目标对象的结尾 “/b”定位符规定匹配模式必须出现在目标字符串的开头或结尾的两个边界之一 “/B”定位符则规定匹配对象必须位于目标字符串的开头和结尾两个边界之内， 即匹配对象既不能作为目标字符串的开头，也不能作为目标字符串的结尾。
同样，我们也可以把“^”和“$”以及“/b”和“/B”看作是互为逆运算的两组定位符。举例来说： /^hell/ 因为上述正则表达式中包含“^”定位符，所以可以与目标对象中以 “hell”, “hello”或“hellhound”开头的字符串相匹配。 /ar$/ 因为上述正则表达式中包含“$”定位符，所以可以与目标对象中以 “car”, “bar”或 “ar” 结尾的字符串相匹配。 //bbom/ 因为上述正则表达式模式以“/b”定位符开头，所以可以与目标对象中以 “bomb”, 或 “bom”开头的字符串相匹配。/man/b/ 因为上述正则表达式模式以“/b”定位符结尾，所以可以与目标对象中以 “human”, “woman”或 “man”结尾的字符串相匹配。
为了能够方便用户更加灵活的设定匹配模式，正则表达式允许使用者在匹配模式中指定某一个范围而不局限于具体的字符。例如：
/[A-Z]/ 上述正则表达式将会与从A到Z范围内任何一个大写字母相匹配。 /[a-z]/ 上述正则表达式将会与从a到z范围内任何一个小写字母相匹配。 /[0-9]/ 上述正则表达式将会与从0到9范围内任何一个数字相匹配。 /([a-z][A-Z][0-9])+/ 上述正则表达式将会与任何由字母和数字组成的字符串，如 “aB0” 等相匹配。
这里需要提醒用户注意的一点就是可以在正则表达式中使用 “()” 把字符串组合在一起。“()”符号包含的内容必须同时出现在目标对象中。因此，上述正则表达式将无法与诸如 “abc”等的字符串匹配，因为“abc”中的最后一个字符为字母而非数字。
如果我们希望在正则表达式中实现类似编程逻辑中的“或”运算，在多个不同的模式中任选一个进行匹配的话，可以使用管道符 “|”。例如：/to|too|2/ 上述正则表达式将会与目标对象中的 “to”, “too”, 或 “2” 相匹配。
正则表达式中还有一个较为常用的运算符，即否定符 “[^]”。与我们前文所介绍的定位符 “^” 不同，否定符 “[^]”规定目标对象中不能存在模式中所规定的字符串。例如：/[^A-C]/ 上述字符串将会与目标对象中除A，B，和C之外的任何字符相匹配。一般来说，当“^”出现在 “[]”内时就被视做否定运算符；而当“^”位于“[]”之外，或没有“[]”时，则应当被视做定位符。
最后，当用户需要在正则表达式的模式中加入元字符，并查找其匹配对象时，可以使用转义符“/”。例如：/Th/*/ 上述正则表达式将会与目标对象中的“Th*”而非“The”等相匹配。
在构造正则表达式之后，就可以象数学表达式一样来求值，也就是说，可以从左至右并按照一个优先级顺序来求值。优先级如下：
1．/ 转义符
2．(), (?:), (?=), [] 圆括号和方括号
3．*, +, ?, {n}, {n,}, {n,m} 限定符
4．^, $, /anymetacharacter 位置和顺序
5．|“或”操作使用实例
在JavaScript 1.2中带有一个功能强大的RegExp()对象，可以用来进行正则表达式的匹配操作。其中的test()方法可以检验目标对象中是否包含匹配模式，并相应的返回true或false。
我们可以使用JavaScript编写以下脚本，验证用户输入的邮件地址的有效性。
<html>
<head>
<script language="Javascript1.2">
<!-- start hiding
function verifyAddress(obj)
{
var email = obj.email.value;
var pattern =
/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(/.[a-zA-Z0-9_-])+/;
flag = pattern.test(email);
if(flag)
{
alert(“Your email address is correct!”);
return true;
}
else
{
alert(“Please try again!”);
return false;
}
}
// stop hiding -->
</script>
</head>
<body>
<form onSubmit="return verifyAddress(this);">
<input name="email" type="text">
<input type="submit">
</form>
</body>
</html>正则表达式对象
本对象包含正则表达式模式以及表明如何应用模式的标志。
语法 1 re = /pattern/[flags]
语法 2 re = new RegExp("pattern",["flags"])参数
re
必选项。将要赋值为正则表达式模式的变量名。
Pattern
必选项。要使用的正则表达式模式。如果使用语法 1，用 "/" 字符分隔模式。如果用语法 2，用引号将模式引起来。
Flags
可选项。如果使用语法 2 要用引号将 flag 引起来。标志可以组合使用，可用的有：
g （全文查找出现的所有 pattern） i （忽略大小写） m （多行查找）
示例
下面的示例创建一个包含正则表达式模式及相关标志的对象(re)，向您演示正则表达式对象的用法。在本例中，作为结果的正则表达式对象又用于 match 方法中：
function MatchDemo()
{
var r, re; // 声明变量。
var s = "The rain in Spain falls mainly in the plain";
re = new RegExp("ain","g"); // 创建正则表达式对象。
r = s.match(re); // 在字符串 s 中查找匹配。
return(r);
}返回值： ain,ain,ain,ain//
属性 lastIndex 属性 | source 属性//
方法 compile 方法 | exec 方法 | test 方法//
要求 版本 3//
请参阅 RegExp 对象 | 正则表达式语法 | String 对象//
exec 方法
用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。
rgExp.exec(str)
参数
rgExp
必选项。包含正则表达式模式和可用标志的正则表达式对象。
str
必选项。要在其中执行查找的 String 对象或字符串文字。
说明//
如果 exec 方法没有找到匹配，则它返回 null。如果它找到匹配，则 exec 方法返回一个数组，并且更新全局 RegExp 对象的属性，以反映匹配结果。数组的0元素包含了完整的匹配，而第1到n元素中包含的是匹配中出现的任意一个子匹配。这相当于没有设置全局标志 (g) 的 match 方法。
如果为正则表达式设置了全局标志，exec 从以 lastIndex 的值指示的位置开始查找。如果没有设置全局标志，exec 忽略 lastIndex 的值，从字符串的起始位置开始搜索。
exec 方法返回的数组有三个属性，分别是 input、index 和 lastIndex。Input 属性包含了整个被查找的字符串。Index 属性中包含了整个被查找字符串中被匹配的子字符串的位置。LastIndex 属性中包含了匹配中最后一个字符的下一个位置。
示例//
下面的例子举例说明了 exec 方法的用法：
function RegExpTest()
{
var ver = Number(ScriptEngineMajorVersion() + "." + ScriptEngineMinorVersion())
if (ver >= 5.5){ // 测试 JScript 的版本。
var src = "The rain in Spain falls mainly in the plain.";
var re = //w+/g; // 创建正则表达式模式。
var arr;
while ((arr = re.exec(src)) != null)
document.write(arr.index + "-" + arr.lastIndex + arr + "/t");
}
else{
alert("请使用 JScript 的更新版本");
}
}返回值：0-3The 4-8rain 9-11in 12-17Spain 18-23falls 24-30mainly 31-33in 34-37the 38-43plain
test 方法//
返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。
rgexp.test(str)
参数//
rgexp
必选项。包含正则表达式模式或可用标志的正则表达式对象。
str
必选项。要在其上测试查找的字符串。
说明
test 方法检查在字符串中是否存在一个模式，如果存在则返回 true，否则就返回 false。
全局 RegExp 对象的属性不由 test 方法来修改。
示例
下面的例子举例说明了 test 方法的用法：
function TestDemo(re, s)
{
var s1; // 声明变量。
// 检查字符串是否存在正则表达式。
if (re.test(s)) // 测试是否存在。
s1 = " contains "; // s 包含模式。
else
s1 = " does not contain "; // s 不包含模式。
return("'" + s + "'" + s1 + "'"+ re.source + "'"); // 返回字符串。
}函数调用：document.write (TestDemo(/ain+/ ,"The rain in Spain falls mainly in the plain."));
返回值：'The rain in Spain falls mainly in the plain.' contains 'ain+'
match 方法
使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。//
stringObj.match(rgExp)
参数//
stringObj
必选项。对其进行查找的 String 对象或字符串文字。
rgExp
必选项。为包含正则表达式模式和可用标志的正则表达式对象。也可以是包含正则表达式模式和可用标志的变量名或字符串文字。
说明//
如果 match 方法没有找到匹配，返回 null。如果找到匹配返回一个数组并且更新全局 RegExp 对象的属性以反映匹配结果。
match 方法返回的数组有三个属性：input、index 和 lastIndex。Input 属性包含整个的被查找字符串。Index 属性包含了在整个被查找字符串中匹配的子字符串的位置。LastIndex 属性包含了最后一次匹配中最后一个字符的下一个位置。
如果没有设置全局标志 (g)，数组的 0 元素包含整个匹配，而第 1 到 n 元素包含了匹配中曾出现过的任一个子匹配。这相当于没有设置全局标志的 exec 方法。如果设置了全局标志，元素 0 到 n 中包含所有匹配。
示例//
下面的示例演示了match 方法的用法：
function MatchDemo()
{
var r, re; // 声明变量。
var s = "The rain in Spain falls mainly in the plain";
re = /ain/i; // 创建正则表达式模式。
r = s.match(re); // 尝试匹配搜索字符串。
return(r); // 返回第一次出现 "ain" 的地方。
}返回值：ain
本示例说明带 g 标志设置的 match 方法的用法。
function MatchDemo()
{
var r, re; // 声明变量。
var s = "The rain in Spain falls mainly in the plain";
re = /ain/ig; // 创建正则表达式模式。
r = s.match(re); // 尝试去匹配搜索字符串。
return(r); // 返回的数组包含了所有 "ain"
// 出现的四个匹配。
}返回值：ain,ain,ain,ain
上面几行代码演示了字符串文字的 match 方法的用法。
var r, re = "Spain"; r = "The rain in Spain".replace(re, "Canada"); return r;
返回值：The rain in Canada
search 方法
返回与正则表达式查找内容匹配的第一个子字符串的位置。
stringObj.search(rgExp)
参数//
stringObj
必选项。要在其上进行查找的 String 对象或字符串文字。
rgExp
必选项。包含正则表达式模式和可用标志的正则表达式对象。
说明
search 方法指明是否存在相应的匹配。如果找到一个匹配，search 方法将返回一个整数值，指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配，则返回 -1。
示例//
下面的示例演示了 search 方法的用法。
function SearchDemo()
{
var r, re; // 声明变量。
var s = "The rain in Spain falls mainly in the plain.";
re = /falls/i; // 创建正则表达式模式。
r = s.search(re); // 查找字符串。
return(r); // 返回 Boolean 结果。
}返回值：18
正则表达式语法
一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。
这里有一些可能会遇到的正则表达式示例：
JScript VBScript 匹配
/^/[ /t]*$/ "^/[ /t]*$" 匹配一个空白行。
//d{2}-/d{5}/ "/d{2}-/d{5}" 验证一个ID 号码是否由一个2位数字，一个连字符以及一个5位数字组成。
/<(.*)>.*<///1>/ "<(.*)>.*<///1>" 匹配一个 HTML 标记。下表是元字符及其在正则表达式上下文中的行为的一个完整列表：
字符 描述
/ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'/n' 匹配一个换行符。序列 '//' 匹配 "/" 而 "/(" 则匹配 "("。
^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '/n' 或 '/r' 之后的位置。
$ 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '/n' 或 '/r' 之前的位置。
* 匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。
+ 匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。
? 匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。
{n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。
{n,} n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。刘， "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。
. 匹配除 "/n" 之外的任何单个字符。要匹配包括 '/n' 在内的任何字符，请使用象 '[./n]' 的模式。
(pattern) 匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '/(' 或 '/)'。
(?:pattern) 匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。
(?=pattern) 正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。
(?!pattern) 负向预查，在任何不匹配Negative lookahead matches the search string at any point where a string not matching pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始
x|y 匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。
[xyz] 字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。
[^xyz] 负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'。
[a-z] 字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。
/b 匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er/b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。
/B 匹配非单词边界。'er/B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。
/cx 匹配由x指明的控制字符。例如， /cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。
/d 匹配一个数字字符。等价于 [0-9]。
/D 匹配一个非数字字符。等价于 [^0-9]。
/f 匹配一个换页符。等价于 /x0c 和 /cL。
/n 匹配一个换行符。等价于 /x0a 和 /cJ。
/r 匹配一个回车符。等价于 /x0d 和 /cM。
/s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ /f/n/r/t/v]。
/S 匹配任何非空白字符。等价于 [^ /f/n/r/t/v]。
/t 匹配一个制表符。等价于 /x09 和 /cI。
/v 匹配一个垂直制表符。等价于 /x0b 和 /cK。
/w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
/W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。
/xn 匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如， '/x41' 匹配 "A"。'/x041' 则等价于 '/x04' & "1"。正则表达式中可以使用 ASCII 编码。.
/num 匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)/1' 匹配两个连续的相同字符。
/n 标识一个八进制转义值或一个后向引用。如果 /n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。
/nm 标识一个八进制转义值或一个后向引用。如果 /nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 /nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 /nm 将匹配八进制转义值 nm。
/nml 如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。
/un 匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， /u00A9 匹配版权符号 (?)。
优先权顺序
在构造正则表达式之后，就可以象数学表达式一样来求值，也就是说，可以从左至右并按照一个优先权顺序来求值。
下表从最高优先级到最低优先级列出各种正则表达式操作符的优先权顺序：
操作符 描述
/ 转义符
(), (?:), (?=), [] 圆括号和方括号
*, +, ?, {n}, {n,}, {n,m} 限定符
^, $, /anymetacharacter 位置和顺序
| “或”操作普通字符
普通字符由所有那些未显式指定为元字符的打印和非打印字符组成。这包括所有的大写和小写字母字符，所有数字，所有标点符号以及一些符号。
最简单的正则表达式是一个单独的普通字符，可以匹配所搜索字符串中的该字符本身。例如，单字符模式 'A' 可以匹配所搜索字符串中任何位置出现的字母 'A'。这里有一些单字符正则表达式模式的示例：
/a/ /7/ /M/
等价的 VBScript 单字符正则表达式为：
"a" "7" "M"
可以将多个单字符组合在一起得到一个较大的表达式。例如，下面的 JScript 正则表达式不是别的，就是通过组合单字符表达式 'a'、'7'以及 'M' 所创建出来的一个表达式。
/a7M/
等价的 VBScript 表达式为：
"a7M"
请注意这里没有连接操作符。所需要做的就是将一个字符放在了另一个字符后面。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 