Ajax 入门小例子

来源：互联网发布：知乎怎么搜索专栏编辑：程序博客网时间：2024/04/26 22:04

simpleAjax.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script type="text/javascript">
   function ajaxFunction(){
    var xmlHttp;
    try{
     xmlHttp=new XMLHttpRequest();
    }catch(e){
     try{
      xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");
     }catch(e){
      try{
       xmlHttp=new ActiveXObject("Mscrosoft.XMLHTTP");
      }catch(e){
       alert("你的浏览器不支持Ajax");
       return false;
      }
     }
    }
    //readyState 包含有服务器响应的状态信息每当readyState状态改变时 onreadystatechange回调函数就会被调用
    //redayState 0 请求示初始化   在调用xmlHttp 的open()方法之前
    //readyState 1 请求已经提出,在调用send() 之前
    //readyState 2 请求已经发送出 (这时通常可以从响应中得到内容头部)
    //readyState 3 请求处理中 (呼应中有部分数据可用,但是服务器还没有完成响应)
    //readyState 4 请求已经完成(可以访问服务器响应并使用它)
    xmlHttp.onreadystatechange=function(){
      if(xmlHttp.readyState==4){
       document.myForm.time.value=xmlHttp.responseText;
      }
    }

    //准备请求
    xmlHttp.open("POST","time.jsp",true);
    //发送请求
    xmlHttp.send(null);
                return true;
   }
  </script>
</head>
<body>
  <form name="myForm">
   用户:<input type="text" name="username" onkeyup="ajaxFunction();"/>
   时间:<input type="text" name="time" />
  </form>
</body>
</html>

time.jsp

<%
    response.flushBuffer();
    SimpleDateFormat df=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    String dateStr=df.format(new java.util.Date());
    response.getWriter().print(dateStr);
%>