今天写了一个很简单的例子，当输入乘数和被乘数，单击“开始计算”按钮之后，乘数和被乘数被传送到Web服务器，经过类型转换和计算之后，结果以普通文本的方式返回并显示。
其中：send_request()函数用来初始化XMLHttpRequest对象，并向Web服务器发起XMLHTTP请求;函数processRequest()则接受服务器返回的数据，并将这些数据解析后更新到页面相关区域，其作为XMLHttpRequest对象的回调函数使用；函数doCaculate响应按钮caculate的onClick事件，判断用户输入情况，并将目标url地址以参数的形式传送给函数send_request。
calc.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ajax例子</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
//按钮“开始计算”响应函数，判断输入域情况后调用send_request函数。
function doCaculate() {
var f = document.form1;
if((f.number_1.value!="")&&(f.number_2.value!="")) {
document.getElementById("feedback").innerHTML = "正在计算，请稍后......";
send_request("process.jsp?number_1="+f.number_1.value+"&number_2="+f.number_2.value);
}
else if(f.number_1.value=="") document.getElementById("feedback").innerHTML = "乘数不能为空。";
else if(f.number_2.value=="") document.getElementById("feedback").innerHTML = "被乘数不能为空。";
}
var http_request = false;
//向服务器发起XMLHTTP请求。
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
var f = document.form1;
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
var returnStr = http_request.responseText;
if(returnStr.indexOf("Error")==-1) {
f.result.value = returnStr;
document.getElementById("feedback").innerHTML = "";
}
else {
f.result.value = "";
document.getElementById("feedback").innerHTML = returnStr;
}
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
</script>
</head>
<body><center>
<form action="process.jsp" method="post" enctype="application/x-www-form-urlencoded" name="form1" target="_self">
<table width="400" cellpadding="4" cellspacing="1" border="0">
<caption>简单乘法计算</caption>
<tr>
<td align="center">
<input type="text" name="number_1" size="10">
*
<input type="text" name="number_2" size="10">
=
<input type="text" name="result" size="10">
</td>
</tr>
<tr align="center">
<td>
<input type="button" name="Caculate" value="开始计算" onClick="doCaculate()">
<input type="reset" name="reset" value="重新计算">
</td>
</tr>
<tr><td align="center" height="25"><label id="feedback"> </label></td></tr>
</table>
</form>
</center>
</body>
</html>
process.jsp
<%@ page contentType="text/html; charset=gb2312"%>
<%
String number_1 = request.getParameter("number_1");
String number_2 = request.getParameter("number_2");
int num_1=0,num_2=0;
boolean status = true;
if(number_1!=null) {
try {
num_1 = Integer.parseInt(number_1);
}catch(Exception ex) {
status = false;
out.println("Error,乘数必须是整数。");
}
}
if(number_2!=null) {
try {
num_2 = Integer.parseInt(number_2);
}catch(Exception ex) {
status = false;
out.println("Error,被乘数必须是整数。");
}
}
if(status) out.println(num_1*num_2);
%>
分享到：
相关推荐
第一个可能是用来设置和发送Ajax请求的，而第二个可能用于处理服务器返回的数据。通常，发送Ajax请求的过程包括以下几步： 1. **初始化XMLHttpRequest对象**：`var xhr = new XMLHttpRequest();` 2. **配置请求**...
这可以通过监听第一个下拉框的change事件，然后发送Ajax请求获取新的选项数据，最后更新第二个下拉框。自动补全功能常用于输入框，当用户输入时，后台会返回匹配的建议列表。这通常结合keyup事件和$.ajax()实现，...
【描述】中提到，Ajax功能是通过引用“ajax.dll”来实现的，这表明该项目可能使用了一个自定义的或第三方的Ajax库，而不是直接使用微软提供的ASP.NET AJAX Control Toolkit。通常，ASP.NET AJAX提供了一整套服务器端...
2. 编写JavaScript代码，监听第一个下拉列表的改变事件。 3. 当用户选择了一个省份，触发Ajax请求，发送省ID到服务器。 4. 服务器根据省ID查询对应的市数据，并返回。 5. 客户端接收到市数据后，清空第二个下拉列表...
第一个小例子是“小例子_自动刷新”。这个例子展示了如何使用Ajax实现实时数据刷新。在传统的网页中，如果要更新页面内容，通常需要整个页面重新加载。而使用Ajax，我们可以只更新需要变化的部分，比如一个新闻列表...
Ajax技术可以提供高度交互的Web应用，给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术，主要内容包括...这一过程将乐趣无穷，我们衷心地希望，有一天能看到你开发的基于Ajax的一流应用!
- `ajaxchat2`可能是对第一个示例的改进，可能加入了错误处理、优化的用户体验或者更复杂的聊天功能。 通过这个AJAX聊天室例子，你可以理解到AJAX如何与服务器进行数据交换，以及如何在客户端实时更新内容。同时，...
在这个"第一个spring例子"中，我们将探讨如何创建一个简单的Spring应用，它包含了client和server两部分，这通常意味着我们将构建一个客户端-服务器架构的应用。为了运行此示例，你需要安装MySQL数据库服务和Apache ...
当用户在第一个下拉列表中做出选择时，第二个下拉列表将自动更新；接着，当第二个下拉列表被选中时，第三个下拉列表也会相应地更新。这一过程都是通过 Ajax 技术在后台默默地完成的，用户无须等待整个页面刷新。 ...
这个"很实用的Ajax例子"应该包含了一些基础到进阶的Ajax应用示例，非常适合初学者学习和理解Ajax的工作原理。 Ajax的核心是通过JavaScript与服务器进行异步通信，它允许网页在后台与服务器交换数据并局部更新页面，...
【标题】"ajax 例子demo(protype)"是一个关于使用AJAX技术实现动态页面更新的示例项目，其中可能包含了对JavaScript原型（protype）概念的应用。这个项目旨在帮助开发者理解和学习如何利用AJAX来增强用户体验，减少...
在本主题中，我们将深入探讨Ajax实战第四章中的例子，特别是如何使用jQuery来实现一个功能丰富的AJAX插件。AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下，与服务器交换数据并更新部分...
例如，初次加载时，第一个Tab应该显示其内容，其他Tab的内容应被隐藏。 通过以上步骤，你可以创建一个具有Ajax加载和滑动门效果的Tab页。这个小例子可以帮助你理解如何结合Ajax、JavaScript库和前端设计技巧来提升...
在最简单的Ajax例子中，通常会涉及以下几个关键组成部分： 1. **创建XMLHttpRequest对象**：这是Ajax的核心，它负责与服务器进行通信。在JavaScript中，几乎所有的浏览器都内置了XMLHttpRequest对象。如果需要跨域...
首先，我们来看第一个例子——输入自动提示。这个功能广泛应用于搜索框，当用户在输入框中键入字符时，系统会根据已输入的部分文本，动态地从后台数据库中检索匹配的数据并显示为提示列表。实现这个功能的关键在于...
- AJAX的核心是通过XMLHttpRequest对象与服务器进行异步通信，创建这个对象是第一步。 - XMLHttpRequest提供了send()方法来发送HTTP请求，以及onreadystatechange事件来监听服务器的响应状态。 2. **文件上传**：...
DWR3是DWR框架的第三个主要版本，它提供了一种高效、安全的方式，使JavaScript可以直接调用服务器端的Java方法。这种“反转Ajax”概念的核心在于，它不再需要传统的Ajax请求模式，即通过XMLHttpRequest对象手动构造...