建立Test WEB工程
prototype.js 位置 WebContent/js/prototype.js
创建test2.jsp 位置 WebContent/test/test2.jsp
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<script src="js/prototype.js" type="text/javascript"></script>
</head>
<script language="javascript">
var vXHR;
function createXHR()
{
try
{
vXHR = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
try
{
vXHR = new ActiveXObject("MSXML2.XMLHTTP");
}
catch (e)
{
vXHR = false;
}
}
if (!vXHR && typeof XMLHttpRequest != 'undefined')
{
vXHR = new XMLHttpRequest();
}
return vXHR;
}
function getInfo()
{
createXHR();
var textValue = document.getElementById("text1").value;
var vUrl = "/Test/prototypeservlet?test=" + textValue;
vXHR.open("get", vUrl, true);
vXHR.send(null);
vXHR.onreadystatechange = infoBack;
}
function infoBack()
{
if (vXHR.readyState == 4)
{
if (vXHR.status == 200)
{
var s = vXHR.responseText;
document.getElementById("text1").value = s;
}
}
}
</script>
<body>
<input type="text" id="text1" name="text" />
<input type="button" id="button1" name="button" value="点击"
onclick="getInfo();" />
</body>
</html>
创建 PrototypeServlet.java 位置 com.test.servlet
package com.test.servlet;
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 PrototypeServlet extends HttpServlet
{
/**
*
*/
private static final long serialVersionUID = 1L;
public void init() throws ServletException
{
System.out.println("hello");
}
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException
{
String textValue = request.getParameter("test");
System.out.println("textValue="+textValue);
PrintWriter out = null;
try
{
out = response.getWriter();
}
catch (IOException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
out.print("hello:"+textValue);
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException
{
doGet(request, response);
}
}
web.xml配置
<servlet>
<servlet-name>PrototypeServlet</servlet-name>
<servlet-class>com.test.servlet.PrototypeServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>PrototypeServlet</servlet-name>
<url-pattern>/prototypeservlet/*</url-pattern>
</servlet-mapping>
分享到：
相关推荐
在这个Ajax实例中，前端使用Prototype.js发起Ajax请求，向服务器发送JSON数据，或者接收服务器返回的JSON数据。由于JSON是JavaScript的一部分，因此在JavaScript中解析JSON数据非常直观，这使得前后端之间的数据交换...
3. JavaScript库：jQuery、Prototype等库简化了Ajax的使用，提供了一系列方便的API。 四、Java + Servlet + Ajax 结合应用 1. 用户交互：Ajax允许用户在不离开当前页面的情况下发送请求，Servlet在后台处理请求并...
在Java Web应用中，通常使用jQuery、Prototype等JavaScript库实现Ajax，或者使用XMLHttpRequest对象直接发送Ajax请求。这种方式提高了用户体验，因为用户无需等待整个页面刷新。 综合上述内容，"jdbc+mysql+servlet...
《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是《基于J2EE的Ajax宝典》的第二版。《基于J2EE的Ajax宝典》面市近2年，作为Ajax领域最全面、实用的图书，一直深受读者的好评。全书主要分为三个...
在IT领域，尤其是在Web开发中，"PHP+AJAX+PROTOTYPE国省市三级联动菜单原型"是一个常见的功能实现，主要用于创建交互性强、用户体验良好的表单元素。这个原型设计旨在通过AJAX技术动态地从服务器端的PHP脚本获取数据...
文档可能会详细介绍如何调用和使用Prototype的各种方法，例如 `$()`, `Element.extend()`, `Ajax` 对象等，这些都是Prototype的核心功能。 **文件名称列表：“PROTOTYPE”** 虽然没有具体的文件名，但我们可以推测...
本示例将探讨如何使用Prototype库进行Ajax交互，通过`AjaxServlet.java`（一个Java后端处理程序）和`ajax2.jsp`（一个JSP页面，用于展示Ajax请求的结果）来实现这一功能。 首先，我们来看`AjaxServlet.java`。这是...
### Prototype的Ajax介绍 #### 一、Prototype框架与Ajax **Prototype** 是一款JavaScript库，其设计目的是为了简化客户端脚本编程。它提供了一系列高级功能，使得开发人员能够更加高效地构建动态网页应用。其中，*...
- 前端可能使用JavaScript（如 `Template.js` 和 `prototype.js`）来处理用户点击事件，当用户点击验证码刷新按钮时，发送Ajax请求到服务器重新生成验证码，并更新页面上的验证码图片。 - 用户输入验证码后，前端...
5. **Ajax**：Prototype的Ajax模块提供了一套完整的异步数据交换接口，包括`Ajax.Request`和`Ajax.Updater`，它们封装了XMLHttpRequest对象，简化了与服务器的通信。 6. **事件处理**：Prototype改进了事件处理，...
2. JavaScript/Ajax部分：在客户端，通常使用JavaScript库如jQuery、Prototype等简化Ajax调用。例如，jQuery的$.ajax()函数可以方便地发送Ajax请求。请求中包含URL（指向JSP页面）、数据、回调函数等。 3. 回调处理...
1. **前端准备**：使用JavaScript库，如jQuery或Prototype，来处理AJAX请求。创建HTML结构作为树的基础，并添加事件监听器，如点击节点时触发AJAX请求。 2. **AJAX请求**：当用户操作树节点时，发送AJAX请求到...
3. **JavaScript库**：Ajax的实现通常依赖于JavaScript库，如jQuery、Prototype等，它们提供了封装好的API来简化Ajax请求的创建和处理。 4. ** XMLHttpRequest 对象**：Ajax的核心是XMLHttpRequest对象，它允许...
万一你没有使用过大名鼎鼎的 prototype.js，那么让我来告诉你，prototype.js 是由 Sam Stephenson 写的一个 javascript 类库。这个构思奇妙，而且兼容标准的类库，能帮助你轻松建立有高度互动的 Web 2.0 特性的富...
《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是《基于J2EE的Ajax宝典》的第二版。《基于J2EE的Ajax宝典》面市近2年，作为Ajax领域最全面、实用的图书，一直深受读者的好评。全书主要分为三个...
在"使用prototype简化Ajax操作"这个主题中，我们将深入探讨Prototype库如何使Ajax变得更加简单易用。 首先，Prototype为Ajax操作提供了一个统一的接口——`Ajax`对象。这个对象下包含了一系列方法，如`Request`、`...
当我们谈论“prototype ajax提交大数据”时，我们指的是利用JavaScript的原型链特性来处理通过Ajax异步传输大量数据的问题。 Ajax，即Asynchronous JavaScript and XML，是一种在不刷新整个页面的情况下与服务器...
Prototype.js是JavaScript库，它为Web开发提供了许多实用的功能，特别是在处理Ajax交互方面。这个"Prototype Ajax学习范例"提供了一系列实例，旨在帮助开发者迅速掌握使用Prototype进行Ajax操作的技巧。 Ajax，即...