`
longgangbai
  • 浏览: 7325618 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

阅读更多

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>

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  <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来做到,其中一个在第一个调用开始时显示图标,另一个在最后一个调用完成时隐藏图标。

 

 

分享到:
评论

相关推荐

    prototype的ajax应用

    综上所述,Prototype库的AJAX应用提供了一套全面且易于使用的工具集,简化了Web开发中涉及的异步数据交互,提高了Web应用程序的响应性和交互性。通过`Ajax.Request`和`Ajax.Updater`等工具,开发者可以快速构建出...

    Prototype1.5.1使用手册

    《Prototype 1.5.1使用手册》是针对JavaScript库Prototype的一个详细指南,该库是Web开发中的一个强大工具,尤其在处理DOM操作、Ajax交互和函数增强方面表现卓越。本手册以.chm(Compiled Help Manual)格式提供,...

    AJAX实战 PROTOTYPE与SCRIPTACULOUS篇 随书源码

    Ajax是一种在不刷新整个网页的情况下,通过后台与服务器交换数据并局部更新页面的技术,提高了用户体验。"PROTOTYPE与SCRIPTACULOUS篇"表明这个教程主要关注Prototype和Scriptaculous两个JavaScript库在实现Ajax功能...

    Ajax高级程序设计pdf

    在实际开发中,开发者往往使用Ajax库或框架,如jQuery、Prototype等,来简化Ajax编程。本章会分析这些库如何封装XMLHttpRequest,提供便捷的API,并讨论如何选择和集成这些库到项目中。 **第六章:局部刷新与页面...

    ajax,prototype,scriptaculous最经典的实例

    在IT领域,Ajax(异步JavaScript和XML)是一种在不刷新整个页面的情况下更新网页内容的技术。它通过在后台与服务器交换数据并局部刷新页面来实现这一功能,从而提供了更好的用户体验。Prototype是一个JavaScript库,...

    prototype开发手册(chm)及基于J2EE的Ajax宝典(PDF)

    通过深入学习这些资源,你可以掌握Prototype库的使用技巧,以及如何在J2EE环境下构建高效、用户友好的Ajax应用。 总之,《prototype开发手册》和《基于J2EE的Ajax宝典》是Web开发者的宝贵参考资料,它们涵盖了...

    ajax的所有组件.ajax的组件

    在"轻松掌握Ajax_net系列教程二:部署Ajax Control Toolkit"中,你将学习如何在ASP.NET项目中安装和使用Ajax Control Toolkit,以及如何结合Ajax技术来提升Web应用的用户体验。通过阅读教程和实践相关示例,你将对...

    prototype

    Prototype 是一个广泛使用的JavaScript库,它为Web开发提供了一系列强大的工具和功能,特别是在处理DOM...对于那些希望在JavaScript开发中利用Ajax技术构建富交互应用的人来说,Prototype 是一个值得学习和使用的框架。

    protoType.ppt

    ProtoType包含`Ajax`对象和其他相关类如`Ajax.Request`,`Ajax.Response`,`Ajax.PeriodicalUpdater`和`Ajax.Updater`,这些类提供了完整的Ajax处理能力,包括发送异步请求、接收响应、定时更新和页面局部更新。...

    prototype -通过js提交表单,局部刷新不跳转

    在本话题中,我们关注的是如何使用Prototype库来实现表单的提交,从而达到局部刷新的效果,而不是整个页面的跳转。 Prototype的核心特性之一是其强大的`Form`对象。在传统的HTML表单提交中,当用户点击提交按钮时...

    prototype 1.4 开发者手册(中文PDF)

    此外,还有对`Ajax.Request`、`Ajax.Updater`和`Ajax.PeriodicalUpdater`等类的使用说明,它们在实现页面局部更新和定时刷新时十分有用。 Prototype还包含一系列实用的辅助函数,如数组操作、字符串处理、函数操作...

    Ajax Hacks

    5. **页面局部更新**:使用Ajax更新页面元素,提高用户体验,减少页面重载时间。 6. **Ajax库与框架**:探讨jQuery、 Prototype、AngularJS等流行的Ajax库,了解它们如何简化Ajax开发,并对比不同框架的特点。 7. ...

    Prototype 实现的局部放大图像带播放的Lightbox插件

    标题中的“Prototype 实现的局部放大图像带播放的Lightbox插件”指的是使用Prototype JavaScript框架创建的一个功能丰富的图片查看插件。这个插件允许用户在网页上预览图像,不仅支持局部放大,还具备播放功能,类似...

    prototype 开发应用手册,笔记,prototype.js文件下载

    你可以轻松实现页面局部更新,无需整个页面刷新,提高用户体验。同时,它还支持XMLHttpRequest的多种请求方式,如GET、POST,以及JSONP等跨域数据获取。 Prototype还包括丰富的事件处理功能,它对JavaScript原生...

    Professional Ajax, 2nd Edition.pdf

    Ajax的核心在于使用XMLHttpRequest对象进行异步请求和处理响应,同时结合CSS和DOM实现页面的局部刷新。 ### 书中的关键知识点 1. **Ajax的基本原理**:书中详细讲解了Ajax的工作机制,包括如何使用JavaScript发起...

    ajax书籍,用于WEB

    ### Ajax技术深度解析 #### 一、Ajax概览:一种革命性的Web开发模式 ...随着技术的不断演进,虽然Ajax一词可能逐渐淡出,但其核心理念——异步通信与局部更新,仍然是现代Web开发不可或缺的一部分。

    Ajax相关源码jar包下载

    4. **Ajax框架库**:如jQuery、Prototype、Dojo等,提供更高级别的Ajax操作接口。 **Ajax案例** 在提供的"ajax案例源码及jar包"中,可能包含了一些示例代码,展示如何使用Ajax进行数据交互。这些案例可能涵盖了...

Global site tag (gtag.js) - Google Analytics