使用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 写类方式之八
Jul 05 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
js回调函数仿360开机
Dec 26 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Nest.js 授权验证的方法示例
Feb 22 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 显示指定路径下的图片
2009/10/29 PHP
PHP 代码规范小结
2012/03/08 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
独特的python循环语句
2016/11/20 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
python爬取网易云音乐评论
2018/11/16 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
在校大学生个人的自我评价
2014/02/13 职场文书
西式婚礼主持词
2014/03/13 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript