第一个Ajax例子

最新推荐文章于 2022-04-13 21:05:43 发布

fuhao9611

最新推荐文章于 2022-04-13 21:05:43 发布

阅读量104

点赞数

分类专栏： Ajax 文章标签： Ajax F# 浏览器 IE JSP

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天写了一个很简单的例子，当输入乘数和被乘数，单击“开始计算”按钮之后，乘数和被乘数被传送到Web服务器，经过类型转换和计算之后，结果以普通文本的方式返回并显示。
其中：send_request()函数用来初始化XMLHttpRequest对象，并向Web服务器发起XMLHTTP请求;函数processRequest()则接受服务器返回的数据，并将这些数据解析后更新到页面相关区域，其作为XMLHttpRequest对象的回调函数使用；函数doCaculate响应按钮caculate的onClick事件，判断用户输入情况，并将目标url地址以参数的形式传送给函数send_request。
[b]calc.htm[/b]
[code]
<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>
[/code]
[b]process.jsp[/b]
[code]
<%@ 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);
%>
[/code]