使用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 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
js中日期的加减法
May 06 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
vue中用 async/await 来处理异步操作
Jul 18 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
最新优化收藏到网摘代码(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常用的文件操作函数经典收藏
2013/04/02 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
2014年平安夜寄语
2014/12/08 职场文书
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python