使用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同时提交多个Web表单的方法
Dec 26 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
js实现自定义进度条效果
Mar 15 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
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实现采集中国天气网未来7天天气
2014/10/15 PHP
php之readdir函数用法实例
2014/11/13 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
js 文件引入实现代码
2010/04/23 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
js的写法基础分析
2011/01/17 Javascript
document.createElement()用法
2013/03/13 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
创建服务型党组织实施方案
2014/02/25 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
银行贷款收入证明
2014/10/17 职场文书
面试感谢信范文
2015/01/22 职场文书
2015年社区工作总结
2015/04/08 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers