Ajax 异步传输应用

  最近在工作中接触了异步传输，现在总结一下。

之前用的比较多的，也是比较普遍的是js最基本的调用

//删除左右两端的空格
function trim(str) {
	return str.replace(/(^\s*)|(\s*$)/g, "");
}
function verify() {   

  var userName = document.getElementById("userName").value;  

  if (window.XMLHttpRequest) {   
      xmlhttp = new XMLHttpRequest();   
      //针对某些特定版本的mozillar浏览器的BUG进行修正   
      if (xmlhttp.overrideMimeType) {   
          xmlhttp.overrideMimeType("text/xml");   
      }   
  } else if (window.ActiveXObject) {   
      var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];   
      for (var i = 0; i < activexName.length; i++) {   
          try{ 
              xmlhttp = new ActiveXObject(activexName[i]);   
              break;   
          } catch(e){   
          }   
      }   
  }   

  if (!xmlhttp) {   
      alert("XMLHttpRequest对象创建失败!!");   
      return;   
  }    

  xmlhttp.onreadystatechange = callback;   
  
  var url = "{调用地址}?userName="+ userName;   
  
  //POST方式请求的代码   
  xmlhttp.open("POST",url,true);   
  xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    
  
  xmlhttp.send(null);   
 
}   

//回调函数   
function callback() {   
  //6.接收响应数据   
  //判断对象的状态是交互完成   
  if (xmlhttp.readyState == 4) {   
      //判断http的交互是否成功   
	  
      if (xmlhttp.status == 200) {   
          //获取服务漆器端返回的数据   
          //获取服务器段输出的纯文本数据   
          var responseText = trim(xmlhttp.responseText); 
         
          if(responseText=="0"){
        	  alert("用户名不能为空！");
          }else if(responseText=="1"){
        	  
        	  alert("用户名已经存在！");
        	  
         }else{
        	  alert("用户名不存在，可以注册"); 
          }  
      } else {   
          alert("error！"+xmlhttp.status);   
      }   
  }   
} 

 

然后在含有被调用的方法的.java文件中，加入

public void checkUserName(HttpServletRequest request,
		HttpServletResponse response){
			try {   
	            // 设置响应文件格式，这是为text/html   
	            response.setContentType("text/html;charset=UTF-8");   
	            PrintWriter out = response.getWriter();   
	            // 1.取参数   
	            String userName= request.getParameter("userName"); 
	            // 2.检查参数是否有问题   
	            if (userName== null || userName.length() == 0) {   
	                out.println("0");   
	            } else if({用username查询数据库是否存在，如存在}){ 
	                   out.println("1");   
	             } else {   
	                    out.println("-1");   
	             }   
	              
	        } catch (Exception e) {   
	            e.printStackTrace();   
	        }
			
		} 

这样，就能实现异步数据的查询！

但是.java仅仅这样的话，并不能满足异步调用更多的数据，或是会很麻烦。

因为上面的.java文件最后返回的是一个test/html的文件，也就是一个页面。咱们可以将其改为跳转到一个jsp页面，并且为其传递参数。下面是springMVC框架的.java文件

public String checkUserName(,HttpServletRequest request,
		HttpServletResponse response, Model model){  
	            String userName= request.getParameter("userName");  // 1.取参数 
	          	boolean exist = {查询数据库中userName是否存在};
		model.addAttribute("exist",exist);
		//还可以传递其他参数
		return "regist/index"//此处为传递的text/html格式页面，在xmlhttp.responseText处将会被读取			
	}

 然后编写一个"regist/index"的.jsp页面就可以了。

 

直接写上面的js就可以完成工作，但这样写代码量会很多，还有一些封装好的Ajax，用起来也是比较方便的，比如yahoo.js.

.java 文件可以不变，直接修改js即可。如下：

function verify(){
	var userName = document.getElementById("userName").value; 
	function handleSuccess(o){		
   	var userName= trim(o.responseText);
  	document.write(userName);
    	
	}
	function handleFailure(){
		alert("系统错误，请稍后再试！");
		return;
 	}
	
	var getNameCallback = { 
		  success: handleSuccess, 
		  failure: handleFailure,
		  cache:false
	};
	var url = "{调用地址}"; 
	var userName= "userName="+userName;
	
	var request = YAHOO.util.Connect.asyncRequest('POST', url, getNameCallback , postData);
}