使用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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
js实现导航吸顶效果
Feb 24 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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模拟HTTP认证
2006/10/09 PHP
php SQL防注入代码集合
2008/04/25 PHP
PHP 文件类型判断代码
2009/03/13 PHP
php防攻击代码升级版
2010/12/29 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
python collections模块的使用
2020/10/16 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
大学生村官任职感言
2014/01/09 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
你需要掌握的20个Python常用技巧
2022/02/28 Python