AJAX实例入门Word格式.docx
《AJAX实例入门Word格式.docx》由会员分享，可在线阅读，更多相关《AJAX实例入门Word格式.docx（16页珍藏版）》请在冰豆网上搜索。
,xml）.get（id）;
#messagewindow"
）.prepend（"
b>
"
+$（"
author"
message）.text（）+
/b>
:
text"
br/>
）;
}
functionupdateMsg（）{
{time:
timestamp},function（xml）{
#loading"
）.remove（）;
setTimeout（'
updateMsg（）'
4000）;
styletype="
text/css"
#messagewindow{
height:
250px;
border:
1pxsolid;
padding:
5px;
overflow:
auto;
#wrapper{
margin:
width:
438px;
/style>
/head>
body>
divid="
wrapper"
pid="
messagewindow"
spanid="
loading"
Loading...<
/span>
/p>
formid="
chatform"
Name:
inputtype="
id="
/>
Message:
msg"
submit"
value="
ok"
/form>
/div>
/body>
/html>
/*
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:
//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（{
$（'
username'
）,
checkmark.jpg'
warning.jpg'
4,y:
4},
4,
JS判断输入中文字符并读取出来
!
DOCTYPEHTML>
metacharset="
gb2312"
区分中英文字符的两种方法:
正则和charCodeAt（）方法@Mr.Think<
style>
/*resetcss*/
body{font-size:
0.8em;
letter-spacing:
1px;
font-family:
\5fae\8f6f\96c5\9ed1;
line-height:
1.8em}
div,h2,p,fieldset,legend,form,textarea,span,em,sub{margin:
0;
padding:
0}
input{font:
12px/1.5tahoma,arial,sans-serif;
vertical-align:
middle}
h1{font-size:
1em;
font-weight:
normal}
h1a{background:
#047;
2px3px;
color:
#fff;
text-decoration:
none}
h1a:
hover{background:
#a40000;
underline}
h3{color:
#888;
bold;
font-size:
margin:
1emauto;
position:
relative}
/*democss*/
fieldset{padding:
20px;
border:
1pxsolid#ccc;
width:
720px}
fieldsetlegend{background:
text-align:
center;
08px;
margin-left:
25px}
fieldsetlabel{display:
block;
padding-left:
25px;
40px}
fieldsetlabelinput{padding:
1pxsolid#888;
200px;
height:
16px}
fieldsetlabelinput:
focus{border:
1pxsolidblue}
metaname="
content="
Mr.Think青鸟"
keywords"
Mr.Think,前端开发,WEB前端,前端技术,前端开发,WEB前端开发,用户体验,网站策划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP爱好者,Bluebirdsky"
description"
Mr.Think的博客,中文网名青鸟,现专注于WEB前端开发,同时也是一位PHP的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,喜好肉食.这里是我记录知识与生活琐事的地方."
linkrel="
pingback"
href="
alternate"
type="
application/rss+xml"
title="
Mr.Think的博客RSSFeed"
script>
/*******************************
*@authorMr.Think
*@authorblog
*@2010.10.22
*@可自由转载及使用,但请注明版权归属
*******************************/
window.onload=function（）{
varregExpForm=document.getElementById（'
regexp'
varcharCodeAt=document.getElementById（'
charcodeat'
varentryVal=null;
//输入的值
varcnChar=null;
//中文字符
varcnArr=newArray（）;
//存放中文字符的数组
varentryLen=null;
//输入字符的长度
//通过正则区分中英文字符--Mr.Think推荐方法
regExpForm.onblur=function（）{
entryVal=this.value;
entryLen=entryVal.length;
cnChar=entryVal.match（/[^\x00-\x80]/g）;
//利用match方法检索出中文字符并返回一个存放中文的数组
entryLen+=cnChar.length;
//算出实际的字符长度
alert（'
你输入了'
+cnChar.length+'
个中文字符;
\n它们分别是:
+cnChar+'
;
\n共计输入了'
+entryLen+'
个字符.'
}
//通过charCodeAt区分中英文字符
charCodeAt.onblur=function（）{
for（vari=0;
i<
entryVal.length;
i++）{
if（entryVal.charCodeAt（i）>
255）{//遍历判断字符串中每个字符的Unicode码,大于255则为中文
cnArr.push（entryVal[i]）;
//讲符合条件的值插入到中文字符数组中
//注意一个小bug,push是向数组的末尾添加一个或多个元素并返回新的长度,所以未刷新的情况下反复blur会累加字符值
entryLen+=cnArr.length;
+cnArr.length+'
+cnArr+'
h1>
ahref="
@专注前端技术,热爱PHP,崇尚简单生活.<
/h1>
h3>
返回文章页:
/a>
/h3>
--DEMOstart-->
fieldset>
legend>
请在如下表单中输入字符后点击表单外区域<
/legend>
labelfor="
regexp"
通过正则表达式判断：
inputid="
name="
/label>
charcodeat"
通过charCodeAt（）方法判断：
/fieldset>
//////////////////
鼠标提示
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
metahttp-equiv="
Content-Type"
text/html;
charset=gb2312"
鼠标提示符<
*{padding:
0;
li{}
body{background:
#fdf7f7;
#explain{height:
60px;
border-bottom:
1pxsolid#999999;
background:
#eee;
font-size:
14px;
color:
#666;
text-align:
center;
line-height:
#explaina{color:
#990000;
font-weight:
bold;
text-decoration:
none;
1pxdotted#990000;
#explaina:
hover{border-bottom:
1pxsolid#990000;
#explainstrong{color:
ul{width:
716px;
position:
absolute;
top:
260px;
left:
50%;
margin-left:
-358px;
li{width:
160px;
100px;
list-style:
#fff;
3px;
border-top:
1pxsolid#ddd;
border-right:
border-left:
float:
left;
margin-right:
10px;
cursor:
pointer;
img{float:
#topic{width:
270px;
200px;
#topic.adorn{width:
7px;
11px;
hidden;
url（/upload/201011/20101103150729602.gif）;
bottom:
15px;
-7px;
#topic.adorn_r{width:
url（/upload/201011/20101103150729137.gif）;
right:
#topic.inner_html{padding:
20px;
12px;
text-indent:
24px;
font-family:
arial;
#topic.inner_htmla{color:
#topic.inner_htmla:
text/javascript"
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;
aElement.length;
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
升级会员 