| 函数?/td> | 解释 | 举例 |
| Element.toggle | 交替隐藏或显C?/td> | Element.toggle(''div1'',''div2'') |
| Element.hide | 隐藏 | Element.hide(''div1'',''div2'') |
| Element.show | 昄 | Element.show(''div1'',''div2'') |
| Element.remove | 删除 | Element.remove(''div1'',''div2'') |
| Element.getHeight | 取得高度 | Element.getHeight(''div1'') |
| Toggle.display | 和Element.toggle相同 | Toggle.display(''div1'',''div2'') |
| Insertion.Before | 在DIV前插入文?/td> | Insertion.Before(''div1'',''my content'') |
| Insertion.After | 在DIV后插入文?/td> | Insertion.After(''div1'',''my content'') |
| Insertion.Top | 在DIV里最前插入文?/td> | Insertion.Top(''div1'',''this is a text'') |
| Insertion.Bottom | 在DIV里最后插入文?/td> | Insertion.Bottom(''div1'',''this is a text'') |
| PeriodicalExecuter | 以给定频率调用一DJavaScript | PeridicalExecutor(test, 1)"q里test是Javascript的函?1是频?1U?. |
| $ | 取得一个DIV, 相当于getElementById() | $(''div1'') |
| Field.clear | 清空一个输入框 | Field.clear(''textfield1'') |
| Field.focus | ?nbsp;焦点集中在输入框?/td> | Field.focus(''select1'') |
| Field.present | 判断内容是否为空 | alert(Field.present(''textfield1''))" |
| Field.select | 选择输入框的内容 | Field.select(''textfield1'')" |
| Field.activate | ?nbsp;焦点集中在输入框上ƈ选择输入框的内容 | Field.activate(''textfield1'')" |
| Form.serialize | 把表格内容{化成string | |
| Form.getElements | 取得表格内容为数lŞ?/td> | |
| Form.disable | disable表格所有内?/td> | Form.disable(''form1'') (q个好象不work) |
| Form.focusFirstElement | 把焦炚w中在表格W一个元素上 | Form.focusFirstElement(''form1'') |
| Form.reset | Reset表格 | Form.reset(''form1'') |
| Form.Element.getValue | 取得表格输入框的?/td> | Form.Element.getValue(''text1'') |
| Form.Element.serialize | 把表g输入框内容{化成string | Form.Element.serialize(''text1'') |
| $F | {同于Form.Element.getValue() | $F(''text1'') |
| Effect.Highlight | 高亮Ҏ(gu). | Effect.Highlight(''text1'') |
| Effect.Fade | 褪色Ҏ(gu) | |
| Effect.Scale | 攑֤~小(癑ֈ比） |
Effect.Scale(''text1'', 200) |
| Effect.Squish | 消失Ҏ(gu)Q文字羃?yu)后消?/td> | Effect.Squish(''text1'') |
| Effect.Puff | 消失Ҏ(gu)Q文字放大后消失 | Effect.Puff(''text1'') |
| Effect.Appear | 出现Ҏ(gu) | |
| Effect.ContentZoom | ZOOMҎ(gu)Q?/td> | |
| Ajax.Request | 传送Ajaxhl服务器 | Ajax.Request(''http://server/s.php'') |
| Ajax.Updater | 传送Ajaxhl服务器q用{复的结果更新指定的Container | Ajax.Updater(''text1'',''http://server/s.php'') |
基本用法:prototype.jsl每个主要的c都分了一个Class,使用h很方?要生特定的效果,只要用new Class.function(<argument>)可以了.例如:
<DIV id="div1"><a href="#" onclick="new Element.toggle('div2')">Click Me</a></DIV>
<DIV id="div2">Hello!</DIV>
当点击Click Me的时?div2׃(x)交替隐藏或显C?注意,你可以给toggle加上无限个parameter,比如Element.toggle(''div2'',''div3'',''div4'',...)
]]>
面插入
1QInsertion.Beforec?/strong>
新徏Insertion.Beforecȝ实例Q会(x)指定的HTMLd到指定元素之前，q且与之盔R
CZQ?br /> <div id="div1">original text</div>
<script>
//执行以下脚本以后Q页面的HTML代码变为：(x)
//new test<div id="div1">original text</div>
new Insertion.Before("div1","new text");
</script>
2QInsertion.Topc?/strong>
新徏Insertion.Topcȝ实例Q会(x)指定的HTMLd到指定元素内部，位置在元素开始之后ƈ且与之相?br /> CZQ?br /> <div id="div1">original text</div>
<script>
//执行以下脚本以后Q元素div1的innerHTML属性是Q?br /> //new test original text
new Insertion.Top("div1","new text");
</script>
3QInsertion.Bottomc?/strong>
新徏Insertion.Bottomcȝ实例Q会(x)指定的HTMLd到指定元素内部，位置在元素结束标C前ƈ且与之相?br /> CZQ?br /> <div id="div1">original text</div>
<script>
//执行下面的脚本以后，元素div1的innerHTML属性将?br /> //original text new text
new Insertion.Bottom("div1","new text");
</script>
4QInsertion.Afterc?/strong>
新徏Insertion.Aftercȝ实例Q会(x)指定的HTMLd到指定元素之后，q且与之盔R
CZQ?br /> <div id="div1">original text</div>
<script>
//执行下面的脚本以后，面的HTML代码变为：(x)
//<div id="div1">original text</div>new text
new Insertion.After("div1","new text");
</script>
表单支持
1QField.clear()
]]>
如下代码是一个示例：(x)
<!--客户端：(x)index.htm-->
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript">
function test(){
var myAjax = new Ajax.Request(
'data.html',
{
method:'get',
onComplete:showResponse
}
);
}
function showResponse(response){
$('myDiv').innerHTML=response.responseText;
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="myDiv" />
</body>
</html>
<!--服务端：(x)data.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
</head>
<body>
Ajax.Request DEMO
</body>
</html>
Ajax操作选项属性含义：(x)
method HTTPhҎ(gu)(POST/GET/HEAD)
parameters 在HTTPh中传入的URL格式的值列表，是URL串中问号之后的部?br /> asynchronous 是否做异步XMLHttpRequesth
postBody 在POSTh方式下，传入h体中的内?br /> requestHeaders 和请求一赯传入的HTTP头部列表Q这个列表必d有偶C目
onXXXXXXX 在HTTPhQ响应的q程中，当XMLHttpRequest对象状态发生变化时调用的响应函敎ͼ响应函数?个：(x)onUninitialized, onLoading, onLoaded, onInteractive?nbsp; onComplete
onSuccess Ajax操作成功完成时调用的响应函数Q传入的参数与onXXXXXX相同
onFailure Ajax操作h完成但出现错误时调用的响应函敎ͼ传入的参ConXXXXXX相同
onException Ajax操作发生异常情况时调用的响应函数Q它可以接收两个参数Q第1个参数是执行HTTPh的XMLHttpRequest对象Q第2个参数是异常对象
Ajax.Updaterc?br /> 如下代码CZQ?br /> <!--客户端：(x)index.htm-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript">
function test(){
var myAjax = new Ajax.Updater(
'myDiv',
'data.html',
{
method:'get'
}
);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="myDiv" />
</body>
</html>
<!--服务端：(x)data.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
</head>
<body>
Ajax.Request DEMO
</body>
</html>
此外QAjax.Updaterc还有另外一个功能，如果h的页面内容中包括JavaScriptQAjax.Updatercd以执行其中的脚本Q只需要在Ajax操作选项中增加属?evalScriptsQtrue"可以了Q把上述的例子进行修改后得到如下CZQ?br /> <!--客户端：(x)index.htm-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript">
function test(){
var myAjax = new Ajax.Updater(
'myDiv',
'data.html',
{
method:'get',
evalScripts:true
}
);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="myDiv" />
</body>
</html>
<!--服务端：(x)data.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript" type="text/javascript">
sayHi = function(){
alert("Heelo, " + $F('name') + "!");
}
</script>
</head>
<body>
<input type="text" id="name" value="Ajax.Updater DEMO" />
<input type="button" value="Click Me" Onclick="sayHi()" />
</body>
</html>
如果我们把data.html中sayHi黑体的函数改成：(x)function sayHi{....}或者var sayHi = function(){....},E序不能正常运行．q是因ؓ(f)Ajax.Updater执行脚本是以eval的方式，而不是将脚本内容引入到当前页面，直接声明用var声明的sayHi函数的作用域只是在这D脚本内部，外部的其他脚本不能访问，按照sayHi黑体描述的其作用域是整个window.
Ajax.PeriodUpdaterc?/strong>
在一些Ajax应用?需要周期性地更新某些面元素,例如:天气预报,新闻{?实现q样的功能通常要用JavaScript中的定时器函?setTimeout, clearTimeout{? 而有了Ajax.PeriodUpdaterc?可以得到很大地简?
新徏一个Ajax.PeriodUpdatercȝ实例需要指?个参?
container: 要更新的页面元素id;
url: h的URL地址;
options: Ajax操作选项
和Ajax.Updatercȝ|Ajax.PeriodUpdatercM支持动态执行JavaScript脚本Q只需要在Ajax操作选项中增?evalScripts : true)属性值就行．
Ajax.PeriodUpdatercL持两个特D的Ajax操作选项Qfrequency和decayQfrequency参数很容易理解，是定时更新页面元素，或者定时执行脚本，frequency指的是两次Ajax操作之间的时间间隔，单位是秒Q默认值是Q?br /> 如下代码是一个示例：(x)
<!--客户端：(x)index.htm-->
<html>
<head>
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript">
function test(){
var myAjax = new Ajax.PeriodicalUpdater(
'myDiv',
'data.html',
{
method:'get',
evalScripts:true,
frequency:1,
decay:2
}
);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id='myDiv' />
</body>
</html>
<!--服务端：(x)data.html-->
<html>
<head>
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript" type="text/javascript">
count=9;//手动改变数字Q我们可以看到index.htm面myDiv元素的值同时在更新
$('myDiv1').innerHTML = "count = " + count + ": " + new Date() + "<br>";
</script>
</head>
<body>
<div id='myDiv1' />
</body>
</html>
Ajax.Responders对象
该类l护了一个正在运行的AJax对象列表Q在需要实C些全局功能时就可以使用它．例如Q在Ajaxh发出以后需要提C用h作正在执行中Q当操作以后取消提示Q如下所C：(x)
<!--客户端：(x)index.htm-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript">
function test(){
var myAjax = new Ajax.Request(
'data.html',
{
method:'get',
onComplete:showResponse
}
);
}
function showResponse(response){
$('myDiv').innerHTML=response.responseText;
}
var handle={
onCreate:function(){
Element.show('loading'); //创徏Ajaxh?昄loading
},
onComplete:function(){
//当请求成功返回时,如果当前没有其他正在q行中的Ajaxh,隐藏loading
if(Ajax.activeRequestCount == 0){
Element.hide('loading');
}
}
};
//handle注册到全局的Ajax.Responders对象?使其生效
Ajax.Responders.register(handle);
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="myDiv" />
<div id="loading" style="display:none">
<img src="loading.gif">Loading...
</div>
</body>
</html>
<!--服务端：(x)data.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
Ajax.responders DEMO
</body>
</html> 上述定义了一个handle 对象Q其中包含onCreate和onComplete函数Q页面中发出M一个Ajaxh旉?x)调用onCreateҎ(gu)Q而请求完成时都会(x)调用onCompleteҎ(gu).
]]>
归根l底是在获得XMLHttpRequest对象的方式上变化?/span>
解决问题最单的办法是Q?
.点击“工具”->“Internet选项”->“高”Q在“安全”节点下找?#8220;启用本机XMLHTTP支持”Q该选项默认是钩选，用它后可以解决问题?
]]>
览器端框架Q?/strong>
一QPrototypepdQ?br /> 1.PrototypeQ?a >http://prototype.conio.netQ如果在Web应用中实现对Ajax的支持或者需要扩展一些基本的功能QPrototype是个很好的选择Q?br /> 2.script.aculo.usQ?a >http://script.aculo.usQ如果要在Web应用中实现更加在丰富的动态效果，提升用户体验Q可以考虑使用该框Ӟ
3.RicoQ?a >http://openrico.orgQ该框架跟script.aculo.uscMQ?br /> 4.Moo.fxQ?a >http://moofx.mad4milk.netQ是寸非常的javascriptcdQ也是基于prototype.Moo.fx提供了类似flash的物资和折叠菜单的功能；
5.BehaviourQ?a >http://bennolan.com/behaviourQ是ZPtototype的CSS选择器，使用它可以大大地化页面的HTML的代码，可用CSS样式来给HTML元素d各种行ؓ(f)Q?nbsp; 二．AjaxsltQGoogle公司推出的一个JavaScript的XSLT实现Q用于在客户端解析XMLQ执行XSLT转换
http://goog-ajaxslt.sourceforge.net
三．DojoQhttp://dojotoolkit.org
四．YUIQ?a >http://developer.yahoo.com/yui/index.html
服务器端的框Ӟ(x)
q里我只介绍JAVA的开发框Ӟ(x)
QDWRQ是一个客L(fng)和服务器端的框架Q它专注于允许开发h员实C客户端JavaScript到J2EE Web容器内的普通的Java对象之间的远E调用．在服务器端，DWR通过一个Servlet和Java对象交互Qƈ且返回Java对象或者Java对象的XML文档.DWR安装使用方便Q和其他Java技术配合较好．如果惌一个整合性能良好Q同时支持客L(fng)和服务器的框Ӟ那就使用DWRQ?br /> DWRQ?a >http://dwr.dev.java.net
]]>
1.cȝ声明:
function test1(){
this.p1 = "p1";
this.p2 = "p2";
this.f1 = function(){ alert("f1"); }
this.f2 = function(){ akert("f2"); }
}
上面的代码声明了两个公有的属性p1和p2,两个Ҏ(gu)f1和f2.
如何xU有变量?
function test1(){
var _test = "test";
this.p1 = "p1";
this.p2 = "p2";
this.f1 = function(){ alert("f1"); }
this.f2 = function(){ akert("f2"); }
}
上面的代码通过var关键字声明了一个局部变量_test,其作用域是test1cd义的内部,对外不公开.
如何xcȝ静态变量和静态方法呢?
test1.staticProp = "static var";
test1.staticMethod = function(){
alert("static method");
}
q可以通过javascript中对象的prototype属性来xcȝ实例属性或Ҏ(gu):
test1.prototype.prop2 = "prop2";
test2.prototype.method2 = function(){
alert(" this.prop2");
}
` 利用prototype属?可以实现另一U类的声明方?
function test(){}
test.prototype = {
p1 : "p1",
p2 : "p2",
f1 : function(){
alert("f1");
}
}
如何实现cȝl承?通过复制父类的所有属性和Ҏ(gu)来实现子cȝl承:
用for(....in ....)Ҏ(gu)来实现遍历父cL有的属性和Ҏ(gu)
q里看看我如何让新声明的test1cȝ承testcȝ:
function test1(){}//定义新声明的test1c?
var p;
for(p in test.prototype){ //遍历父类的所有属性和Ҏ(gu)
test1.prototype[p] = test.prtotype[p]; //把父cȝ所有属性和Ҏ(gu)全部复制到新声明的子ctest1?br /> }
test1.prototype.newMethod = function(){//定义新声明的子类test1的新Ҏ(gu)
alert("new method");
}
其实prototype框架已经帮我们实Cq种l承,我们来看看它是如何实现的:
Object.extend = function(destination, source){
for(property in source){
destination[property] = source[property];
}
return destination;
}
Prototype框架为Object对象定义了extendҎ(gu),该方法有两个参数destination和source,分别对应于子cd父类,所以我们前面所讲的test1l承test可以化代码如?
function test1(){
test1.prototype = Object.extend({
newMethod : function(){
alert("new method");
}
},
test.prototype
);
如果我们改变一下上qC码中extendҎ(gu)中的两个参数的顺?
function test1(){
test1.prototype = Object.extend(
test.prototype,
{
newMethod : function(){
alert("new method");
}
},
);
可以发现,对于test1子类来说效果是相同的..
但是,我们q一步会(x)发现,父类test拥有了子类test1的新增方?虽然q不是我们最初想要的l承效果,但是q种Ҏ(gu)却我们有了扩展对象属性或者方法的手段?不是?
]]>
2QAJAX开发关键技术：(x)XMLHttpRequest对象QJavaScript~程技术，DOMQ文档对象模型）QCSSQ层叠样式表Q，和XSLTQ可扩展样式表{换）
XMLHttpRequest对象是实现Ajax应用的核心；
JavaScript是Ajax应用在客L(fng)使用的脚本语aQ?br /> 通过JavaScript和DOM的配合才能实现页面的动态更斎ͼ
CSS主要用于控制面元素的显C样式；
XSLT可以XML文档转换ZQ何Ş式的文档Q在Ajax应用中用XSLT可以实现数据和页面显C的完全分离Q?br /> 3QXMLHttpRequest对象Q?br /> 3.1 发送请?br /> 使用XMLHttpRequest对象向服务器端发送请求的基本程可以分ؓ(f)Q步Q?br /> 3.1.1 从Web表单中获取需要的数据Q?br /> 3.1.2 建立要连接的URLQ?br /> 3.1.3 打开到服务器的连接；
3.1.4 讄服务器在完成后要q行的函敎ͼ
3.1.5 发送请求；
function callServer(){
//表单中获取必要的数据
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
//只有在数据不为空时才发出h
if((city == null) || (city == "")) return;
if((state == null) || (state == "")) return;
//h的URL
var url = "getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
//联系服务器，打开q接
xmlHttp.open("GET",url,true);//"true"代表该请求是异步?br /> //讄h完成时的响应函数,注意q里是请求完成时Qƈ不是响应完成?br /> xmlHttp.onreadystatechange = updatePage;
//发送请?因ؓ(f)已经在请求URL中添加了要发送给服务器的数据(city和state)Q所以请求中 无需再发送其他数?
xmlHttp.send(null);
}
3.2 Q处理HTTP响应
200Q一切正?nbsp;
401Q未l授?br />
403Q禁?br />
404Q没扑ֈ
function updatePage(){
//readState == 4Q表C求成功完?br />
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var response = xmlHttp.responseText;//HTTPhq回的文本内?br />
document.getElementById("zipCode").value = response;
}else if(request.status == 404){
//HTTP状态码?04Q无法找到资?br />
alert("404 Not Found");
}else if(request.status == 403){
//HTTP状态码?03Q资源不可用
alert("403 Forbidden");
}else if(request.status == 401){
//HTTP状态码?01Q未l授?br />
alert("401 Unauthorized");
}
}
}
3.3QHTTPqA状?br />
共有Q种qA状态：(x)
0Q请求未初始化（q没有调用XMLHttpRequest对象的openҎ(gu)Q?br />
1Q请求已l徏立，但是q没有发送（q没有调用sendҎ(gu)Q?br />
2Q请求已发送，正在处理?br />
3Q请求在处理中。通常响应中已有部分数据可用了Q但是服务器q没有完成响应的生成
4Q响应已完成Q可以获取ƈ且用服务器的响应了
]]>