zbqy.cnblogs.comBETA.png)
prototype 轻量级WEB开发的首选ajax框架
引用：http://www.lvjiyong.com/item/prototype1，http://www.lvjiyong.com/item/prototype2，http://www.lvjiyong.com/item/prototype3
prototype.js 是Sam Stephenson写的一个Javascript的小框架（实际上是一个函数库），该框架首页是：http://prototype.conio.net/
下面的内容来源自http://www.sergiopereira.com/articles/prototype.js.html，本人学习的同时作个笔记，与读者分享一下经验心得。
吕的部落格：www.Lvjiyong.Com
这次介绍几个相类的函数：$()、$F()、$A、$H、$R。
$() 相当于document.getElementById() ，其中间的参数可以是一个ID或多个ID。
示例：
<HTML> <HEAD> <TITLE> Test Page </TITLE> <script src="prototype-1.4.0.js"></script> <script> function test1() { var d = $('myDiv'); alert(d.innerHTML); } function test2() { var divs = $('myDiv','myOtherDiv'); for(i=0; i<divs.length; i++) { alert(divs[i].innerHTML); } } </script> </HEAD> <BODY> <div id="myDiv"> <p>吕的部落格欢迎您，我是内容一ID为myDiv</p> </div> <div id="myOtherDiv"> <p>吕的部落格欢迎您，我是内容二ID为myOtherDiv</p> </div> <input type="button" value="取得myDiv的HTML代码" onclick="test1();"><br> <input type="button" value="取得myDiv与myOtherDiv的HTML代码" onclick="test2();"><br> </BODY> </HTML>
哈哈哈，我是内容一ID为myDiv
呵呵呵我是内容二标题为myOtherDiv
知道怎么用了吧就是使用$('控件ID')取得该ID对应的对象。不懂？无话说了去看看Javascript比较基本的东西吧
好了下面说说$F()这个函数，它实际是是$()的特别版本而已，$()返回具有ID的对象，而$F()只是返回具有ID的对象的值（注意首先这个对像要有value这个属性，返回的也只是一个值而不是对像）该函数主要应用于取得输入框内的值。
示例：
<script>
function test3()
{
alert( $F('userName') );
}
</script>
<input type="text" id="userName" value="www.Lvjiyong.Com">
<input type="button" value="取得userName的值" onclick="test3();">
userName:
$A()的用法就更有特殊性，主要应用于具有NodeLists 属性的对象．使用$A('对象ID')返回的是一组Array对象，哈哈哈，这回又是对象了，还是看一下实际应用的例子吧：
<script>
function showOptions(){
var someNodeList = $('lstEmployees').getElementsByTagName('option');
var nodes = $A(someNodeList);
nodes.each(function(node){
alert(node.nodeName + ': ' + node.innerHTML);
});
}
</script>
<select id="lstEmployees" size="3" >
<option value="1">Lvjiyong.com</option>
<option value="2">www.Lvjiyong.Com</option>
<option value="3">吕的部落格</option>
</select>
<input type="button" value="显示options" onclick="showOptions();" >
$H()是一个对象转化为Hash对象，我还没实际用过，看样子主要可能还是用于将对象转为参数方便传送（.NET序列化简单明了版？），我们看看示例吧：
<script>
function testHash()
{
//let's create the object创建对象
var a = {
first: 10,
second: 20,
third: 30
};
//now transform it into a hash转为Hash
var h = $H(a);
alert(h.toQueryString()); //转为字符串，哈哈哈可以使用Ajax方式把这个对象的属性传到后台了displays: first=10&second=20&third=30
}
</script>
下面说一下今天最后要说的最后一个函数：$R()
The $R() function is simply a short hand to writing new ObjectRange(lowerBound, upperBound, excludeBounds). 哈这绝对是个很有意思的函数：指定上下限即交回你有序的Range
示例：
<script>
function demoDollar_R(){
var range = $R(10, 20, false);
range.each(function(value, index){
alert(value);
});
}
</script>
<input type="button" value="$R的例子" onclick="demoDollar_R();" >
Try.these() 的作用和C#里的try{}catch{try{}catch{.....}}作用一样，就是按顺序执行一串的函数，直到这些函数的其中某个正常工作，这个看起来没用的（因为javascrpt本身就有try{}catch(e){}但是实际上这个东西用在某些时候却让你感到很轻常很自然，比如些有语句Firefox与IE不兼容，这种情况下可以分别写两个专门对Firefox与IE的函数，然后使用
<script>
function testTry{
return Try.these(
function() {专门针对IE},
function() {专门针对Firefox}
);//吕的部落格:http://www.lvjiyong.com
}
</script>
这样事先我们不用再检查浏览器类型，当是IE时，执行专门针对IE自动跳出，而Firefox则在执行专门针对IE时不能正常工作，所以将继续尝试执行专门针对Firefox，如此可以针对更广的应用，让我们的感觉也觉得轻松。
本文主要讲如何使用prototype.js中的Ajax进行一些小应用方面的开发，不讲Ajax原理。
在prototype.js中我以后会用到的有两个Ajax类，一个是Ajax.Request 别一个是Ajax.Updater。AjaxRequest继承自Ajax.Base。而Ajax.Updater继承自Ajax.Request ，说这些没有别的意思，主要是想让读者明白，随着继承的延续，类的功能也将特殊化。
我是个粗人不过讲那么多道理，就举个例子开始吧。哦，差点忘了说一件事，Ajax在普通浏览器如XP下是默认不能跨域请求，而在2003下不加入可信站点是不可使用的。所以有些应用不能一味地使用Ajax实现，不然呵呵，记得给自己留后路，像Gmail，它默认使用Ajax实现，但如果系统不能执行Ajax的话就提示用户可以使用普通HTML实现。还有所谓跨域就是如我的域名是www.LvJiyong.com 我可以使用Ajax请求www.LvJiyong.com 的所有允许访问的资源，而假如我想访问www.1818city.com 域名下的资源浏览器将会拒绝，有些人想用Ajax实现文件上传，可行性就更夸张，必须把安全级别降到最低才行。另：在本地测试时是允许访问任何域下的资源的，不要企图在网站上直接使用Ajax取得其它网站下的资料，在ASP里我们可以使用服务端的XMLHTTP实现，而在ASP.NET下允许的方法更多，在此不说了，又开始废话。
好，现在开始举例，先讲一下特殊中的特殊Ajax.Updater。不知道读者有没有尝试注册本BLOG的会员，验证码就是使用Ajax.Updater去实现的，在页面载入的时候注册一个事件来监视验证码输入框的变化，当输入的长符符合验证码长度时，自动触发向Ajax.Updater验证验证码的页面发出请求，系统如果检测验证码错误，则返回“验证码错误”，否则返回空值，表示正确。而Ajax.Updater的应用灵巧的就是在这种情况下的使用（只需要显示返回值的情况）。
<script>
function getHTML()
{
var url = 'http://www.lvjiyong.com/1818city/Default.aspx';
var pars = 'test=lvjiyong.com';
var myAjax = new Ajax.Updater(
'placeholder',
url,
{
method: 'get',
parameters: pars
});
/*
使用GET方法主要是传递少数的参数，记住只适合传送少量的参数传下参数，在'http://www.lvjiyong.com/1818city/Default.aspx'是没有对参数进行处理的，只是显示如何传递参数
传递参数分为Post与GET大家应该都是知道的，当Post时就用Request.Form["参数名"]取值，Get时用Request.QueryString["参数值"]取值。处理回数据后响应请求，响应的文本内容将会自动填充到ID为placeholder的容器中。
使用Post提交格式如：（主要注意是传递Post数据，当然也可以在Post时在url中写上参数传递querystring值。）
var postData = "内容";
var myAjax = new Ajax.Updater(
'placeholder',
url,
{
method: 'post',
postBody:postData});
*/
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
默认情况下使用这种方法请求即可，但要再细微点可以多设置参数，这个将在以后使用Ajax.Request时深入说一下。
开始胡敲了，先停住吧，最近精神状态一直不好．明天讲一下参数，并说下怎么实现当Ajax请求发生时出现"Loading...",而成功后自动消失．
