prototype.js及 new Ajax.Request

WinForBest

2013-10-24

关注关注

一、prototype.js是一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax，国外有多个基于此类库实现的效果库，也做得很棒。

prototype.js不仅是一个有很大实用价值的js库，而且有很高的学习价值，所以我强烈建议B/S开发人员和对JS开发感兴趣的朋友去浏览一些它的源代码，其中有很多的珠玑，你绝对会觉得读它的源代码是一种享受。

二、一些实用的函数

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

三、Ajax对象

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

使用Ajax.Request类；使用Ajax.Updater类

四、JavaScript类扩展

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

五、newAjax.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");
        }
    }
}

ajax javascript