日期:2014-05-16  浏览次数:20522 次

Ajax使用






处理XML响应

查询用户信息是,当我们在下拉列表选择此用户的时候,要实现无刷新获取用户信息

服务器端代码

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String uname=request.getParameter("uname");
		response.setContentType("text/xml;charset=utf-8");
		PrintWriter out = response.getWriter();
		StringBuilder bd=new StringBuilder();
		bd.append("<userinfo>");
		bd.append("<username>");
		if(uname==null || uname.length()==0)
		{
			bd.append("请选择用户");
		}else{
			bd.append(uname);
		}
		bd.append("</username>");
		bd.append("</userinfo>");
		out.println(bd.toString());
		out.flush();
		out.close();
	}


前台代码

<script type="text/javascript">
	function getUser(ouser){
  	var uname=ouser.value;
  	if(!uname){
  		alert("请选择查询用户");
  		ouser.focus;
  	}
  	//发送请求到服务器,判断用户名是否存在
  	//Ajax代码实现
  	 // 发送请求到服务器,判断用户名是否存在
	// 请求字符串
	var url = "servlet/doGetU?uname="+uname; 
	// 1. 创建XMLHttpRequest组件
	xmlHttpRequest = createXmlHttpRequest();
	// 2. 设置回调函数
	xmlHttpRequest.onreadystatechange = haoLeJiaoWo; 
	// 3. 初始化XMLHttpRequest组件
	xmlHttpRequest.open("GET",url,true); 
	// 4. 发送请求
	xmlHttpRequest.send(null);
 	} 
	function haoLeJiaoWo(){
       if(  xmlHttpRequest.readyState == 4     
	         && xmlHttpRequest.status == 200){
              var dom = xmlHttpRequest.responseXML;
              if(dom){
              	var userNodes=dom.getElementsByTagName("username");
              	if(userNodes.length>0){
              		var username=userNodes[0].firstChild.nodeValue;
              		document.getElementById("username").value=username;
              	}
   			  }
      	 }
	}
  function createXmlHttpRequest(){
  	if(window.XMLHttpRequest){//新版本IE浏览器(IE7及以上版本)或其他浏览器
		return new XMLHttpRequest();
	}else {                   //老版本IE浏览器(包括IE5和IE6)
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
  }
	</script>