使用prototype.js进行异步操作_Javascript教程-查字典教程网

摘要：首先下载prototype.js这个类包,然后包含在你的页面中创建XMLHttpRequest对象并且异步的跟踪它的进程，然后解析出响应然后...

首先下载prototype.js这个类包,然后包含在你的<html>页面中

<scriptsrc='prototype.js'></script>

创建XMLHttpRequest对象并且异步的跟踪它的进程，然后解析出响应然后处理它可能这是ajax的根本意义,它最具威力的地方,但你能出兼容各种不同浏览器的代码,可能会令你痛苦不堪,但幸好救苦救难的prototype.js提供Ajax.Request类,让你摆脱这些困扰.

假如你有一个应用程序可以通过urlhttp://ajax.boogu.com/cm.html与服务器通信。它返回下面这样的XML响应。

(当然这是不可能的)

<?xmlversion="1.0"encoding="utf-8"?>

<ajax-response>

<responsetype="object"id="productDetails">

<monthly-sales>

<employee-sales>

<employee-id>1234</employee-id>

<year-month>1998-01</year-month>

</employee-sales>

<employee-sales>

<employee-id>1234</employee-id>

<year-month>1998-02</year-month>

</employee-sales>

</monthly-sales>

</response>

</ajax-response>

用Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。

functionsearchSales()

{

varempID=$F('lstEmployees');

vary=$F('lstYears');

varurl='http://yoursever/app/get_sales';

varpars='empID='+empID+'&year='+y;varmyAjax=newAjax.Request(

url,

{method:'get',parameters:pars,onComplete:showResponse}

);}

functionshowResponse(originalRequest)

{

//putreturnedXMLinthetextarea

$('result').value=originalRequest.responseText;

}

</script>

<selectid="lstEmployees"size="10"_onchange="searchSales()">

<optionvalue="5">Buchanan,Steven</option>

<optionvalue="8">Callahan,Laura</option>

<optionvalue="1">Davolio,Nancy</option>

</select>

<selectid="lstYears"size="3"_onchange="searchSales()">

<optionselected="selected"value="1996">1996</option>

<optionvalue="1997">1997</option>

<optionvalue="1998">1998</option>

</select>

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

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

这个参数定义AJAX调用的选项。在我们的例子中，在第一个参数通过HTTPGET命令请求那个url，传入了变量pars包含的查询字符串，Ajax.Request对象在它完成接收响应的时候将调用showResponse方法。

也许你知道，XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading,Loaded,Interactive,或Complete。你可以使Ajax.Request对象在任何阶段调用自定义方法，Complete是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为onXXXXX属性/方法中提供自定义的方法对象。就像我们例子中的onComplete。你传入的方法将会被用一个参数调用，这个参数是XMLHttpRequest对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的status属性。

龙去脉

onComplete这个值要传递一个函数参数过来,像上述的showResponse,这个函数,默认是会传递会有一个originalRequest传递过来

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

获取了这个originalRequestc以后,如果是一个xml对象的话,就能有

varxml=originalRequest.responseXML;

这样就可以获得第一个monthly-sales的文本值了

varmonthly-sales=xml.getElementByTagName('monthly-sales')[0].text