使用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获得选中文本内容的方法
Dec 02 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
JavaScript 继承使用分析
May 12 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
php生成随机数的三种方法
2014/09/10 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
电厂厂长岗位职责
2014/01/02 职场文书
致全体运动员广播稿
2014/02/01 职场文书
小学教师国培感言
2014/02/08 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
小学见习报告
2015/06/23 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers