使用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 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
微信小程序 教程之引用
Oct 18 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
Python 12306抢火车票脚本
2018/02/07 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
介绍一下UNIX启动过程
2013/11/14 面试题
教师的实习自我鉴定
2013/12/17 职场文书
高中自我鉴定
2013/12/20 职场文书
专升本个人自我评价
2013/12/22 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
详解Java实践之建造者模式
2021/06/18 Java/Android