propery.js

Prototype.js 提供了Ruby风格的简写语法和实效的函数，更难得的是完全跨浏览器，让大家舒舒服服写出又精简又不用愁心兼容的的JS代码，springside 已经离不开它了。

 Prototype.js最重要的文档有：

• Developer Notes for Prototype.js 中文版 (英文原版)
• script.aculo.us的wiki
• 文档集合：http://www.prototypedoc.com/

Propery.js 封装了js开发中的工具类和方法，使用它开发ajax非常方便，包下载地址：http://prototype.conio.net.

<script src="js/prototype.js" type="text/javascript"></script><script src="js/mylib.js" type="text/javascript"></script>

Property.js的语法常用的有，例如获取Document节点的引用：

例如：var n=$("name_info")-----var n=document.getElementById('name_info');

var value=$F(n)或者$F("name_info")-------value=n.value；

Element系列有很多实用的函数：  
js 代码片断
$('bookdiv').update(' < p >   ');  // 更新innerHtml
$('bookdiv').show();
$('bookdiv').hide();
$('bookdiv').toggle();   // 切换visiable
$('bookdiv').visiable();   // 返回是否visiable
$('bookdiv').scrollTo();

利用XMLHttpRequest对象与服务端通信，它对这个控件的使用作了封装：

 Ajax.Request发送请求；

例子：

js 代码片断
function showInfo(go_url){
    if($("display_area") && go_url){
        var xmlHttp= new Ajax.Request(go_url, {method: "post",
                parameters: Form.serialize(document.forms[0]),
                onComplete:function(  ){
            if(xmlHttp.responseIsFailure(  )) {
                var sts = xmlHttp.transport.status ? xmlHttp.
                transport.status : "undefined";
                $("display_area").value=
                "XMlHttpRequest returned response status "+sts;
                document.getElementById("msg").innerHTML=
                "HTTP response and server information; "+
                "response status="+
                xmlHttp.transport.status;
            } else {
                $("display_area").value=xmlHttp.transport.responseText;
                document.getElementById("msg").innerHTML=
                "HTTP response and server information; "+
                "response status="+
                xmlHttp.transport.status;
            }
        }});
    }
}

 Ajax.Updater在server端对HTML的内容修改；

如果你的服务器的另一端返回的信息已经是HTML了 ，用Ajax.Updater你只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了

 例子：

js 代码
script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';

var myAjax = new Ajax.Updater(
'placeholder',
url,
{
method: 'get',
parameters: pars
});

}

"getHTML()">
"placeholder">
   

 你可以看到，这段代码比前面的例子更加简洁，不包括 onComplete 方法，但是在构造方法中传入了一个元素id。

 这个方法的具体使用见说明文档：http://thinhunan.cnblogs.com/archive/2006/04/01/DeveloperNotesForPrototype.html

假设你想要在一个AJAX调用正在运行时，显示一些提示效果，像一个不断转动的图标之类的，你可以使用两个全局事件Handler来做到，其中一个在第一个调用开始时显示图标，另一个在最后一个调用完成时隐藏图标。看下面的例子。

 <script>
var myGlobalHandlers = {
onCreate: function(){
Element.show('systemWorking');
},
onComplete: function() {
if(Ajax.activeRequestCount == 0){
Element.hide('systemWorking');
}
}
};
Ajax.Responders.register(myGlobalHandlers);
</script>
Loading...

继续中......

分享到：

2007.1.4 | js一些技巧wrap

• 2006-11-29 11:40
• 浏览 2030
• 评论(0)
• 查看更多