我们只要简单的创建一个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 />
<!-- 当鼠标移开的时候执行hide方法，隐藏起来 -->
<input id="favorite" name="favorite" type="text"
onblur="$('tips').hide();" />
<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';
//将favorite表单域的值转换为请求参数
var params = Form.Element.serialize('favorite');
//创建Ajax.Request对象，对应于发送请求
var myAjax = new Ajax.Request(url, {
//请求方式：POST
method : 'post',
//请求参数
parameters : params,
//指定回调函数
onComplete : showResponse,
//是否异步发送请求
asynchronous : true
});
}
//定义回调函数
function showResponse(request) {
//在提示tip元素中输出服务器的响应
$('tips').innerHTML = request.responseText;
//显示提示tip对象
$('tips').show();
}
//为favorite表单域绑定事件处理函数
new Form.Element.Observer("favorite", 0.5, searchFruit);
</script>
</body>
</html>
请求的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 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");
}
//如果请求参数是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");
}
}
}
相关推荐
本文将详细讲解Prototype库中的两个关键Ajax方法：`Ajax.Request`和`Ajax.PeriodicalUpdater`。 ### 1. Ajax.Request `Ajax.Request`是Prototype库中最基础的Ajax请求方法，它允许开发者发起HTTP请求与服务器进行...
1.4.1. 使用 Ajax.Request类 1.4.2. 使用 Ajax.Updater 类 2. prototype.js参考 2.1. JavaScript 类的扩展 2.2. 对 Object 类的扩展 2.3. 对 Number 类的扩展 2.4. 对 Function 类的扩展 2.5. 对 String 类的扩展 ...
**Ajax.Request** 是Prototype中用于创建Ajax请求的核心对象。可以通过以下方式初始化： ```javascript new Ajax.Request('/some_url', { method: 'get' }); ``` - **参数解析**： - 第一个参数：请求的URL。 -...
1.4.1.使用Ajax.Request类 Ajax.Request类用于发送Ajax请求。 1.4.2.使用Ajax.Updater类 Ajax.Updater类用于更新页面中的某个元素。 二、Prototype.js参考 Prototype.js提供了许多有用的函数和方法，以帮助...
不过，随着现代浏览器对原生API的支持越来越完善，现在更多的开发者倾向于使用fetch API或XMLHttpRequest的原生方法来处理AJAX请求，因为它们更轻量级且无需引入额外的库。 总之，Prototype框架通过提供方便的AJAX...
在Prototype中，与Ajax相关的类和对象包括：Ajax、Ajax.Responsders、 Ajax.Base、Ajax.Request、Ajax. PeriodicalUpdater和Ajax.Updater，图2-3所示为这些类和对象之间的关系及其常用属性和方法，下面分别对这些类...
7. **Prototype的Ajax**：Prototype库提供了一个强大的Ajax模块，包括`Ajax.Request`用于发起请求，`Ajax.Updater`用于更新页面内容。它还提供了一些便利的选项和事件处理，使开发更加灵活。 8. **应用场景**：Ajax...
`Ajax.Request`和`Ajax.Updater`是其中两个关键的类，它们分别用于发起完整的HTTP请求和替换页面的部分内容。 Prototype.js的另一个显著特点是对JavaScript对象的增强。1.7.3版本继续沿用了基于类的模拟实现，通过`...
在"使用prototype简化Ajax操作"这个主题中，我们将深入探讨Prototype库如何使Ajax变得更加简单易用。 首先，Prototype为Ajax操作提供了一个统一的接口——`Ajax`对象。这个对象下包含了一系列方法，如`Request`、`...
3. **Ajax请求**：使用Prototype的`Ajax.Request`或`Ajax.Form.Request`方法创建异步请求。这个请求会发送JSON或XML格式的数据到服务器端的ASP脚本。 4. **服务器端处理**：在ASP脚本中，接收到Ajax请求后，需要...
Prototype通过`Ajax`类封装了这一技术，包括`Ajax.Request`、`Ajax.Updater`和`Ajax.PeriodicalUpdater`等方法，使得创建异步请求变得简单直观。 总结来说，这个压缩包是学习和使用Prototype JavaScript库的宝贵...
本示例将探讨如何使用Prototype库进行Ajax交互，通过`AjaxServlet.java`（一个Java后端处理程序）和`ajax2.jsp`（一个JSP页面，用于展示Ajax请求的结果）来实现这一功能。 首先，我们来看`AjaxServlet.java`。这是...
这款库的核心理念是通过类原型（Class Prototyping）实现面向对象编程，从而在JavaScript这种原生不支持类的动态语言中引入类的概念。 一、Prototype.js基础 1. **对象扩展**：Prototype.js对JavaScript的内置对象...
`prototype`是JavaScript的一个库，它为JavaScript语言添加了许多实用的功能，其中包括对Ajax操作的强大支持。本实例将探讨如何使用Prototype库中的Ajax功能进行编程。 首先，我们需要理解Prototype库是如何引入到...
3. **Ajax支持**：Prototype的`Ajax`模块提供了一套完整的异步数据交互接口，包括`Ajax.Request`和`Ajax.Updater`等。 4. **事件处理**：Prototype简化了事件处理，通过`Event.observe`和`Event.stop`等方法可以...
- `Ajax.Request` 类：这是 Prototype 提供的核心 AJAX 功能，允许开发者轻松发送 HTTP 请求，处理服务器响应，包括错误处理和进度跟踪。 - `Ajax.Updater` 类：当服务器返回的是 HTML 内容，可以直接更新页面的...
Prototype的Ajax模块提供了一系列实用的类和方法，如`new Ajax.Request(url, options)`用于发起HTTP请求，`new Ajax.Updater(container, url, options)`用于更新指定容器的内容。这些方法支持异步通信，使页面能够在...
这个"Prototype Ajax学习范例"提供了一系列实例，旨在帮助开发者迅速掌握使用Prototype进行Ajax操作的技巧。 Ajax，即异步JavaScript和XML（Asynchronous JavaScript and XML），是一种在无需刷新整个网页的情况下...
Prototype.js库提供了许多方便的函数，如Ajax.Request和Ajax.Updater，它们是执行Ajax请求的核心工具。在添加数据的场景中，我们可以创建一个Ajax.Request对象，指定URL（通常是服务器处理数据的端点）、HTTP方法...
2. **Ajax与Prototype**：讲解如何利用Prototype的Ajax类，如Ajax.Request和Ajax.Updater，来实现后台数据的异步获取和页面部分的更新。 3. **Scriptaculous特效**：详述如何使用Effect库创建动画效果，包括淡入...