AJAX实例入门.docx

/*

Class:

dwAvailabilityChecker

Author:

DavidWalsh

Website:

http:

//davidwalsh.name

Version:

1.0

Date:

09/23/2008

BuiltFor:

MooTools1.2.0

SAMPLEUSAGEATBOTTOMOFTHISFILE

*/

vardwAvailabilityChecker=newClass（{

//implements

Implements:

[Options],

//options

options:

{

trigger:

'keyup',

offset:

{x:

0,y:

0},

element:

'',

minLength:

5,

availableClass:

'available',

takenClass:

'taken',

availableImage:

'',

takenImage:

'',

url:

'ajax-username-check.php'

},

//initialization

initialize:

function（options）{

//setoptions

this.setOptions（options）;

//validateit

this.validate（）;

},

//amethodthatdoeswhateveryouwant

validate:

function（）{

this.options.element.addEvent（this.options.trigger,function（）{

if（this.options.element.value.length>=this.options.minLength）{

varothis=this;

varrequest=newRequest（{

url:

othis.options.url,

method:

'get',

data:

{

username:

othis.options.element.value,

ajax:

1

},

onRequest:

function（）{

//removeexistingclasses

othis.options.element.removeClass（othis.options.availableClass）.removeClass（othis.options.takenClass）;

},

onComplete:

function（response）{

//addclass

othis.options.element.addClass（response==1?

othis.options.availableClass:

othis.options.takenClass）;

othis.injectImage（response==1?

othis.options.availableImage:

othis.options.takenImage）;

}

}）.send（）;

}

}.bind（this））;

},

//addstheimage

injectImage:

function（image）{

//figureoutitsposition

varpos=this.options.element.getCoordinates（）;

varimg=newElement（'img',{

src:

image,

styles:

{

'z-index':

100000,

'position':

'absolute',

'top':

pos.top+this.options.offset.y,

'left':

pos.left+pos.width+this.options.offset.x

}

}）.inject（document.body）;

}

}）;

/*usage

//oncetheDOMisready

window.addEvent（'domready',function（）{

varvalidator=newdwAvailabilityChecker（{

trigger:

'keyup',

element:

$（'username'）,

availableImage:

'checkmark.jpg',

takenImage:

'warning.jpg',

offset:

{x:

4,y:

4},

minLength:

4,

url:

'ajax-username-check.php'

}）;

}）;

*/

JS判断输入中文字符并读取出来

DOCTYPEHTML>

@专注前端技术,热爱PHP,崇尚简单生活.

返回文章页:

--DEMOstart-->

//////////////////

鼠标提示

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

varg_aData=

[

'石川（blue）为大家分享了以下内容：

新浪微博效果、DOM、闭包使用技巧、面向对象、高级拖拽、运动特效、AJax、官网导航效果等^_^！

',

'课程内容特别精选了JavaScript的高级DOM操作、AJAX技术应用、OOP思想、继承等知识进行深度剖析，力图为学员揭秘各种网站交互效果，并帮助学员建立正确而清晰的编程思路……',

'高级页面架构师精品课程是为了让大家制作出较为规范的页面，例如：

符合W3C标准、标签语义化、模块化布局、能熟练解决浏览器兼容性、能洞晰CSS代码性能等问题的朋友们而设。

通过这门课程，你可以充分了解到标准带来的好处、页面代码的简洁与CSS样式的高重用性……',

'零基础网页制作精品课程站在完全不懂的学员角度考虑，在课程安排、课后辅导等几个方面着手，力求为学员带来一门系统化极强、讲解风格却通俗易懂的精品入门课程，欢迎朋友们来试听，一探究竟！

'

];

varg_oTimerHide=null;

window.onload=function（）

{

varaLi=document.getElementById（'content'）.getElementsByTagName（'li'）;

bindTopic（aLi）;

};

functionbindTopic（aElement）

{

vari=0;

for（i=0;i

{

aElement[i].miaovIndex=i;

aElement[i].onmouseover=function（ev）{showTopic（this.miaovIndex,window.event||ev）;};

aElement[i].onmouseout=function（）{hideTopic（）;};

aElement[i].onmousemove=function（e