Ajax 学习笔记(1)

最新推荐文章于 2025-09-12 10:01:49 发布

原创最新推荐文章于 2025-09-12 10:01:49 发布 · 763 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #exception #input #stylesheet #function

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

从今天开始学习Ajax,不知道自己能坚持多久写博客,呵呵!

以前看过Ajax的书,只是浏览,知道了它的大概意思,大概流程.前两天才真正的开始仔细的看.用的是Ajax开发精要那本书.

今天试验了一个简单的例子.

index.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch03--一个简单的例子</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 = "<br>正在计算，请稍后......";
   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);
%>