使用prototype.js进行异步操作

2014-02-08  来源:本站原创  分类:prototype  人气:1 

首先下载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代码的必备工具

相关文章
  • 使用prototype.js进行异步操作 2014-02-08

    首先下载prototype.js这个类包,然后包含在你的<html>页面中 <script src='prototype.js'></script> 创建XMLHttpRequest对象并且异步的跟踪它的进程, 然后解析出响应 然后处理它可能这是ajax的根本意义,它最具威力的地方,但你能出兼容各种不同浏览器的代码,可能会令你痛苦不堪,但幸好救苦救难的prototype.js提供Ajax.Request 类,让你摆脱这些困扰. 假如你有一个应用程序可以通过url htt

  • PeriodicalExecuter object in prototype.js 2009-03-15

    prototype.js defined PeriodicalExecuter object, provide a certain interval of time to repeat the logic of a method call. <div></div> <script> var i = 0; var p = new PeriodicalExecuter(showTime,0.1); //Create the instance. Each 0 .1Second

  • prototype.js tutorial and prototype Chinese manual 2009-10-03

    Prototype.js collection of online tutorials and manuals Chinese prototype to facilitate the use of prototype.js 1.4 English tutorial doc format http://www.dayanmei.com/upload/prototype1.4.doc prototype.js 1.4 Chinese prototype 1.5 English tutorial an

  • Prototype.js sent using ajax get request parameters garbled Chinese solution 2009-11-01

    Version: prototype 1.6.0.3, struts1.2. Front (page introduction prototype.js): 1, prototype-ajax.jsp <%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getSchem

  • prototype.js Development Notes (transfer) 1.3.1 2008-10-19

    Original Address: https: / / compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html 1.1. Prototype What is this? Perhaps you have not used it, prototype.js is a JavaScript package written by Sam Stephenson. Wonderful idea to prepare a good secti

  • prototype.js 1.4 version of the developer manual (change) 2008-10-15

    See a very good thing in the country has not been a lot of people use them is really unhappy, so I spent a lot effort into this manual is translated into Chinese, as the article is very long, so the translation of the heavy workload and some of Local

  • Tapestry5 in applying the prototype.js 1.6.1, the result zone.getBody () has been the exception 2010-04-01

    Call zone.getBody () has been reported that when abnormal, I always wonder where my code was wrong, the case, where the wrong label, Exception message is as follows: org.apache.tapestry5.runtime.ComponentEventException A component event handler metho

  • Prototype.js and spring of ajax based pagination 2010-05-26

    This is based on prototype.js for ajax page, use the spring framework, custom page label each page into the list, the list into session, only the session page list of stored pages, do not go query the database, the performance will be higher First, c

  • [Transferred] from the prototype.js javascript depth study of object-oriented features 2010-12-16

    Javascript prototype.js in-depth study from the object-oriented features js is a very powerful language, flexible and convenient. At present, I come into contact with the language which, from the grammatical point of view, only the Ruby than it Gengs

  • compared with the jQuery prototype.js 2011-01-07

    Quote http://hi.baidu.com/lantian125566/blog/item/b839a710869697cea6ef3f03.html Quote For any node in a HTML tag by adding an arbitrary In Prototype: new Insertion.After ('myId', 'Arbitrary HTML'); In jQuery: $ ('# MyId'). After ('Arbitrary HTML'); L

  • prototype.js common functions 2011-01-14

    prototype.js commonly used functions: Example to explain the function name Element.toggle alternately hide or show Element.toggle (''div1'','' div2'') Element.hide Hide Element.hide (''div1'','' div2'') Element.show Show Element.show (''div1'','' div

  • prototype 源码中文说明之 prototype.js 2013-10-03

    /** * 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号 */ var Prototype = { Version: '@@[email protected]@' } /** * 创建一种类型,注意其属性 create 是一个方法,返回一个构造函数. * 一般使用如下 * var X = Class.create(); 返回一个类型,类似于 java 的一个Class实例. * 要使用 X 类型,需继续用 new X()来获取一个实例,如同 java 的 Class.newInstan

  • prototype.js的Ajax对象 2014-04-16

    我想prototype.js里的ajax对象肯定吸引了不少人,大量封装好的ajax逻辑的类,对于我们这些初学者使用ajax有很大的帮助. 以下用一个我的具体使用例子来解释:效果看这里 1. Ajax.Request 你可以这样创建它 var url = 'http://yoursever/your/your'; var pars = 'id=xxx'; var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, on

  • 类之Prototype.js学习 2014-05-19

    Prototype.js作为javascript的成功的开源框架,封装了很多好用的功能,虽然官方没提供什么文档,不过在google上一搜,好多相关的文档,不过在学习使用的过程中还是碰到了一些问题,希望熟悉的朋友能多加指点,对于prototype.js学习我关注这么几点,同时针对每点也讲讲学习的结果和碰到的问题,^_^ 1.类的创建 prototype.js已经封装好了,这个很简单. var Person=Class.create(); 这样就创建了一个Person类,这个Person类必须提供i

  • 使用prototype.js 的时候应该特别注意的几个问题. 2014-09-28

    1. String.prototype.camelize BUG 这个方法用来返回字符串的骆驼写法.用js 控制元素的 style的时候经常使用 比如 var ss="font-color" ss=ss.camelize() // fontColor 通常情况下 camelize 会工作得很好,但是有一个特列,那就是浮动定位 float var ss="float" obj.style[ss.camelize()]="right" // 这将导致

  • 基础的prototype.js常用函数及其用法 2014-12-11

    prototype.js 常用函数 : Element.toggle 交替隐藏或显示 Element.toggle(''div1'',''div2'') Element.hide 隐藏 Element.hide(''div1'',''div2'') Element.show 显示 Element.show(''div1'',''div2'') Element.remove 删除 Element.remove(''div1'',''div2'') Element.getHeight 取得高度 El

  • prototype.js开发笔记 2012-05-11

    prototype官方网站:http://www.prototypejs.org/download Prototype1.6官方下载 Ajax中国下载地址(121.23KB) Learn about what's new in version 1.6. Prototype SVN If you want the full development package (including unit tests), you can useSubversion to checkout the source

  • The use of object-oriented prototype js 2010-05-27

    1.prototype property js simulate the role of the parent class, reflected in the js object-oriented ideas, prototype property is critical. 2. You must figure out what class variables, class methods, instance variables, instance methods. 3. Now you mus

  • The prototype js knowledge (Reprinted) 2010-09-24

    The most basic use to assign an instance of ClassA to ClassB, ClassA ClassB inherits all the properties. Code into the next: function ClassA() { this.a='a'; } function ClassB() { this.b='b'; } ClassB.prototype=new ClassA(); var objB=new ClassB(); for

  • Understanding the prototype js 2010-10-24

    A procedure not only to know these, but also to know why ! Prototype is a very important concept Js , Each function ( There is also the object function in the Js ) Prototype that has a prototype called ) Properties, but in general its value is null,