prototype Ajax对象

(1)Ajax.Request类

假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。

<script> 
function searchSales(){ 
    var empID=$F('lstEmployees'); 
    var y=$F('lstYears'); 
    var url='http://yoursever/app/get_sales'; 
    var pars='empID='+empID+'&year='+y;     

    var myAjax=new Ajax.Request(url,{ 
        method:'get',parameters:pars,onComplete:showResponse         
    });     
} 
function showResponse(originalRequest) 
{ 
    //put returned XML in the textarea  
    $('result').value = originalRequest.responseText;  
}  
</script> 

参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get'的属性，另一个属性名为 parameters 包含HTTP请求的查询字符串，和一个onComplete 属性/方法包含函数showResponse。

还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为true 或 false 来决定AJAX对服务器的调用是否是异步的（默认值是 true）。

XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法 ，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。

你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。

还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法，当AJAX无误的执行完后调用， 相反的，也可以在onFailure选项处传入一个方法，当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。

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

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

(2)Ajax.Updater类

如果你的服务器的另一端返回的信息已经是HTML了，那么使用这个程序包中 Ajax.Updater 类将使你更加容易。用它你只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了。

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

var myAjax = new Ajax.Updater( 
'placeholder', 
url, 
{ 
method: 'get', 
parameters: pars 
}); 
} </script> 
<input type=button value=GetHtml onclick="getHTML()"> 
<div id="placeholder"></div> 

指定处理错误的一个方法。这个是用 onFailure 选项来完成的。我们也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一个参数从一个简单的元素id到一个带有两个属性的对象， success (一切OK的时候被用到) 和 failure (有地方出问题的时候被用到) 在下面的例子中没有用到failure属性，而仅仅在 onFailure 处使用了 reportError 方法。

<script> 
function getHTML() 
{ 
var url = 'http://yourserver/app/getSomeHTML'; 
var pars = 'someParameter=ABC'; 
var myAjax = new Ajax.Updater( 
{success: 'placeholder'}, 
url, 
{ 
method: 'get', 
parameters: pars, 
onFailure: reportError 
}); 
} 
function reportError(request) 
{ 
alert('Sorry. There was an error.'); 
} 
</script> 
<input type=button value=GetHtml onclick="getHTML()"> 
<div id="placeholder"></div> 

如果你的服务器逻辑是连同HTML 标记返回JavaScript 代码， Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象对待响应为JavaScript，你只需在最后参数的对象构造方法中简单加入evalScripts: true属性。

(3)Enumerable对象

prototype.js了给我们一个 Enumerable对象，它实现了很多和可迭代数据进行交互的窍门。

function showList(){ 
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg']; 
            simpsons.each( function(familyMember){ //迭代器函数
alert(familyMember); 
}); 
} 

新的Arrays的迭代功能

exampleA:

<script> 
function findEmployeeById(emp_id){ 
var listBox = $('lstEmployees') 
var options = listBox.getElementsByTagName('option'); 
options = $A(options); 
var opt = options.find( function(employee){ 
return (employee.value == emp_id); 
}); 
alert(opt.innerHTML); //displays the employee name 
} 
</script> 
<select id="lstEmployees" size="10" > 
<option value="5">Buchanan, Steven</option> 
<option value="8">Callahan, Laura</option> 
<option value="1">Davolio, Nancy</option> 
</select> 
<input type="button" value="Find Laura" onclick="findEmployeeById(8);" > 

exampleB:

<script> 
function showLocalLinks(paragraph){ 
paragraph = $(paragraph); 
var links = $A(paragraph.getElementsByTagName('a')); 
//find links that do not start with 'http' 
var localLinks = links.findAll( function(link){ 
var start = link.href.substring(0,4); 
return start !='http'; 
}); 
//now the link texts 
var texts = localLinks.pluck('innerHTML'); 
//get them in a single string 
var result = texts.inspect(); 
alert(result); 
} 
</script> 
<p id="someText"> 
This <a href="http://othersite.com/page.html">text</a> has 
a <a href="#localAnchor">lot</a> of 
<a href="#otherAnchor">links</a>. Some are 
<a href="http://wherever.com/page.html">external</a> 
and some are <a href="#someAnchor">local</a> 
</p> 
<input type=button value="Find Local Links" onclick="showLocalLinks('someText')">