prototype写AJAX例子

最新推荐文章于 2025-09-08 16:20:27 发布
原创 最新推荐文章于 2025-09-08 16:20:27 发布 · 4.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#prototype #ajax #import #stylesheet #html #parameters

本文介绍了一个使用Prototype库实现AJAX请求的具体示例，包括前端JavaScript代码和后端Struts框架处理流程。

最近才发现有这么多写AJAX的框架，在不知道DWR之前
我认为prototype是多么的好用。下面贴一个刚做的例子：

jsp页面代码:

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'getaccount.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
        <script src="<%=request.getContextPath() %>/css/prototype.js"></script>
        <script>
    
        function searchAccount(uid){
        var url = 'test.do';
        var pars="id="+uid;
        var myAjax = new Ajax.Request(
        url,
        {
        method: 'get',
        parameters: pars,
        onComplete: showResponse
        });
        
        }

        function showResponse(originalRequest)
        {        
        document.getElementById("linkid").innerHTML = originalRequest.responseText;
        }
            var sign=false;
        function show(uid){
        if(sign==false){
        searchAccount(uid);
        sign=true;
        }else if(sign==true){
        document.getElementById("linkid").innerHTML ="######";
        sign=false;
        }
        }
        </script>
    </head>
    <body>
        <html:form action="/showaccount">
            <span onclick="show('2')" id="linkid" style="cursor:hand">######</span>
            <html:errors property="id"/><br/>
        </html:form>
    </body>
</html>

 

Struts Action中的代码如下:

/*
 * Generated by MyEclipse Struts
 * Template path: templates/java/JavaClass.vtl
 */
package com.yourcompany.struts.action;

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

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.yourcompany.struts.form.TestForm;

/** 
 * MyEclipse Struts
 * Creation date: 11-13-2007
 * 
 * XDoclet definition:
 * @struts.action path="/test" name="testForm" input="/form/test.jsp" scope="request" validate="true"
 */
public class TestAction extends Action {
    /*
     * Generated Methods
     */

    /** 
     * Method execute
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return ActionForward
     */
    public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) {
        TestForm testForm = (TestForm) form;// TODO Auto-generated method stub
        response.setContentType("text/xml;charset=GBK");
        String uid=request.getParameter("id");
         PrintWriter out=null;
        try {
            out = response.getWriter();
            if("1".equals(uid)){
                out.println("1234.00");
            }else if("2".equals(uid)){
                out.println("9876.00");
            }
            
        } catch (IOException e) {
            // TODO 自动生成 catch 块
            e.printStackTrace();
        }

        return null;
    }
}
 
