第一个Ajax例子
今天写了一个很简单的例子，当输入乘数和被乘数，单击“开始计算”按钮之后，乘数和被乘数被传送到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="开始计算" > <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);%>
页:
[1]