使用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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
不安全的常用的js写法
Sep 15 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
js实现放大镜特效
May 18 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
JavaScript parseInt0.0000005打印5原理解析
Jul 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
QQ登录简单实现代码
2021/03/09 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python爬虫之自制英汉字典
2019/06/24 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
python多进程并行代码实例
2019/09/30 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
财务管理职业生涯规划范文
2013/12/27 职场文书
企业节能减排实施方案
2014/03/19 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
网吧管理制度范本
2015/08/05 职场文书
教师反邪教心得体会
2016/01/15 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers