一个Ajax的简单实例

   通常WEB应用中与服务器的交互都是利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息,等待服务器的响应,然后一张新的页面会加载结果。

而AJAX,通过JavaScript的XMLHttpRequest对象,直接与服务器来通信。通过使用HTTP请求,web页可向服务器进行请求,并得到来自服务器的响应,而不加载页面。

1、客户端页面代码:
<html>
<body>
<script type="text/javascript">
function ajaxFunction(){
 var xmlHttp;
 if(window.ActiveXObject){
   //IE浏览器
   xmlHttp = new ActiveXObject("MicroSoft.XMLHTTP");
 }else if(window.XMLHttpRequest){
   //其他浏览器
   xmlHttp = new XMLHttpRequest();
 }
 //onreadystatechange 属性存有处理服务器响应的函数
 xmlHttp.onreadystatechange=function(){
/*
  readyState 属性
  0 请求未初始化(在调用 open() 之前)
  1 请求已提出(调用 send() 之前)
  2 请求已发送(这里通常可以从响应得到内容头部)
  3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
  4 请求已完成(可以访问服务器响应并使用它)
*/
      if(xmlHttp.readyState==4){
           if(xmlHttp.status==200){
	        document.myForm.time.value=xmlHttp.responseText;
	        alert("返回客户端的信息为:"+xmlHttp.responseText);	
           }
      }
   }
   xmlHttp.open("GET",url,true);
   xmlHttp.send(null);	
}
</script>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>
</body>
</html>

 2、服务器端代码

PrintWriter out = response.getWriter();
out.write("返回客户端的信息");

 

相关推荐