使用prototype.js进行异步操作


Posted in Javascript onFebruary 07, 2007

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

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

假如你有一个应用程序可以通过url http://ajax.boogu.com/cm.html与服务器通信。它返回下面这样的XML 响应。
(当然这是不可能的)

<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
    <response type="object" id="productDetails">
        <monthly-sales>
            <employee-sales>
                <employee-id>1234</employee-id>
                <year-month>1998-01</year-month>
                <sales>$8,115.36</sales>
            </employee-sales>
            <employee-sales>
                <employee-id>1234</employee-id>
                <year-month>1998-02</year-month>
                <sales>$11,147.51</sales>
            </employee-sales>
        </monthly-sales>
    </response>
</ajax-response>

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

<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>

<select id="lstEmployees" size="10" _onchange="searchSales()">
    <option value="5">Buchanan, Steven</option>
    <option value="8">Callahan, Laura</option>
    <option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" _onchange="searchSales()">
    <option selected="selected" value="1996">1996</option>
    <option value="1997">1997</option>
    <option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>
你看到传入 Ajax.Request构造方法的第二个对象了吗? 参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get'的属性,另一个属性名为 parameters 包含HTTP请求的查询字符串,和一个onComplete 属性/方法包含函数showResponse。

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

这个参数定义AJAX调用的选项。在我们的例子中,在第一个参数通过HTTP GET命令请求那个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对象的话,就能有

var xml = originalRequest.responseXML;
这样就可以获得第一个monthly-sales的文本值了
var monthly-sales = xml.getElementByTagName('monthly-sales')[0].text

 
    prototype.js这把瑞士军刀,确实是我们居家旅行,编写js代码的必备工具

Javascript 相关文章推荐
JS画线(实例代码)
Nov 20 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
简单实现node.js图片上传
Dec 18 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
详解React 在服务端渲染的实现
Nov 16 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
最新优化收藏到网摘代码(digg,diigo)
Feb 07 #Javascript
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 #Javascript
js滚动条多种样式,推荐
Feb 05 #Javascript
如何在标题栏显示框架内页面的标题
Feb 03 #Javascript
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 #Javascript
使用JS操作页面表格,元素的一些技巧
Feb 02 #Javascript
JavaScript使用cookie
Feb 02 #Javascript
You might like
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
php中memcache 基本操作实例
2015/05/17 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
python判断完全平方数的方法
2018/11/13 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Python PIL库图片灰化处理
2020/04/07 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
运动会获奖感言
2014/02/11 职场文书
法制报告会主持词
2014/04/02 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
庆国庆活动总结
2014/08/28 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
业务员管理制度范本
2015/08/06 职场文书