`

prototype.js及 new Ajax.Request

 
阅读更多
一、prototype.js是一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax，国外有多个基于此类库实现的效果库，也做得很棒。
prototype.js不仅是一个有很大实用价值的js库，而且有很高的学习价值，所以我强烈建议B/S开发人员和对JS开发感兴趣的朋友去浏览一些它的源代码，其中有很多的珠玑，你绝对会觉得读它的源代码是一种享受。

二、一些实用的函数
   这个类库带有很多预定义的对象和实用函数，这些东东的目的显然是把你从一些重复的打字中解放出来 。

三、Ajax对象
    Ajax 对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX 功能涉及的狡猾的代码。 这个对象包含一系列的封装AJAX逻辑的类。我们来看看其中几个类。
    使用Ajax.Request类；使用Ajax.Updater类

四、JavaScript类扩展
    prototype.js 类库实现强大功能的一种途径是扩展已有的JavaScript 类。

五、new Ajax.Request();
实例一： 
<script type="text/javascript" >
   var myAjax = new Ajax.Request(
        "/amm/sysmanage/dept.shtml?",
        {
            method:"post",       //表单提交方式 
            parameters:"method=queryDept&name=Tom&age=26",   //提交的表单数据
            setRequestHeader:{"If-Modified-Since":"0"},     //禁止读取缓存数据
            onComplete:function(x){    //提交成功回调 
                alert(x.responseText);//使用浏览器调试,可查看x变量的全部属性和方法 
            },
            onError:function(x){          //提交失败回调
                alert(x.statusText);
            } 
        } 
   ); 
</script>

注：parameters 参数若是不列出，我们在开发中对于Form 表单这样的数据 可以这样处理
    parameters:Form.serialize('FormName')   FormName  为页面中表单的 ID
实例二： 
<script type="text/javascript" >
   var xmlString = "<root>"
                     +"<people><name>caizhongqi</name><sex>male</sex></people>"
                     +"<people><name>ahuang</name><sex>female</sex></people>"
                     +" </root>";
   var myAjax = new Ajax.Request(
        "/amm/sysmanage/dept.shtml?",
        {
            method:"post",       //表单提交方式 
            postBody:xmlString,   //提交的xml
            setRequestHeader:{"content-Type":"text/xml"},     //指定发送的数据为 xml 文档（非字符串）
            onComplete:function(x){    //提交成功回调 
                    alert(x.responseXML.xml);
            },
            onError:function(x){          //提交失败回调
                    alert(x.statusText);
            } 
        } 
   ); 
</script>


六、Ajax.Updater类是对Ajax.Request类的简化，使用该类不需要使用回调方法，该类自动讲服务器响应显示到某个容器。
实例一： 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>输入提示示范</title>
        <meta name="author" content="Yeeku.H.Lee" />
        <meta name="website" content="http://www.crazyit.org" />
        <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    </head>
    <body>
        <h3>
            请输入您喜欢的水果
        </h3>
        <div style="width: 280px; font-size: 9pt">
            输入apple、banana、peach可看到明显效果:
        </div>
        <br />
        <input id="favorite" name="favorite" type="text"
            onblur="$('tips').hide();" />
        <img id="Loadingimg" src="img/indicator.gif" style="display: none" />
        <div id="tips"
            style="width: 160px; border: 1px solid menu; background-color: #ffffcc; display: none;"></div>
        <script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
        <script type="text/javascript">
            //发送请求的函数
            function searchFruit() {
                //定义发送请求的服务器地址
                var url = 'TipServlet';
                //取得请求参数字符串
                var params = $('favorite').serialize();
                //创建Ajax.Updater对象，对应于发送一次请求
                var myAjax = new Ajax.Updater(
                //指定tips作为服务器响应的容器
                        'tips', url, {
                            //发送请求的方法
                            method : 'post',
                            //请求参数
                            parameters : params,
                            //指定Ajax交互结束后的回调函数，匿名函数——显示id为tips的元素
                            onComplete : function() {
                                $('tips').show();
                            }
                        });
            }
            //为表单域绑定事件监听器
            new Form.Element.Observer("favorite", 0.5, searchFruit);
            //定义Ajax事件的全局处理器
            var myGlobalHandlers = {
                //当开始Ajax交互时，激发该函数
                onCreate : function() {
                    $('Loadingimg').show();
                },
                //当Ajax交互失败后，激发该函数。
                onFailure : function() {
                    alert('对不起!\n页面加载出错!');
                },
                //当Ajax交互结束后，激发该函数。
                onComplete : function() {
                    //如果所有Ajax交互都已完成，隐藏Loadingimg对象
                    if (Ajax.activeRequestCount == 0) {
                        $('Loadingimg').hide();
                    }
                }
            };
            //为Ajax事件绑定全局事件处理器
            Ajax.Responders.register(myGlobalHandlers);
        </script>
    </body>
</html>


import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class TipServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        //获取请求参数favorite
        String hdchar = request.getParameter("favorite");
        System.out.println(hdchar);
        PrintWriter out = response.getWriter();
        //如果请求参数是apple的前几个字符，则输出apple
        if ("apple".startsWith(hdchar))
        {
            out.println("apple");
            //out.write("apple");
        }
        //如果请求参数是banana的前几个字符，则输出banana
        else if("banana".startsWith(hdchar))
        {
            out.println("banana");
        }
        //如果请求参数是peach的前几个字符，则输出peach
        else if("peach".startsWith(hdchar))
        {
            out.println("peach");
        }
        //否则将输出other fruit
        else
        {
            out.println("other fruit");
        }
    }
}
分享到：
| SVN中如何检出单个文件
评论
发表评论

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

相关推荐

    prototype.js文件使用和讲解

    - **Ajax支持**：`prototype.js`提供了一套完整的Ajax解决方案，包括`Ajax.Request`、`Ajax.Updater`和`Ajax.PeriodicalUpdater`等类，使得异步通信更为简便。 - **事件处理**：它增强了事件处理机制，允许绑定和...

    prototype.js中文手册

    2. **Ajax功能**：Prototype.js 强化了AJAX操作，通过`Ajax.Request` 和 `Ajax.Updater` 类，开发者可以轻松实现异步数据交换，无需关心浏览器兼容性问题。 3. **对象扩展**：Prototype.js 基于JavaScript原型链...

    prototype.js.cn.doc.rar

    2. **类和实例**：Prototype.js引入了`Object.extend()`方法来创建类，以及`new`关键字创建实例。通过`Prototype.Class.create()`可以创建自定义类，继承机制则通过`Prototype.inheritsFrom()`实现。 3. **事件处理...

    prototype.js 以及 找到的 相关使用详细说明

    Prototype.js是一个广泛使用的JavaScript库，它为JavaScript语言增加了许多实用功能，尤其在处理DOM操作、Ajax交互以及类（class）系统等方面提供了强大的支持。这个库的名字“Prototype”来源于JavaScript中的一个...

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

    1. Ajax对象：Prototype提供了一个全面的Ajax解决方案，包括`Ajax.Request`和`Ajax.Updater`等，它们封装了XMLHttpRequest对象，使得异步数据交互变得简单易用。 2. Delegation（委托）：Prototype的`Event.observe...

    SSI中使用Ajax进行操作的例子（prototype.js）

    Prototype.js库提供了许多方便的函数，如Ajax.Request和Ajax.Updater，它们是执行Ajax请求的核心工具。在添加数据的场景中，我们可以创建一个Ajax.Request对象，指定URL（通常是服务器处理数据的端点）、HTTP方法...

    prototype.js

    Prototype.js是一款强大的JavaScript库，主要为了解决JavaScript在浏览器环境中的不一致性，提供了一套优雅的API，使得开发者能够更高效地编写跨浏览器的Ajax应用。作为Ajax技术的核心库，Prototype.js以其丰富的...

    使用prototype.js发送ajax get请求中文参数乱码解决

    在JavaScript编程中，`prototype.js`是一个常用的库，它扩展了JavaScript的基本对象，提供了许多方便的功能，包括Ajax（异步JavaScript和XML）操作。在处理中文参数时，尤其是在使用Ajax的GET请求时，可能会遇到中文...

    经典ajax.prototype.javascript实例

    `prototype`是JavaScript的一个库，它为JavaScript语言添加了许多实用的功能，其中包括对Ajax操作的强大支持。本实例将探讨如何使用Prototype库中的Ajax功能进行编程。 首先，我们需要理解Prototype库是如何引入到...

    prototype.js开发笔记

    Prototype.js 的主要特点包括简化 DOM 操作、增强 AJAX 交互以及提供更为简洁的 JavaScript 编程接口。 - **轻量级与高性能**：尽管功能强大，但其体积并不庞大，加载速度快。 - **易于学习与使用**：Prototype.js ...

    prototype.js简单实现ajax功能示例

    Prototype.js 是一个 JavaScript 框架，它提供了一系列强大的工具，简化了JavaScript的开发，包括对Ajax功能的支持。在Web应用程序中，Ajax（Asynchronous JavaScript and XML）技术允许页面在不刷新整个页面的情况...

    prototype.js　1.4版开发者手册

    ### prototype.js 1.4版开发者...通过以上总结可以看出，prototype.js 是一款功能全面且设计精良的 JavaScript 类库，对于希望利用 JavaScript 和 AJAX 技术简化 Web 开发流程的开发者来说，是一个非常有价值的工具。

    prototype-1.6.0.2.js.rar

    Prototype的Ajax模块提供了一系列实用的类和方法，如`new Ajax.Request(url, options)`用于发起HTTP请求，`new Ajax.Updater(container, url, options)`用于更新指定容器的内容。这些方法支持异步通信，使页面能够在...

    prototype-AJAX案例

    在JavaScript的世界里，Prototype是一个非常著名的库，它扩展了JavaScript的基本对象，并且提供了一系列实用的函数，使得开发者在处理DOM操作、AJAX交互等方面的工作变得更加简单。本案例将重点探讨如何利用...

    prototype.js开发笔记.doc

    ### prototype.js开发笔记知识点概述 #### 1.1 Prototype是什么? Prototype是一个JavaScript库，由Sam Stephenson编写。该库提供了一系列的功能，旨在简化并增强Web应用程序的开发过程，特别是那些需要与用户高度...

    prototype.js开发手册

    new Ajax.Request(url, options); ``` 这里`url`是要请求的URL，`options`是一个配置对象。 ##### 1.4.2 Ajax.Updater ```javascript new Ajax.Updater(updateElement, url, options); ``` 这里`updateElement`...

    ajax.request和ajax.periodicalupdate用法讲解

    在JavaScript的世界里，Prototype是一个非常著名的库，它扩展了JavaScript的核心功能，并提供了强大的对象操作工具以及丰富的Ajax功能。本文将详细讲解Prototype库中的两个关键Ajax方法：`Ajax.Request`和`Ajax....

    prototype中文帮助文档

    Prototype.js 是一个广泛使用的JavaScript库，它为JavaScript编程提供了许多实用的功能，极大地简化了DOM操作、事件处理、Ajax交互以及对象扩展等任务。这个压缩包包含的“prototype.js”文件就是Prototype.js的核心...

    prototype.js常用函数:

    `Prototype.js`是一个JavaScript库，它提供了一系列便捷的函数，扩展了JavaScript的内置对象和DOM操作，使得开发者在处理HTML元素和实现动态效果时更加高效。以下是对标题、描述和部分内容中提到的`Prototype.js`...

Magicbox
Global site tag (gtag.js) - Google Analytics