AJAX Java

需求：完成一个异常获取后台服务器的当前时间。

一、页面制作一个按钮

<input id="btn" type="button" value="异步方式获取服务器的时间"/><br/>
            当前服务器的时间为： <span id="time"></span>

二、编写JS异步提交请求后台

<script type="text/javascript">
  		window.onload = function(){
  			
  			document.getElementById("btn").onclick = function(){
				//异步方式请求后台
				
				//以下为AJAX的开发步骤
				//关键点：依靠JS的对象，称之为异步对象
				
				//1.创建异步对象
				var ajax = null;
				try{
					//IE浏览器(低版本)
					ajax = new ActiveXObject("microsoft.xmlhttp");
				}catch(e){
					//非IE浏览器或者IE高版本	
					ajax = new XMLHttpRequest();
				}
				//2.设置参数
				//参数一：请求方式 GET/POST
				//参数二：请求地址
				ajax.open("GET","${pageContext.request.contextPath}/ShowTime");
				
				//3.发送异步请求
				//参数：请求正文的内容
				ajax.send(null);
				
				//4.监听服务器的状态
				// 请求状态 ： readyState属性    4：代表请求完全到达服务器，并且服务器成功接收了
				// 响应状态：  status 属性           200: 代表服务器成功地发送了响应数据
				ajax.onreadystatechange = function(){
					if(ajax.readyState==4 && ajax.status==200){
						//5.接收服务器的数据  responseText：接收服务器的数据
						var data = ajax.responseText;
						
						//6.利用DOM编程刷新局部的页面
						document.getElementById("time").innerHTML = data;
					}
				};
  			};
  			
  		};
  	
  	</script>

三、编写一个ShowTime的Servlet程序

/**
 * @author http://www.yiidian.com
 *
 */
//异步请求的后台代码
public class ShowTime extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("进入了后台");

		// 1.生产一个服务器的时间
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String curDate = sdf.format(new Date());
		
		//2.异步请求下如何返回数据给页面？ 答案是：必须直接返回字符串
		PrintWriter out = response.getWriter();
		out.write(curDate);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

注意，异步请求的后台必须要返回字符串给前台。

四、在web.xml配置Servlet程序

<servlet>
    <servlet-name>ShowTime</servlet-name>
    <servlet-class>com.yiidian.ShowTime</servlet-class>
  </servlet>
   <servlet-mapping>
    <servlet-name>ShowTime</servlet-name>
    <url-pattern>/ShowTime</url-pattern>
  </servlet-mapping>

五、运行效果

点击按钮，显示服务器时间。

案例源码下载：http://pan.baidu.com/s/1pLwsgRL