lanzhengwu
关注
3、使用Prototype简化Ajax开发
weixin_42601134的博客
06-05 190
本文详细介绍了如何使用Prototype框架简化Ajax开发，涵盖核心类和函数的使用，如Ajax.Request、Ajax.Updater等，并通过动态表单验证和构建商品目录的实战案例展示了其在实际项目中的应用。
prototype-ajax例子
01-20
本示例将探讨如何使用Prototype库进行Ajax交互，通过`AjaxServlet.java`（一个Java后端处理程序）和`ajax2.jsp`（一个JSP页面，用于展示Ajax请求的结果）来实现这一功能。 首先，我们来看`AjaxServlet.java`。这是...
prototype中的ajax对象应用实例
仲伟涛学习笔记
11-04 1441
JAVASCRIPT: function getContents() { var request_url = "test1.html";       // 需要获取内容的url var request_pars = ;//请求参数
简洁的js表单验证程序
为天加朵云...
08-01 635
 这是在blueidea看到的一个写比较简洁的js表单验证程序。总的来说该有的功能都有了，而且代码也不是很多，适合大家的小项目拿去使用功能简述：验证：http地址 时间日期 e-mail 数字 字符长度检查 一项输入与另一项输入比较（例如：密码的确认输入） 大小比较（只能有一个比较符号）特点：扩展容易，可以方便的添加自己需要的验证方式 兼容性好（ie5,6 firefox,
基于prototype的易用表单验证(轉)
sunxboy的专栏
05-12 186
简介 基本的方式是在表单发生onsubmit事件的时候，遍历表单所有元素的class属性而执行需要验证。如果验证失败，则显示验证建议并阻止表单提交。 DEMO：http://tetlaw.id.au/upload/dev/validation/valid.html 下载：http://tetlaw.id.au/upload/dev/validation/validation1.5.3.zip...
prototype.js ajax.request,prototype
weixin_32431435的博客
08-05 337
在JavaScript中，prototype对象是实现面向对象的一个重要机制。每个函数就是一个对象(Function)，函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。中文名实现面向对象机制外文名prototype性质JS对象应用JavaScript人物Sam Stephensonpro...
prototype.js实现AJAX小例子
sliufen的专栏
09-07 5559
  原本不知道prototype.js是一个框架,只当其是一个再普通不过的JS文件.随手拿着用了用,写了一个JSP页面,单纯的用prototype.js来实现AJAX效果.用了之后发现超好用,自己再也不用写那么大一堆代码了,哦耶.言归正传,还是把今天写的那个小代码发上来.一.JSP部分     这部分的代码,最为关键的是JS部分的改变.没有采用prototype.js的时候,生成一个A
Prototype ajax get,post例子
冷月宫主的专栏
11-05 1994
get请求function getExample(){var url=”demo.aspx”;var params=”u=abc”;var myAjax=new Ajax.Request(url,{method:’get’,parameters:params,onComplete:showResult});}function showResult(originalRequest){aler
jquery的ajax案例,jquery与 ajax 简单例子
weixin_31256683的博客
08-05 367
jquery与 ajax 简单例子基于JQuery框架的AJAXPS:本人这篇始发于PHPCHINA，发现被很多人转了，但却未注明出处，想了一下，还是自己转到这里来。前几天发了个贴，分享了prototype框架关于AJAX方面的学习过程。然后有人说jquery框架更方便。正好项目中准备使用thickbox，于是干脆抛弃prototype.js，看起jquery.js了。JQuery确实不错，体积比...
Prototype在Ajax上的应用
qiluchao1016的专栏
03-31 260
<br /><br />3. Ajax 对象<br />上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。<br />我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。<br />Ajax 对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX 功能涉及的狡猾的代码。 这个对象包含一系列的封装AJ
prototype与jquery下Ajax实现的差别
10-29
在Prototype的例子中，原URL `var remoteUrl = 'index.php';` 可以修改为 `var remoteUrl = 'index.php?rand=' + Math.random();` 这样每次请求都会携带一个随机数，避免了缓存。 总结起来，jQuery和Prototype在...
Ajax::prototype 源码解读
10-31
在JavaScript的世界中，Ajax::prototype 是一个非常著名的库，它为开发者提供了简洁的API来实现异步JavaScript和XML（AJAX）技术。Prototype库的核心设计理念是简化JavaScript编程，特别是对于DOM操作和AJAX请求。本...
prototype一个简单的ajax例子
05-27
在本示例中，我们使用的是一种JavaScript库——Prototype，它为JavaScript提供了许多实用的工具和功能，包括对Ajax的优雅封装。Prototype简化了Ajax操作，使得开发者可以更方便地与服务器进行异步数据交互。 ...
SSI中使用Ajax进行操作的例子（prototype.js）
08-12
本示例着重讲解如何在SSI环境下利用Ajax和prototype.js库来执行增删改查操作。以下是对这些技术及其应用的详细阐述： 首先，SSI（Server Side Includes）是一种简单的服务器端脚本语言，它允许开发者在HTML文件中...
详细讲解pyspark中dsl格式进行大数据开发中的的所有编程情况
不辉放弃的博客
09-04 697
PySpark DSL编程指南摘要：本文系统介绍了PySpark中基于DataFrame API的DSL编程方法。主要内容包括：1) 环境初始化与核心概念；2) 多种数据源加载方式；3) 基础数据查看与验证；4) 核心转换操作（列/行处理、类型转换、字符串/日期处理）；5) 高级功能（聚合、连接、窗口函数、UDF）；6) 数据写出与性能优化技巧；7) 综合案例分析。重点强调链式API调用、惰性执行机制和最佳实践，帮助开发者高效处理结构化/半结构化大数据，避免常见性能陷阱。
【SpringBoot】20 - SpringBoot中的Ajax和MyBatis究竟是什么？
热门推荐
杰西笔记
09-01 2万+
本文深入解析了Spring Boot项目中Ajax与MyBatis的核心作用及协作机制。Ajax作为前端异步通信引擎，通过axios等库实现无刷新数据交互；MyBatis作为后端持久层框架，简化数据库操作。二者通过RESTful API协同工作：Ajax发起请求→Spring Boot Controller接收→Service调用MyBatis执行SQL→返回JSON数据→前端动态更新。这种前后端分离架构实现了高效解耦，是构建现代Web应用的关键技术组合。
9.8 ajax+php基础语法
最新发布
2503_92841156的博客
09-08 702
变量1, 定义变量以$开头, 不用加 var 2, 变量名由数字, 字母, 下划线组成, 数字不能开头 3, 区分大小写 4, 见名知意$age = 18;$Age = 20;$num;// 如果不赋初值结果是 NULLecho "";变量的赋值// 1, 值赋值$a = 3;$b = 5;$$c = $$a;$c = 100;// 2, 址赋值$$d = &$$b;常量常量定义语法:define(参数一, 参数二, 参数三)
Html重绘和重排
阿乐的博客
09-04 344
是指当页面元素的位置、尺寸等几何属性发生变化时，浏览器需要重新计算这些元素的几何属性并将其放置在正确位置的过程。是指当元素的外观发生改变，但没有改变布局时，浏览器重新绘制元素的过程。：在需要实现动画效果时，使用CSS动画和过渡，而不是JavaScript来操作元素样式。相对于重排，重绘的影响较小，因为它只需要重新绘制元素的样式，不需要重新计算布局信息。通过这些方法，可以有效地减少重排和重绘的次数，从而提高网页的响应速度和用户体验。修改元素的尺寸、位置、边距、填充、边框等样式属性。
javaweb基础第一天总结（HTML-CSS）
m0_62866610的博客
09-04 390
javaweb基础第一天总结（HTML-CSS）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值