prototype的学习使用(二) Ajax的局部更新

longgangbai

浏览: 7250419 次
性别:
来自: 上海

最近访客更多访客>>

paladin1988

ljq867

yuxiangtong

chen88358323

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

常用Javascript的开发应用

Ajax prototype JavaScript CSS 应用服务器

Ajax对象

上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。

我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。
Ajax 对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX 功能涉及的狡猾的代码。这个对象包含一系列的封装AJAX逻辑的类。我们来看看其中几个类。

使用Ajax.Request类

如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程，然后解析出响应然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。

为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

protoypeAjaxUpdater.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>proSimple.html</title>

<script type="text/javascript" src="prototype/prototype.js"></script>
     <script type="text/javascript">
     var myGlobalHandlers = {
onCreate: function(){
Element.show('systemWorking');
},
onComplete: function() {
if(Ajax.activeRequestCount == 0){
Element.hide('systemWorking');
}
}
};
Ajax.Responders.register(myGlobalHandlers);
        function getHtml()
        {
           var url="prototypeUpdate.jsp";
            var a={
             first:10,
             second:20,
             third:30
          };
           var h=$H(a);
          //转换为查询字符串
           var pars=h.toQueryString();
           //局部更新的对象
           var myAjax=new Ajax.Updater('placeholder',url,
           {
             method:'get', //处理的方法
             parameters:pars, //请求的字符串
             onFailure: reportError //错误处理函数
           });
        }
        function reportError()
        {
          alert("Sorry ,There was an error.");
        }
     </script>
     <script>

</script>

</head>

<body>
使用AJAX显示页面局部更新
<div id="placeholder"></div>
<div id='systemWorking'><img src='spinner.gif'>Loading...</div>
<input type="button" value="use Hash" onclick="javascript:getHtml();" >
</body>
</html>

prototypeUpdate.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
     String f=request.getParameter("first");
      String s=request.getParameter("second");
       String third=request.getParameter("third");
       out.println("first="+f+" second="+s+" third="+third);
%>

注意到传入 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 属性。

还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法，当AJAX无误的执行完后调用，相反的，也可以在onFailure选项处传入一个方法，当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。

我们的例子没有用任何有趣的方式处理这个 XML响应，我们只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素，或者甚至可能做某些XSLT转换而在页面中产生一些HTML。

在1.4.0版本中，一种新的事件回传外理被引入。如果你有一段代码总是要为一个特殊的事件执行，而不管是哪个AJAX调用引发它，那么你可以使用新的Ajax.Responders对象。

假设你想要在一个AJAX调用正在运行时，显示一些提示效果，像一个不断转动的图标之类的，你可以使用两个全局事件Handler来做到，其中一个在第一个调用开始时显示图标，另一个在最后一个调用完成时隐藏图标。

分享到：

Dwr 学习研究应用--Spring和DWR的整合 | prototype的学习使用(一)

2009-05-11 13:13
浏览 1869
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论